Files
react-native/Libraries/Utilities/Appearance.js
T
Tim Yung 305b4253c2 RN: Change Appearance to Return EventSubscription
Summary:
Changes `Appearance.addChangeListener` to return an `EventSubscription` object that has a `remove()` method on it.

In an upcoming commit, calling `Appearance.removeChangeListener` will lead to a deprecation warning.

Changelog:
[General][Change] - `Appearance.addChangeListener` now returns an `EventSubscription`.

Reviewed By: kacieb

Differential Revision: D26696388

fbshipit-source-id: d0bdeffff3a2a366b3c11b6dc1417dfb2f1455c2
2021-03-03 21:43:48 -08:00

99 lines
3.0 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 strict-local
*/
import EventEmitter, {
type EventSubscription,
} from '../vendor/emitter/EventEmitter';
import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
import NativeAppearance, {
type AppearancePreferences,
type ColorSchemeName,
} from './NativeAppearance';
import invariant from 'invariant';
import {isAsyncDebugging} from './DebugEnvironment';
type AppearanceListener = (preferences: AppearancePreferences) => void;
const eventEmitter = new EventEmitter<{
change: [AppearancePreferences],
}>();
type NativeAppearanceEventDefinitions = {
appearanceChanged: [AppearancePreferences],
};
if (NativeAppearance) {
const nativeEventEmitter = new NativeEventEmitter<NativeAppearanceEventDefinitions>(
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'?",
);
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 {
if (__DEV__) {
if (isAsyncDebugging) {
// Hard code light theme when using the async debugger as
// sync calls aren't supported
return 'light';
}
}
// TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
const nativeColorScheme: ?string =
NativeAppearance == null
? null
: NativeAppearance.getColorScheme() || null;
invariant(
nativeColorScheme === 'dark' ||
nativeColorScheme === 'light' ||
nativeColorScheme == null,
"Unrecognized color scheme. Did you mean 'dark' or 'light'?",
);
return nativeColorScheme;
},
/**
* Add an event handler that is fired when appearance preferences change.
*/
addChangeListener(listener: AppearanceListener): EventSubscription {
return eventEmitter.addListener('change', listener);
},
/**
* @deprecated Use `remove` on the EventSubscription from `addEventListener`.
*/
removeChangeListener(listener: AppearanceListener): void {
// NOTE: This will report a deprecation notice via `console.error`.
eventEmitter.removeListener('change', listener);
},
};