React native re-layout

How can i rebuild a layout of my react-native app? I need it when changed orientation. Detecting orientationchange with react-native-orientation plugin works well, but all layout in render() function does not changed. For example this not working. When i am using orientationchange function, alert works, but this.setState({bgColor: 'green'}); does nothing.

state = {
    bgColor: 'green',
    orientation: 'PORTRAIT',
};

componentWillMount() {
    if (this.state.orientation === 'LANDSCAPE') {
        if (Device.width > 768) {
            this.setState({bgColor: 'red'});
        }
    }
    else{
        this.setState({bgColor: 'green'});
    }
}

render() {
    return (
        <View style={[styles.appWrap, { backgroundColor: this.state.bgColor}]}></View>
    )}

Most probably your handle orientation method is not bind to context. So you need to use this._orientationDidChange.bind(this) in your code. Try this out.

   componentDidMount() {
        Orientation.addOrientationListener(this._orientationDidChange.bind(this));
      }

    _orientationDidChange = (orientation) => {
        if (orientation === 'LANDSCAPE') {
          this.setState({ bgColor : 'green'});
        } else {
          this.setState({ bgColor : 'red'});
        }
      }

    render() {
        return (
            <View style={[styles.appWrap, { backgroundColor: this.state.bgColor}]}></View>
        )}

Comments

Popular posts from this blog

Meaning of `{}` for return expression

Get current scroll position of ScrollView in React Native

React Native - Image Cache