[Solved] React Native : how to change view on onPress event
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>
);
},
});
Solution #1:
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>
);
},
});
Solution #2:
Would suggest you look into the package react-native-router-flux.
On github @ https://github.com/aksonov/react-native-router-flux
Powerful way to lay out multiple views in a project.
For example the render of my app is below. It supports multiple views (described as scenes) by react-native-router-flux. The component property is simply your class derived from React.Component.
import {Scene, Router, TabBar, Modal, Schema, Actions, Reducer} from 'react-native-router-flux'
render() {
return <Router createReducer={reducerCreate} sceneStyle={{backgroundColor:'#F7F7F7'}}>
<Scene key="modal" component={Modal} >
<Scene key="root" hideNavBar={true}>
{/*<Scene key="register" component={Register} title="Register"/>
<Scene key="register2" component={Register} title="Register2" duration={1}/>
<Scene key="home" component={Home} title="Replace" type="replace"/>*/}
<Scene key="launch" initial={true}>
<Scene key="launch1" component={Launch} hideNavBar={true} style={{flex:1, backgroundColor:'transparent'}}/>
<Scene key="privacy" type="push" component={DisplayTextFile} title="Privacy"
textFile={DisplayTextFile.PRIVACY} style={{flex:1, backgroundColor:'transparent'}}/>
<Scene key="terms" type="push" component={DisplayTextFile} title="Terms Of Service"
textFile={DisplayTextFile.TERMS} style={{flex:1, backgroundColor:'transparent'}}/>
<Scene key="login" type="push" hideNavBar={true} component={Login} style={{flex:1, backgroundColor:'transparent'}}/>
<Scene key="forgotPassword" type="push" hideNavBar={true} component={ForgotPassword} style={{flex:1, backgroundColor:'transparent'}}/>
<Scene key="pleaseWait" component={WaitWindow}/>
</Scene>
<Scene key="pleaseWait" component={WaitWindow} panHandlers={null} />
<Scene key="tabbar" tabs={true} default="feed" panHandlers={null} >
<Scene key="feed" component={FeedScreen} mainfeed={true} title="Feed" hideNavBar={true} icon={TabIcon}/>
<Scene key="discover" component={Discover} title="Discover" icon={TabIcon}/>
<Scene key="messages" component={Messages} title="Messages" hideNavBar={true} icon={TabIcon}/>
<Scene key="dashboard" component={Dashboard} title="Profile" hideNavBar={true} icon={TabIcon}/>
{/*<Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
<Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon} />*/}
</Scene>
</Scene>
<Scene key="waitWindow" component={WaitWindow} panHandlers={null} />
</Scene>
</Router>;
}