How to implement a user selectable theme / style in react native?

Question

If user has selected light-theme, and switches to dark-theme, then all scenes will immediately render to using the dark-theme.

I am using react-native-router-flux if this helps.

Thanks in advance,

Answer 1

Different approaches are possible. One of them is to use React context. Generally it should be used with caution but theming is one of the official examples where it is suitable.

Theming is a good example of when you might want an entire subtree to have access to some piece of information

So the example might look like

class App extends Component {
  getChildContext() {
    return {theme: { primaryColor: "purple" }};
  }
  ...
}
App.childContextTypes = {
  theme: React.PropTypes.object
};

where you set the context for rest of your application and then you use it in your components

class Button extends Component {
  render() {
    return <TouchableHighlight underlayColor={this.context.theme.primaryColor}>...
  }
}
Button.contextTypes = {
  theme: React.PropTypes.object
};

If you want to switch theme, you can set context based on your state/props that can be based on user selection.

Currently we are dealing with same questions and therefore we have starting prototyping library called react-native-themeable.

The idea is to use context to store theme and (re)implement RN components so they can replace original components but supports theming.

Example of theme switching you can find in https://github.com/instea/react-native-themeable/blob/master/examples/src/SwitchTheme.js