title: How do I change the theme of whole app in React-native?
body: <p>I want to change the theme of the app(say background colors) by selecting from a list of colors. I've tried saving the state in a reducer and applying the state to a new page.</p>
  
  <blockquote>
    <p>LoginView.js</p>
  </blockquote>
  
  <pre><code>import styles from "./styles";
  
  class LoginView extends Component {
    constructor(props) {
      super(props);
      this.state = {
        primaryColor: theme.PRIMARY_COLOR
      };
    }
    navigate = () =&gt; {
      this.props.navigation.navigate("Home");
    };
    onPressGreen = () =&gt; {
      theme.PRIMARY_COLOR = "green";
      this.setState({ primaryColor: theme.PRIMARY_COLOR });
      this.props.onPressGreenButton(theme.PRIMARY_COLOR);
    };
    onPressRed = () =&gt; {
      theme.PRIMARY_COLOR = "red";
      this.setState({ primaryColor: theme.PRIMARY_COLOR });
    };
    render() {
      return (
        &lt;View
          style={[styles.container, { backgroundColor: this.state.primaryColor }]}
        &gt;
          &lt;TouchableOpacity
            style={styles.greenButton}
            onPress={this.onPressGreen}
          &gt;
            &lt;Text&gt;Green&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
  
          &lt;TouchableOpacity style={styles.redButton} onPress={this.onPressRed}&gt;
            &lt;Text&gt;Red&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
  
          &lt;TouchableOpacity onPress={this.navigate}&gt;
            &lt;Text&gt;Home&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      onPressGreenButton: color =&gt; dispatch(loginActions.saveColor(color))
    };
  }
  
  export default connect(
    null,
    mapDispatchToProps
  )(LoginView);
  </code></pre>
  
  <blockquote>
    <p>HomeView.js</p>
  </blockquote>
  
  <pre><code>class HomeView extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;View style={[styles.container, { backgroundColor: this.props.color }]}&gt;
          &lt;Text&gt;Home&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      color: state.loginReducer.color //color saved in reducer
    };
  }
  
  export default connect(
    mapStateToProps,
    null
  )(HomeView);
  </code></pre>
  
  <p>In HomeView.js file instead of applying backgroundcolor in the way I did, how to include it inside styles.container. Is there any way to access function mapStateToProps inside styles.js I've imported. I've used redux to save the state permanently. </p>