How do I change the theme of whole app in React-native?

Question

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.

LoginView.js

import styles from "./styles";

class LoginView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      primaryColor: theme.PRIMARY_COLOR
    };
  }
  navigate = () => {
    this.props.navigation.navigate("Home");
  };
  onPressGreen = () => {
    theme.PRIMARY_COLOR = "green";
    this.setState({ primaryColor: theme.PRIMARY_COLOR });
    this.props.onPressGreenButton(theme.PRIMARY_COLOR);
  };
  onPressRed = () => {
    theme.PRIMARY_COLOR = "red";
    this.setState({ primaryColor: theme.PRIMARY_COLOR });
  };
  render() {
    return (
      <View
        style={[styles.container, { backgroundColor: this.state.primaryColor }]}
      >
        <TouchableOpacity
          style={styles.greenButton}
          onPress={this.onPressGreen}
        >
          <Text>Green</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.redButton} onPress={this.onPressRed}>
          <Text>Red</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={this.navigate}>
          <Text>Home</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return {
    onPressGreenButton: color => dispatch(loginActions.saveColor(color))
  };
}

export default connect(
  null,
  mapDispatchToProps
)(LoginView);

HomeView.js

class HomeView extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={[styles.container, { backgroundColor: this.props.color }]}>
        <Text>Home</Text>
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    color: state.loginReducer.color //color saved in reducer
  };
}

export default connect(
  mapStateToProps,
  null
)(HomeView);

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.

Answer 1

you can use redux outside of react component like styles.js by store.getState() API in redux but I think the best way to handle this is to create a wrapper component and apply them to it then use it everywhere you want

class MasterView extends Component {
  render() {
    return (
      <View style={[styles.container, { backgroundColor: this.props.color }]}>
         {this.props.children}
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    color: state.loginReducer.color //color saved in reducer
  };
}

export default connect(
  mapStateToProps,
  null
)(MasterScreen);

then on each screen, you want you can use it for example

class HomeView extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <MasterView>
          <Text>Home</Text>
      </MasterView>
    );
  }
}

another way is in styles.js

import store from '../store'

const containerColor=store.getState().loginReducer.color

const styles = StyleSheet.create({
  container: {
    backgroundColor:containerColor
  },
}

export default styles