Dfyjkt

I'm not sure if the title was enough to express my question here's what I'm want to ask.

Currently I already create 2 buttons and a view just like this image(2 buttons 1 view):

What I want to do is, when I click the Upcoming button, in the view it will show some text(*Let say show "123"). So do History button, when I click History button, it will show some text(*Let put "qwe" in this text) in that view.

This is my code:

class Booking extends Component 
 static navigationOptions = ( navigation ) => 
 return 
 title: 'Booking',
 headerTintColor: 'white',
 headerBackTitle: 'Back',
 headerStyle: backgroundColor: 'black' ,
 headerRight: (
 <Button
 onPress=() => 
 navigation.navigate('Bnew');
 
 title='New'
 color='white'
 backgroundColor='black'
 />
 ),
 ;
 ;

 render() 
 return (
 <View style=styles.container>
 <View style=styles.boohis>
 <Button
 onPress=() => 
 Alert.alert("", "Upcoming is Coming Soon!");
 
 title='Upcoming'
 color='white'
 backgroundColor='black'
 style= width: 185, margin: 1 
 />
 <Button
 onPress=() => 
 Alert.alert("", "History is Coming Soon!");
 
 title='History'
 color='white'
 backgroundColor='black'
 style= width: 185, margin: 1 
 />
 </View>

 <View style=styles.container2>

 </View>
 </View>
 )
 


export default Booking;

const styles = StyleSheet.create(
 container: 
 flex: 1,
 ,
 scrollViewContainer: 
 flexGrow: 1,
 ,
 boohis: 
 flexDirection: 'row',
 justifyContent: 'space-around'
 ,
 container2: 
 flexGrow: 1,
 backgroundColor: 'white',
 alignItems: 'center',
 justifyContent: 'space-between',
 borderColor: 'black',
 borderWidth: 2,
 margin: 1
 ,
)

How can I achieve that part by using 1 view used by 2 buttons?

There are two ways to do it.

1. 
   

   Using state

   
   
   

   class Booking extends Component 
    constructor(props) 
    super(props);
    this.state = 
    selectedIndex: 0,
    ;
    
   
    render() 
    return (
    <View style=styles.container>
    <View style=styles.boohis>
    <Button
    onPress=() => 
    this.setState(selectedIndex: 0);
    
    title='Upcoming'
    color='white'
    backgroundColor='black'
    style= width: 185, margin: 1 
    />
    <Button
    onPress=() => 
    this.setState(selectedIndex: 1);
    
    title='History'
    color='white'
    backgroundColor='black'
    style= width: 185, margin: 1 
    />
    </View>
    this.state.selectedIndex === 0 ? 
    <View style=styles.container2>
    <Text>Page 1</Text>
    </View> : <View style=styles.container2>
    <Text>Page 2</Text>
    </View>
    
    </View>
    )
    
    
   }
   export default Booking;
   

   
   



2. Using createMaterialTopTabNavigator