CODEWITHSUNDEEP
react-nativenavigation
red_student
red_student

Reputation: 316

Native Base Footer Nav Tabs

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?

Upvotes: 7

Views: 16593

Answers (4)

Yasin Ugurlu
Yasin Ugurlu

Reputation: 701

I think that we can check some part of the @Hossein Mobasher code 

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/> // you can write like this
           </Content>
           <Footer>
               <Button onPress={() => this.switchScreen(0) }> First </Button>
               <Button onPress={() => this.switchScreen(1) }> Second </Button>
           </Footer>
         </Container>
       )
   }
}

Upvotes: 1

Hendy Irawan
Hendy Irawan

Reputation: 21384

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

Upvotes: 5

Hossein Mobasher
Hossein Mobasher

Reputation: 4472

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

Upvotes: 9

fandro
fandro

Reputation: 4903

You need to create a current index and bind the function to switch from a tab to another. To do it use this : 

import First from './First' 
import Second from './Second' 

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

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

   render() {
      let AppComponent = null;
//Here you can add as many tabs you need
      if (this.state.currentIndex == 0) {
         AppComponent = First
      } else {
         AppComponent = Second
      }

      return (
         <Container>
           <Header><Title> Header... </Title></Header>
           <Content> 
           {AppComponent}  // Load the component like this
          </Content>
           <Footer>
//HERE don't forget the bind function and pass the appropriate number
               <Button onPress={() => this.switchScreen.bind(this,0) }> First </Button>
               <Button onPress={() => this.switchScreen.bind(this,1) }> Second </Button>
           </Footer>
         </Container>
       )
   }
}

Hope it helps :)

Upvotes: 1

Related Questions