react-native-themes
v1.0.2
Published
Library that allows you to integrate multiple themes
Downloads
141
Readme
react-native-themes
Getting started
$ npm install react-native-themes --save
OR
$ yarn add react-native-themes --save
Steps of Usage
Step 1 - Define the color themes.
//colors.js
import Theme from 'react-native-themes';
const colors = new Theme.Colors({
DEFAULT_THEME: {
backgroundColor: '#fff',
},
DARK_THEME: {
backgroundColor: '#3b5998',
}
});
export default colors;
Note - Do not forget to import this file at the top of your component(ie. App.js).
Step 2 - Apply theme on App Launch
By default the first theme in the colors template is selected. In the root component of your app like App.js
, register ThemeListeners
for the component to act on the default theme applied.
//App.js
componentWillMount() {
this.listener = Theme.addThemeListener(() => {
this.setState({});
});
}
componentWillUnmount() {
Theme.removeThemeListener(this.listener);
}
Step 3 - Create Stylesheet
Create the stylesheet for your components as a function.
Example -
import { StyleSheet } from 'react-native';
const styles = (colors) => {
return StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: colors.backgroundColor,
},
...
});
}
export default styles;
Step 4 - Apply colors on Components
In the components where you would like to apply the theme colors call the getStyles(stylesheet)
function in componentWillMount()
.
import Theme from 'react-native-themes';
import stylesheet from './styles'; //Stylesheet created in Step 2
let styles;
class MyComponent extends Component {
...
componentWillMount(){
styles = Theme.getStyles(stylesheet);
//use the styles for styling the components in render methods.
}
...
}
Note
For inline styles, you can get the colors by calling Theme.getColors()
Example
render(){
const colors = Theme.getColors();
return (
<View style={{ backgroundColor: colors.backgroundColor, flex:1 }}>
...
</View>
);
}
Step 5 - Change Color Theme
By default
the first color theme will be applied. If you want to change the color theme you need to call the Theme.setColorTheme(themeName, callback)
themeName
- Name of the theme defined in Step 1.callback
- Callback function to be called after theme is set
Example-
import Theme from 'react-native-themes';
...
render(){
//have to fetch styles again as the Theme Change
//will re-render the Component.
styles = Theme.getStyles(stylesheet);
return (
...
<Button
onPress={() => {
if (Theme.getColorTheme() === 'DEFAULT_THEME') {
Theme.setColorTheme('DARK_THEME', () => {
this.setState({}); //force re-render of the component
});
} else {
Theme.setColorTheme('DEFAULT_THEME', () => {
this.setState({}); //force re-render of the component
}));
}
}}
title="Change Theme" />
...
);
}
Feedback
Bugs? Comments? Features? PRs and Issues happily welcomed!
Contributor
Sandeep Tiwari