Skip to content
Detect dark mode in React Native
TypeScript Objective-C Java JavaScript Ruby Python
Branch: master
Clone or download
Latest commit b24df8d Nov 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Android support Sep 24, 2019
example Preventing event emitter on Android from sending the same value Oct 19, 2019
library Exporting Mode from types Nov 9, 2019
.gitattributes Basic library + example app structure Jun 7, 2019
.gitignore Android support Sep 24, 2019
.prettierignore Android support Sep 24, 2019
.prettierrc
LICENSE Jun 6, 2019
README.md Exporting Mode from types Nov 9, 2019
package.json Moving from overriding onConfigurationChanged of ReactActivity to and… Oct 17, 2019
showcase.android.gif Android showcase Sep 24, 2019
showcase.ios.gif Android showcase Sep 24, 2019
tsconfig.base.json Support for iOS 9-12 Jun 8, 2019
yarn.lock Moving from overriding onConfigurationChanged of ReactActivity to and… Oct 17, 2019

README.md

react-native-dark-mode

npm version PRs Welcome

Showcase iOS     Showcase Android

Installation

Prevent Android app from restarting when dark mode changes

You must append |uiMode to the android:configChanges prop of <activity> in AndroidManifest.xml. Example:

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -13,7 +13,7 @@
                <activity
                        android:name=".MainActivity"
                        android:label="@string/app_name"
-                       android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+                       android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
                        android:windowSoftInputMode="adjustResize">
                        <intent-filter>
                                <action android:name="android.intent.action.MAIN" />

React Native 0.60 or above

npm install react-native-dark-mode
cd ios && pod install # for iOS

React Native 0.59

npm install react-native-dark-mode
react-native link react-native-dark-mode

Usage

High level APIs

useDarkMode

Returns a boolean. true when dark mode is on.

import { useDarkMode } from 'react-native-dark-mode'

function Component() {
	const isDarkMode = useDarkMode()
	return <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} />
}

useDarkModeContext

Returns dark or light.

import { useDarkModeContext } from 'react-native-dark-mode'

const backgroundColors = {
	light: 'white',
	dark: 'black',
}

function Component() {
	const mode = useDarkModeContext()
	const backgroundColor = backgroundColors[mode]
	return <View style={{ backgroundColor }} />
}

DynamicStyleSheet, DynamicValue and useDynamicStyleSheet

Just like StyleSheet but with support for dynamic values.

import { DynamicStyleSheet, DynamicValue, useDynamicStyleSheet } from 'react-native-dark-mode'

const dynamicStyles = new DynamicStyleSheet({
	container: {
		backgroundColor: new DynamicValue('white', 'black'),
		flex: 1,
	},
	text: {
		color: new DynamicValue('black', 'white'),
		textAlign: 'center',
	},
})

function Component() {
	const styles = useDynamicStyleSheet(dynamicStyles)

	return (
		<View style={styles.container}>
			<Text style={styles.text}>My text</Text>
		</View>
	)
}

DarkModeProvider

Allows you to set a specific mode for children.

import { DarkModeProvider } from 'react-native-dark-mode'

function MyScreen() {
	return (
		<>
			{/* will be rendered using dark theme */}
			<DarkModeProvider mode="dark">
				<Component />
			</DarkModeProvider>

			{/* will be rendered using light theme */}
			<DarkModeProvider mode="light">
				<Component />
			</DarkModeProvider>

			{/* will be rendered using current theme */}
			<Component />
		</>
	)
}

It is recommended to wrap your application in a DarkModeProvider without a mode prop to observe a performance improvement.

function App() {
	return (
		<DarkModeProvider>
			{/* ... */}
		</DarkModeProvider>
	)
}

useDynamicValue

Returns the appropriate value depending on the theme. You can either pass a DynamicValue or just two arguments.

import { DynamicValue, useDynamicValue } from 'react-native-dark-mode'
const lightLogo = require('./light.png')
const darkLogo = require('./dark.png')
const logoUri = new DynamicValue(lightLogo, darkLogo)

function Logo() {
	const source = useDynamicValue(logoUri)
	return <Image source={source} />
}
import { useDynamicValue } from 'react-native-dark-mode'

function Input() {
	const placeholderColor = useDynamicValue('black', 'white')
	return <TextInput placeholderTextColor={placeholderColor} />
}

Low level APIs

initialMode

This is the initial mode that the app started in.

import { initialMode } from 'react-native-dark-mode'

console.log('App started in', intialMode, 'mode')

eventEmitter

Allows you to subscribe to changes in the mode.

import { eventEmitter } from 'react-native-dark-mode'

eventEmitter.on('currentModeChanged', newMode => {
	console.log('Switched to', newMode, 'mode')
})

Requirements

iOS

  • Xcode 11
  • React Native 0.59.9 or higher
  • iOS 13 to see it in action

Android

  • Android 10 or Android Auto to see it in action
You can’t perform that action at this time.