CODEWITHSUNDEEP
react-native
bwanamaina
bwanamaina

Reputation: 309

react-native navigation menu bottom docked navigation menu

Am learning react-native, trying to create a menu docked at the bottom of a screen. Is there a way i can display the screen content in the ScrollView docked at the top of navigation menu like this messenger menu ? When messages image is tapped, display messages screen content in the same page.

         return (<View style={styles.container}>
          <ScrollView>
            <Text style={styles.content}>
              {this.state.content}</Text>
          </ScrollView>
          <View style={styles.footer}>
            <TouchableOpacity onPress={this.navigateMessage}>
              <Image source={require('../img/messages.png')} style={[
                  styles.tabIcon, {
                    tintColor: this.state.messagesTint
                  }
                ]}/>
            </TouchableOpacity>
            <TouchableOpacity onPress={this.navigateContacts}>
              <Image source={require('../img/contacts.png')} style={[
                  styles.tabIcon, {
                    tintColor: this.state.contactsTint
                  }
                ]}/>
            </TouchableOpacity>
          </View>
        </View>);

Upvotes: 2

Views: 167

Answers (1)

Manoj Prabhakar
Manoj Prabhakar

Reputation: 1016

React Native re-renders the content when the state changes/you call setState().

You can follow this.

state = {
    selectedTab: 'msg'
}
renderMessages(){
    return <YourMessageView />
}
render(){
    switch(this.state.selectedTab){
        case 'msg':
            this.renderMessages();
            break;
        case 'contact':
            this.renderContact();
            break;
        default:
            this.renderDefault();

    } 
    return(
      <YourFooter />
    );


}

and on your TouchableOpacity onPress:

onPress={() => this.setState({ selectedTab: 'msg'})}

Upvotes: 2

Related Questions