Skip to content
Permalink
Browse files
useColorScheme hook (#26143)
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
  • Loading branch information
hramos authored and facebook-github-bot committed Aug 31, 2019
1 parent 2c91733 commit 51681e80ab0d1efdaba684b626994b694d53d2a5
Show file tree
Hide file tree
Showing 8 changed files with 114 additions and 59 deletions.
@@ -0,0 +1,31 @@
/**
* 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 {useMemo} from 'react';
import {useSubscription} from 'use-subscription';
import Appearance from './Appearance';
import type {ColorSchemeName} from './NativeAppearance';

export default function useColorScheme(): ?ColorSchemeName {
const subscription = useMemo(
() => ({
getCurrentValue: () => Appearance.getColorScheme(),
subscribe: callback => {
Appearance.addChangeListener(callback);
return () => Appearance.removeChangeListener(callback);
},
}),
[],
);

return useSubscription(subscription);
}
@@ -82,6 +82,7 @@ import typeof ToastAndroid from '../Components/ToastAndroid/ToastAndroid';
import typeof * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
import typeof TVEventHandler from '../Components/AppleTV/TVEventHandler';
import typeof UIManager from '../ReactNative/UIManager';
import typeof useColorScheme from '../Utilities/useColorScheme';
import typeof useWindowDimensions from '../Utilities/useWindowDimensions';
import typeof UTFSequence from '../UTFSequence';
import typeof Vibration from '../Vibration/Vibration';
@@ -393,6 +394,9 @@ module.exports = {
> {
return require('../Renderer/shims/ReactNative').unstable_batchedUpdates;
},
get useColorScheme(): useColorScheme {
return require('../Utilities/useColorScheme').default;
},
get useWindowDimensions(): useWindowDimensions {
return require('../Utilities/useWindowDimensions').default;
},
@@ -20,7 +20,6 @@ const SnapshotViewIOS = require('./examples/Snapshot/SnapshotViewIOS.ios');
const URIActionMap = require('./utils/URIActionMap');

const {
Appearance,
AppRegistry,
AsyncStorage,
BackHandler,
@@ -30,6 +29,7 @@ const {
SafeAreaView,
StyleSheet,
Text,
useColorScheme,
View,
YellowBox,
} = require('react-native');
@@ -38,6 +38,7 @@ import type {RNTesterExample} from './types/RNTesterTypes';
import type {RNTesterAction} from './utils/RNTesterActions';
import type {RNTesterNavigationState} from './utils/RNTesterNavigationReducer';
import {RNTesterThemeContext, themes} from './components/RNTesterTheme';
import type {ColorSchemeName} from '../../Libraries/Utilities/NativeAppearance';

type Props = {
exampleFromAppetizeParams?: ?string,
@@ -86,6 +87,49 @@ const Header = ({onBack, title}: {onBack?: () => mixed, title: string}) => (
</RNTesterThemeContext.Consumer>
);

const RNTesterExampleContainerViaHook = ({
onBack,
title,
module,
}: {
onBack?: () => mixed,
title: string,
module: RNTesterExample,
}) => {
const colorScheme: ?ColorSchemeName = useColorScheme();
const theme = colorScheme === 'dark' ? themes.dark : themes.light;
return (
<RNTesterThemeContext.Provider value={theme}>
<View style={styles.exampleContainer}>
<Header onBack={onBack} title={title} />
<RNTesterExampleContainer module={module} />
</View>
</RNTesterThemeContext.Provider>
);
};

const RNTesterExampleListViaHook = ({
onNavigate,
list,
}: {
onNavigate?: () => mixed,
list: {
ComponentExamples: Array<RNTesterExample>,
APIExamples: Array<RNTesterExample>,
},
}) => {
const colorScheme: ?ColorSchemeName = useColorScheme();
const theme = colorScheme === 'dark' ? themes.dark : themes.light;
return (
<RNTesterThemeContext.Provider value={theme}>
<View style={styles.exampleContainer}>
<Header title="RNTester" />
<RNTesterExampleList onNavigate={onNavigate} list={list} />
</View>
</RNTesterThemeContext.Provider>
);
};

class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
_mounted: boolean;

@@ -113,14 +157,6 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
Linking.addEventListener('url', url => {
this._handleAction(URIActionMap(url));
});

Appearance.addChangeListener(prefs => {
this._handleAction(
RNTesterActions.ThemeAction(
prefs.colorScheme === 'dark' ? themes.dark : themes.light,
),
);
});
}

componentWillUnmount() {
@@ -147,32 +183,25 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
if (!this.state) {
return null;
}
const theme = this.state.theme;
if (this.state.openExample) {
const Component = RNTesterList.Modules[this.state.openExample];
if (Component && Component.external) {
return <Component onExampleExit={this._handleBack} />;
} else {
return (
<RNTesterThemeContext.Provider value={theme}>
<View style={styles.exampleContainer}>
<Header onBack={this._handleBack} title={Component.title} />
<RNTesterExampleContainer module={Component} />
</View>
</RNTesterThemeContext.Provider>
<RNTesterExampleContainerViaHook
onBack={this._handleBack}
title={Component.title}
module={Component}
/>
);
}
}
return (
<RNTesterThemeContext.Provider value={theme}>
<View style={styles.exampleContainer}>
<Header title="RNTester" />
<RNTesterExampleList
onNavigate={this._handleAction}
list={RNTesterList}
/>
</View>
</RNTesterThemeContext.Provider>
<RNTesterExampleListViaHook
onNavigate={this._handleAction}
list={RNTesterList}
/>
);
}
}
@@ -11,9 +11,8 @@
'use strict';

import * as React from 'react';
import {Appearance, Text, View} from 'react-native';
import {Appearance, Text, useColorScheme, View} from 'react-native';
import type {AppearancePreferences} from '../../../../Libraries/Utilities/NativeAppearance';

import {RNTesterThemeContext, themes} from '../../components/RNTesterTheme';

class ColorSchemeSubscription extends React.Component<
@@ -80,6 +79,23 @@ const ThemedText = props => (
exports.title = 'Appearance';
exports.description = 'Light and dark user interface examples.';
exports.examples = [
{
title: 'useColorScheme hook',
render(): React.Node {
const AppearanceViaHook = () => {
const colorScheme = useColorScheme();
return (
<RNTesterThemeContext.Provider
value={colorScheme === 'dark' ? themes.dark : themes.light}>
<ThemedContainer>
<ThemedText>useColorScheme(): {colorScheme}</ThemedText>
</ThemedContainer>
</RNTesterThemeContext.Provider>
);
};
return <AppearanceViaHook />;
},
},
{
title: 'Non-component `getColorScheme` API',
render(): React.Element<any> {
@@ -25,16 +25,10 @@ export type RNTesterExampleAction = {
openExample: string,
};

export type RNTesterThemeAction = {
type: 'RNTesterThemeAction',
theme: RNTesterTheme,
};

export type RNTesterAction =
| RNTesterBackAction
| RNTesterListAction
| RNTesterExampleAction
| RNTesterThemeAction;
| RNTesterExampleAction;

function Back(): RNTesterBackAction {
return {
@@ -55,18 +49,10 @@ function ExampleAction(openExample: string): RNTesterExampleAction {
};
}

function ThemeAction(theme: RNTesterTheme): RNTesterThemeAction {
return {
type: 'RNTesterThemeAction',
theme,
};
}

const RNTesterActions = {
Back,
ExampleList,
ExampleAction,
ThemeAction,
};

module.exports = RNTesterActions;
@@ -10,15 +10,10 @@

'use strict';

import {themes} from '../components/RNTesterTheme';
import type {RNTesterTheme} from '../components/RNTesterTheme';

const RNTesterList = require('./RNTesterList');
import {Appearance} from 'react-native';

export type RNTesterNavigationState = {
openExample: ?string,
theme: RNTesterTheme,
};

function RNTesterNavigationReducer(
@@ -36,8 +31,6 @@ function RNTesterNavigationReducer(
return {
// A null openExample will cause the views to display the RNTester example list
openExample: null,
theme:
Appearance.getColorScheme() === 'dark' ? themes.dark : themes.light,
};
}

@@ -48,16 +41,6 @@ function RNTesterNavigationReducer(
if (ExampleModule) {
return {
openExample: action.openExample,
theme: state.theme,
};
}
}

if (action.type === 'RNTesterThemeAction') {
if (action.colorScheme) {
return {
openExample: state.openExample,
theme: action.colorScheme === 'dark' ? themes.dark : themes.light,
};
}
}
@@ -112,6 +112,7 @@
"regenerator-runtime": "^0.13.2",
"scheduler": "0.15.0",
"stacktrace-parser": "^0.1.3",
"use-subscription": "^1.0.0",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
@@ -7043,6 +7043,11 @@ urix@^0.1.0:
resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=

use-subscription@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.0.0.tgz#25ed2161f75e9f6bd8c5c4acfe6087bfebfbfef4"
integrity sha512-PkDL9KSMN01nJYfa5c8O7Qbs7lmpzirfRWhWfIQN053hbIj5s1o5L7hrTzCfCCO2FsN2bKrU7ciRxxRcinmxAA==

use@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

0 comments on commit 51681e8

Please sign in to comment.