react-native-dark-mode
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:
<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-modecd ios && pod install # for iOS
React Native 0.59
npm install react-native-dark-modereact-native link react-native-dark-mode
Usage
High level APIs
useDarkMode
Returns a boolean. true
when dark mode is on.
{ const isDarkMode = return <View style= backgroundColor: isDarkMode ? 'black' : 'white' />}
useDarkModeContext
Returns dark
or light
.
const backgroundColors = light: 'white' dark: 'black' { const mode = const backgroundColor = backgroundColorsmode return <View style= backgroundColor />}
DynamicStyleSheet
, DynamicValue
and useDynamicStyleSheet
Just like StyleSheet
but with support for dynamic values.
const dynamicStyles = container: backgroundColor: 'white' 'black' flex: 1 text: color: 'black' 'white' textAlign: 'center' { const styles = return <View style=stylescontainer> <Text style=stylestext>My text</Text> </View> }
DarkModeProvider
Allows you to set a specific mode for children.
{ 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.
{ return <DarkModeProvider> /* ... */ </DarkModeProvider> }
useDynamicValue
Returns the appropriate value depending on the theme. You can either pass a DynamicValue
or just two arguments.
const lightLogo = const darkLogo = const logoUri = lightLogo darkLogo { const source = return <Image source=source />}
{ const placeholderColor = return <TextInput placeholderTextColor=placeholderColor />}
Low level APIs
initialMode
This is the initial mode that the app started in.
console
eventEmitter
Allows you to subscribe to changes in the mode.
eventEmitter
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