iOS: Add Appearance TurboModule, useColorScheme hook [DO NOT MERGE] #26143
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: f11a12a9cb7884a806f3246de7cebb42e997c2d4
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: a7da5601a3faf2949219cf84fe0081e001905924
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: f15e4d01da7b8d94fd90a534d841f508b25dbb48
facebook-github-bot
added
CLA Signed
react-native-bot
added
the
Type: Enhancement
|
This is an exported version of the internal diff stack that starts at D16699954, to test changes in open source. |
hramos
changed the title
hramos
changed the title
brentvatne
reviewed
Aug 22, 2019
| /** | ||
| * Remove an event handler. | ||
| */ | ||
| static removeChangeListener(listener: AppearanceListener): void { |
There was a problem hiding this comment.
we should get rid of this function
| * Add an event handler that is fired when appearance preferences change. | ||
| */ | ||
| static addChangeListener(listener: AppearanceListener): void { | ||
| eventEmitter.addListener('change', listener); |
There was a problem hiding this comment.
we should return the result of this, an EventSubscription (which people can just call .remove() on) rather than depend on removeChangeListener
| appearancePreferences = {colorScheme}; | ||
|
|
||
| if (appearancePreferencesInitialized) { | ||
| // Don't fire 'change' the first time the dimensions are set. |
There was a problem hiding this comment.
s/dimensions/appearance preferences/
facebook-github-bot
pushed a commit
that referenced
this pull request
Aug 31, 2019
Summary: Pull Request resolved: #26143 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 Reviewed By: yungsters Differential Revision: D16860954 fbshipit-source-id: 8a2b6c2624ed7cf431ab331158bc5456cde1f185
|
This pull request was successfully merged by @hramos in 51681e8. When will my fix make it into a release? | Upcoming Releases |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This is a preview, and should not be merged.