React-Native 2 button using the same view

Question

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?

Answer 1

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