React Native : how to change view on onPress event

Mohammad Siavashi Published at Dev

Mohammad Siavashi

i have a button on my first rendered View ( the default View ) , i want to change the View when the user press that button .

i know how to use the onPress event but i dont know how should i change the whole View ? im creating another react.createClass which has the new render and other stuffs in it but i dont know how should i use it for the View to be Changed .

here is my first View ( the Main one ) ( by the way the application name is sess ):

var sess = React.createClass({
  render(){
    return(

      <View>
        <Button> change view </Button>  //onPress is gonna be here
      </View>
    );
  },
});

and i want the View to be changed to this :

var newView = React.createClass({
  render(){
    return(

      <View>
        <Text> the View is now changed </Text>
      </View>
    );
  },
});

Nader Dabit

You can do it like this:

var sess = React.createClass({

  getInitialState(){
    return {
      viewOne: true
    }
  },

  changeView(){
     this.setState({
       viewOne: !this.state.viewOne
     })
  },

  render(){
    if(!this.state.viewOne) return <newView changeView={ () => this.changeView() } />
    return(
      <View>
        <Button onPress={ () => this.changeView() }> change view </Button>
      </View>
    )
  }
})

var newView = React.createClass({
  render(){
    return(
      <View>
        <Text onPress={this.props.changeView}> the View is now changed </Text>
      </View>
    );
  },
});

Collected from the Internet

Please contact [email protected] to delete if infringement.