A theming library for React Native applications
An efficient and
StyleSheet.createcompatible theming library for React Native.
$ yarn add react-native-theming
or
$ npm install --save react-native-theming
import { createTheme } from 'react-native-theming'const themes = [ createTheme({ backgroundColor: 'white', textColor: 'black', buttonColor: 'blue', buttonText: 'white', icon: require('./icons/default.png'), statusBar: 'dark-content', }, 'Light'), createTheme({ backgroundColor: 'black', textColor: 'white', buttonColor: 'yellow', buttonText: 'black', icon: require('./icons/colorful.png'), statusBar: 'light-content', }, 'Dark'), ];
Create styles as you would with
StyleSheet.create. Except you can now use theme variables on your styles with an
@prefix followed by the name of the theme variable as declared in the theme. You can also construct your style including the theme variable, like 'rgba(@backgroundColor, 0.2)'.
import { createStyle } from 'react-native-theming';const styles = createStyle({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '@backgroundColor', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, color: '@textColor', }, instructions: { textAlign: 'center', color: '#888', marginBottom: 5, }, button: { margin: 10, padding: 10, backgroundColor: '@buttonColor', borderRadius: 3, flex: 1, alignItems: 'center', }, });
The theming library provides
Theme.View,
Theme.Image,
Theme.Text,
Theme.AnimatedView,
Theme.AnimatedImage,
Theme.Animated.Textcomponents, which needs to be used in place of respective View, Image and Text for the theme to take affect. Custom components could be easily made themable as well.
import { createThemedComponent } from 'react-native-theming'; import { TouchableOpacity, StatusBar } from 'react-native';const Button = createThemedComponent(TouchableOpacity); const Bar = createThemedComponent(StatusBar, ['barStyle', 'backgroundColor']);
It is not just the styles, but the themes could even be applied to the props. Not all properties will however support theming. For example, with the builtin components, only
Theme.Imageand
Theme.AnimatedImagesupports theming with
sourceproperty. You can however create custom components with an array of props that needs theming support. In the above example, the
StatusBarcomponent has been themed with
barStyleand
backgroundColorprops.
import React from 'react'; import Theme from 'react-native-theming'; import { View, Text, StatusBar } from 'react-native';... Create your themes ... Create the styles ... Create custom components
export default class ThemeDemo extends Component { render() { return ( <theme.view style="{styles.container}"> <theme.image source="@icon"></theme.image> <theme.text style="{styles.welcome}"> React Native Theming Demo! </theme.text> <theme.text style="{styles.instructions}"> To experiment check app.js file </theme.text> You can now create your themes using JSON. The styles declaration is directly compatible with StyleSheet.create. You just need to replace
StyleSheet.create
withcreateStyle
and add your theme variables in the styles. { themes.map(theme => ( theme.apply()}> <theme.text style="{{" color:>{theme.name}</theme.text> )) } </theme.view> ); } }
Applying themes is just a matter of invoking
applymethod on the
themeinstance returned by the
createThememethod. Check out the Button.onPress event in the above example. The first created theme becomes the default theme.
or