Installation

npm install react-native-dynamic

Usage

useDarkMode

Returns a boolean. true when dark mode is on.

import { useDarkMode } from 'react-native-dynamic'

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

DynamicValue

A helper class meant to be used with DynamicStyleSheet and useDynamicValue. The first argument is the value to be used with a light color scheme, the second argument is the value to be used with a dark color scheme.

import { DynamicValue } from 'react-native-dynamic'

const backgroundColor = new DynamicValue('white', 'black')

DynamicStyleSheet

Just like StyleSheet but with support for dynamic values.

import { DynamicStyleSheet, DynamicValue, useDynamicValue } from 'react-native-dynamic'

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

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

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

ColorSchemeProvider

Allows you to set a specific mode for children.

import { ColorSchemeProvider } from 'react-native-dynamic'

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

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

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

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

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

useDynamicValue

Returns the appropriate value depending on the theme. You can either pass a DynamicValue, an object containing dark and light properties, or just two arguments.

import { DynamicValue, useDynamicValue } from 'react-native-dynamic'
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-dynamic'

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

import { useDynamicValue } from 'react-native-dynamic'

const datePickerConfig = {
	light: {
		backgroundColor: 'white',
		color: 'black',
	},
	dark: {
		backgroundColor: 'black',
		color: 'white',
	},
}

function CustomDatePicker() {
	const config = useDynamicValue(datePickerConfig)
	return <DatePicker config={config} />
}

useColorSchemeContext

Returns dark or light but reads value from context.

import { useColorSchemeContext } from 'react-native-dynamic'

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

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

Requirements

• React Native >0.62