[DO NOT MERGE] Preview: Appearance Native Module

[hramos]

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. It provides a basic API that returns the user's preferred color scheme on iOS 13 and Android 10devices, also known as Dark Mode or Night theme. It also provides the ability to subscribe to events whenever an appearance preference changes.

The new useColorScheme hook is provided as the preferred way of accessing the user's preferred color scheme.

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.

Changelog:

[iOS] [Added] - The Appearance native module can be used to prepare your app for Dark Mode on iOS 13.
[Android] [Added] - The Appearance native module can be used to prepare your app for Night theme on Android 10.

Android: Configuration Changes

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);
    }
}

iOS: Dark Mode changes

If your app does not use RCTRootView, you'll need to override one of the lifecycle view/view controller methods that get called when the trait collection changes (see https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface). Then, post a notification with name "RCTUserInterfaceStyleDidChangeNotification" and the new color scheme in the payload. Refer to the contents of this PR for more details.

[brentvatne]

Suggested change

	eventEmitter.addListener('change', listener);
	return eventEmitter.addListener('change', listener);

[brentvatne]

Suggested change

	addChangeListener(listener: AppearanceListener): void {
	addChangeListener(listener: AppearanceListener): EventSubscription {

[brentvatne]

imo we should remove this function and have people just call subscription.remove() on the returned value from addChangeListener

[brentvatne]

Suggested change

	Appearance.addChangeListener(callback);
	let eventSubscription = Appearance.addChangeListener(callback);

[brentvatne]

Suggested change

	return () => Appearance.removeChangeListener(callback);
	return () => eventSubscription.remove();

[brentvatne]

we should add back @(UIUserInterfaceStyleUnspecified): RCTAppearanceColorSchemeNoPreference here to better match related web spec. see related discussion

[jfrolich]

Awesome! Would there be a declarative way to add colors with a light and dark appearance in stylesheets that implement two values for dark-mode and light-mode? (creating the appropriate NSColor and something equivalent in Android).

This allows to declare colors in views that are not declarative (or directly managed by react). For instance in 'react-native-navigator', where you can add styles of the appearance of a modal view once (when opening), but the modal view is not in the react view hierarchy.

This also implements the dark-mode more directly as you would in native apps. Including the fade to the new color when the mode is changing.

I do see that this needs changes in the Stylesheet internals. If that is not happening it would also be great to be able to use native "Color Sets" and system colors in react-native. Perhaps by prefixing the color name with a symbol?

[brentvatne]

@jfrolich - no, that's not part of this PR. see react-native-community/discussions-and-proposals#126 for more discussion

[jfrolich]

@jfrolich - no, that's not part of this PR. see react-native-community/discussions-and-proposals#126 for more discussion

Thanks for referencing! Definitely good to have a hook to consume the appearance preference, and a way to do dark mode before dynamic colors are available in react-native.

[hramos]

Closing as this was a preview of the internal stack, of which the first commit just landed: 63fa3f2