react-native-dynamic
Installation
npm install react-native-dynamic
Usage
useDarkMode
Returns a boolean. true
when dark mode is on.
{ const isDarkMode = 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.
const backgroundColor = 'white' 'black'
DynamicStyleSheet
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> }
ColorSchemeProvider
Allows you to set a specific mode for children.
{ 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.
{ 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.
const lightLogo = const darkLogo = const logoUri = lightLogo darkLogo { const source = return <Image source=source />}
{ const placeholderColor = return <TextInput placeholderTextColor=placeholderColor />}
const datePickerConfig = light: backgroundColor: 'white' color: 'black' dark: backgroundColor: 'black' color: 'white' { const config = return <DatePicker config=config />}
useColorSchemeContext
Returns dark
or light
but reads value from context.
const backgroundColors = light: 'white' dark: 'black' { const mode = const backgroundColor = backgroundColorsmode return <View style= backgroundColor />}
Requirements
- React Native 0.62