i m new to react-native
i have two buttons A and B .... and two Views V1 and V2....by default V1 is visible and V2 is hidden .
How to achieve
On button B click- make V2 visible and hide V1
On button A click- make V1 visible and hide V2
2 Answers
define your state:
state = {v1Visible: true, v2Visible: false }
in jsx:
{this.state.v1Visible && <View><Text>View 1</Text></View>}
{this.state.v2Visible && <View><Text>View 2</Text></View>}
and your button click functions:
onButtonAClick = () => this.setState({v1Visible: true, v2Visible: false})
onButtonBClick = () => this.setState({v1Visible: false, v2Visible: true})
Comments
You can easily do this with the state
Create a render function for the specific views and render them conditionally with an if/else block
renderViews() {
if (this.state.viewVisible) {
return <View1></View1>
} else {
return <View2></View2>
}
}
Place the method inside your render function like this {this.renderViews()} and toggle the state via the buttons and this.setState({viewVisible: true/false})
