Native Base Footer Nav Tabs

Question

I am new to React Native and have created a footer with three button tabs. I am now wondering how to render different screens by clicking the buttons. My code:

export default class Uptown extends Component {
render() {
  return (
    <Container>
      <Header>
        <Title>Uptown</Title>
      </Header>

      <Content>
        <App />
      </Content>

            <Footer>
                <FooterTab>
                  <Button>
                    Contact
                  </Button>
                  <Button>
                    Here
                  </Button>
                  <Button>
                    Me
                  </Button>
                </FooterTab>
            </Footer>
        </Container>
  );
 }
}

How would I go about changing screens when the buttons are pressed?

Answer 1

You can add conditional rendering instead of static <App/> tag. You can use code as following to render conditionally based on selected footer. (I used state variable to store selected page index. When index changed, render function automatically called by engine)

import First from './Home' // your first screen
import Next from './Next' // your second screen

class Updown extends Component {
   constructor(props) {
      super(props)
      this.state = {index: 0} // default screen index
   }

   switchScreen(index) {
      this.setState({index: index})
   }

   render() {
      let AppComponent = null;

      if (this.state.index == 0) {
         AppComponent = First
      } else {
         AppComponent = Second
      }

      return (
         <Container>
           <Header><Title> Header... </Title></Header>
           <Content> <AppComponent/> </Content>
           <Footer>
               <Button onPress={() => this.switchScreen(0) }> First </Button>
               <Button onPress={() => this.switchScreen(1) }> Second </Button>
           </Footer>
         </Container>
       )
   }
}

Answer 2

I think as of native-base v2.3.1 (August 2017) the recommended way is to follow documentation on React Navigation / TabNavigator. Of course this is only if you actually intend to use TabNavigator (which I do) with the benefits of React Navigation (I'm not knowledgeable enough to say what those are).

But if you want the footer tabs to be part of the main navigation structure of your app, instead of an ad-hoc mechanism for one page, this seems to be the way to go.

import React, { Component } from "react";
import LucyChat from "./LucyChat.js";
import JadeChat from "./JadeChat.js";
import NineChat from "./NineChat.js";
import { TabNavigator } from "react-navigation";
import { Button, Text, Icon, Footer, FooterTab } from "native-base";
export default (MainScreenNavigator = TabNavigator(
  {
    LucyChat: { screen: LucyChat },
    JadeChat: { screen: JadeChat },
    NineChat: { screen: NineChat }
  },
  {
    tabBarPosition: "bottom",
    tabBarComponent: props => {
      return (
        <Footer>
          <FooterTab>
            <Button
              vertical
              active={props.navigationState.index === 0}
              onPress={() => props.navigation.navigate("LucyChat")}>
              <Icon name="bowtie" />
              <Text>Lucy</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 1}
              onPress={() => props.navigation.navigate("JadeChat")}>
              <Icon name="briefcase" />
              <Text>Nine</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 2}
              onPress={() => props.navigation.navigate("NineChat")}>
              <Icon name="headset" />
              <Text>Jade</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
));