react-native-theme
Theme manager for react native project!
Installation
npm i --save react-native-theme
Usage
Register a theme
; theme; theme;
Use theme as stylesheets
; ...<View style=stylescontainer></View>...
Set the root, otherwise this react-native-theme won't have a tree to render from and you won't get any updates from calling theme.active()
{ // You don't need to put it here, but this is how I did it in my parent React.Component, as I had styles based on // themes throughout my application. If you have styles only in one area, you will have improved performance // by setting the root there (though the performance may not be noticable for many applications). theme }
Platform Styles Support
You can also add specific style for different platforms like this:
theme;
API
- styles property Get current styles object, matching with current theme.
console
- name property Get current name of activated theme.
if themename == 'red' theme // sets the default theme and all under the root is rerendered else theme
- add(styles, name = 'default') Add styles to a theme. You can add styles many times to a theme as you want!
theme
- active(name = 'default') Active a theme. Theme data must be added before active.
<Button title="Press Me" onPress={ theme} />
- setRoot(root) Set root component for theme. When you active new theme, root component will be rerendered.
{ theme}
-
css(styles) Mixed convert string, array, object to react native compatible styles.
-
addComponents(components, name = 'default') Manage theme components to allow updating content while changing the theme.
components
is an object like{Container: /*Container Component*/}
-
Component Get current theme component like
theme.Container
orimport {Container} from 'react-native-theme'
-
reset() Reset all themes data
Example
react-native-web
This module also works with react-native-web. You used to need to add package aliases, but not anymore. Just an extension. For example in webpack
:
// webpack.config.js moduleexports = // ... resolve: extensions: '.web.js' '.js'
Looking for a live web demo? Go to here.