[DO NOT MERGE] Preview: Appearance Native Module #26172
Closed
Commits on Aug 23, 2019
-
Summary: Implements the Appearance native module as discussed in react-native-community/discussions-and-proposals#126. The purpose of the Appearance native module is to expose the user's appearance preferences. Initial support includes exposing the user's preferred color scheme on iOS 13 devices, also known as Dark Mode. The name, "Appearance", was chosen purposefully to allow for future expansion to cover other appearance preferences such as reduced motion, reduced transparency, or high contrast modes. It should be noted that the current implementation exposes the main UIWindow's user interface style, while it is possible to have multiple RCTRootViews with distinct user interface styles (for example, one RCTRootView that uses the system user interface style, while a second RCTRootView has a parent that has been forced to always display with a dark appearance). This is intentional as the goal is to provide the user's preferred color scheme. The module is written in a way that allows for future expansion to expose individual RCTRootView traits. Changelog: [iOS] [Added] - The Appearance native module can be used to prepare your app for Dark Mode on iOS 13. Differential Revision: D16699954 fbshipit-source-id: d6d78d808828931bde400c99986e6913877b1cee
-
Support light and dark themes in RNTester
Summary: Initial conversion of RNTester to support light and dark themes. Theming is implemented by providing the desired color theme via context. Example: ``` const ThemedContainer = props => ( <RNTesterThemeContext.Consumer> {theme => { return ( <View style={{ paddingHorizontal: 8, paddingVertical: 16, backgroundColor: theme.SystemBackgroundColor, }}> {props.children} </View> ); }} </RNTesterThemeContext.Consumer> ); ``` As RNTester's design follows the base iOS system appearance, I've chosen light and dark themes based on the actual iOS 13 semantic colors. The themes are RNTester-specific, however, and we'd expect individual apps to build their own color palettes. ## Examples The new Appearance Examples screen demonstrates how context can be used to force a theme. It also displays the list of colors in each RNTester theme. https://pxl.cl/HmzW (screenshot: Appearance Examples screen on RNTester with Dark Mode enabled. Displays useColorScheme hook, and context examples.) https://pxl.cl/HmB3 (screenshot: Same screen, with light and dark RNTester themes visible) Theming support in this diff mostly focused on the main screen and the Dark Mode examples screen. This required updating the components used by most of the examples, as you can see in this Image example: https://pxl.cl/H0Hv (screenshot: Image Examples screen in Dark Mode theme) Note that I have yet to go through every single example screen to update it. There's individual cases, such as the FlatList example screen, that are not fully converted to use a dark theme when appropriate. This can be taken care later as it's non-blocking. Reviewed By: zackargyle Differential Revision: D16681909 fbshipit-source-id: 1a5fff44b0dd00b8c3f439c81837d24771b28d94 -
Summary: A new useColorScheme hook is provided as the preferred way of accessing the user's preferred color scheme (aka Dark Mode). Changelog: [General] [Added] - useColorScheme hook Differential Revision: D16860954 fbshipit-source-id: a099b25681ec03b349826afedd89b1959c9fd6c6
-
Summary: Android implementation of the Appearance native module. Exposes the user's preferred color scheme: "dark" for Night theme ON, "light" for Night theme OFF. Subscribing to events whenever Night theme is switched on or off is not yet supported. ### RNTester Adds the AppearanceExample to RNTester on Android. Changelog: [Android][Added] - New Appearance module exposes the user's current Night theme preference Differential Revision: D16942161 fbshipit-source-id: b99b8c4e4148c380134a87c17b5cacadcacc8167
-
Appearance: Emit appearance changed event when uiMode changes
Summary: The AppearanceModule now emits a `appearanceChanged` event when the current uiMode configuration changes. To make your app handle Night mode changes, make sure to do the following: * Declare your Activity can handle uiMode configuration changes (https://developer.android.com/preview/features/darktheme#java): ``` android:configChanges="uiMode" ``` * Make sure to pass the configuration changed activity lifecycle callback from your ReactActivity: ``` Override protected void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(); if (mReactInstanceManager != null) { mReactInstanceManager.onConfigurationChanged(newConfig); } } ``` An example is now provided in the RNTester app. Differential Revision: D16985129 fbshipit-source-id: 2c3eb3319158990bb4dd226c88ec5093c6acf147
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.