mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Héctor RamosandFacebook Github Bot
63fa3f21c5
Summary: Implements the Appearance native module as discussed in https://github.com/react-native-community/discussions-and-proposals/issues/126. The purpose of the Appearance native module is to expose the user's appearance preferences. It provides a basic get() API that returns the user's preferred color scheme on iOS 13 devices, also known as Dark Mode. It also provides the ability to subscribe to events whenever an appearance preference changes. 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. Reviewed By: yungsters Differential Revision: D16699954 fbshipit-source-id: 03b4cc5d2a1a69f31f3a6d9bece23f6867b774ea
80 lines
2.4 KiB
JavaScript
80 lines
2.4 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import EventEmitter from '../vendor/emitter/EventEmitter';
|
|
import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
|
|
import NativeAppearance, {
|
|
type AppearancePreferences,
|
|
type ColorSchemeName,
|
|
} from './NativeAppearance';
|
|
import invariant from 'invariant';
|
|
|
|
type AppearanceListener = (preferences: AppearancePreferences) => void;
|
|
const eventEmitter = new EventEmitter();
|
|
|
|
const nativeColorScheme: ?string =
|
|
NativeAppearance == null ? null : NativeAppearance.getColorScheme();
|
|
invariant(
|
|
nativeColorScheme === 'dark' ||
|
|
nativeColorScheme === 'light' ||
|
|
nativeColorScheme == null,
|
|
"Unrecognized color scheme. Did you mean 'dark' or 'light'?",
|
|
);
|
|
|
|
let currentColorScheme: ?ColorSchemeName = nativeColorScheme;
|
|
|
|
if (NativeAppearance) {
|
|
const nativeEventEmitter = new NativeEventEmitter(NativeAppearance);
|
|
nativeEventEmitter.addListener(
|
|
'appearanceChanged',
|
|
(newAppearance: AppearancePreferences) => {
|
|
const {colorScheme} = newAppearance;
|
|
invariant(
|
|
colorScheme === 'dark' ||
|
|
colorScheme === 'light' ||
|
|
colorScheme == null,
|
|
"Unrecognized color scheme. Did you mean 'dark' or 'light'?",
|
|
);
|
|
currentColorScheme = colorScheme;
|
|
eventEmitter.emit('change', {colorScheme});
|
|
},
|
|
);
|
|
}
|
|
|
|
module.exports = {
|
|
/**
|
|
* Note: Although color scheme is available immediately, it may change at any
|
|
* time. Any rendering logic or styles that depend on this should try to call
|
|
* this function on every render, rather than caching the value (for example,
|
|
* using inline styles rather than setting a value in a `StyleSheet`).
|
|
*
|
|
* Example: `const colorScheme = Appearance.getColorScheme();`
|
|
*
|
|
* @returns {?ColorSchemeName} Value for the color scheme preference.
|
|
*/
|
|
getColorScheme(): ?ColorSchemeName {
|
|
return currentColorScheme;
|
|
},
|
|
/**
|
|
* Add an event handler that is fired when appearance preferences change.
|
|
*/
|
|
addChangeListener(listener: AppearanceListener): void {
|
|
eventEmitter.addListener('change', listener);
|
|
},
|
|
/**
|
|
* Remove an event handler.
|
|
*/
|
|
removeChangeListener(listener: AppearanceListener): void {
|
|
eventEmitter.removeListener('change', listener);
|
|
},
|
|
};
|