react-native navigation menu bottom docked navigation menu

Question

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>);

Manoj Prabhakar · Accepted Answer · 2017-11-21 07:10:26Z

2

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'})}

answered Nov 21, 2017 at 7:10

Manoj Prabhakar

1,01610 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-native navigation menu bottom docked navigation menu

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related