Implementing Footer Tabs in Native React using Native Base

Question

I am creating a native react application using native base for the UI (http://nativebase.io/docs/v2.0.0/components#footerTab). I am using the footerTabs component and my code is as follows

render() {
    return (

 <Container>
    <Header backgroundColor="#ECEFF1">
      <Button transparent>
            <Icon name='ios-menu' style={{color: 'black'}}/>
      </Button>
      <Title style={{color:'black'}}>Header</Title>
  </Header>

    <Content>
        <Profile/>
    </Content>

    <Footer backgroundColor="#212121">
      <FooterTab>
        <Button backgroundColor="#000" >
           <Icon name="ios-person" size={30} color="#900"/>
           <Text>Profile</Text>
        </Button>

         <Button>
              <Icon name="ios-search"/>
              <Text>Search</Text>
          </Button>

        <Button>
            <Icon name="ios-camera"/>
            <Text>Camera</Text>
        </Button>

        <Button>
             <Icon name="ios-apps"/>
             <Text>Apps</Text>
        </Button>

        <Button>
            <Icon active name="ios-navigate"/>
            <Text>Navigate</Text>
        </Button>

    </FooterTab>
    </Footer>
  </Container>
);
}

I have created different JS files for different functionalities such as Profiles,Search,Apps ect.. and have imported them as follows.

import Profile from './Profile';

How do I implement the onPress functionality on the buttons of the footer to change the component in the content tag depending on what was selected?

 <Content>
    <Profile/>
</Content>

For eg: If I pressed the search button I want the profile tag to be replaced with and similarly the same for the other buttons.

score 2 · Answer 1 · answered Feb 07 '17 at 18:05

Here FooterTab from native base is not persist actual tab functionality like UITabBar in iOS, its only persist for design. What you need to do is, keep footer tag in all of your component with all four buttons and keep active accordingly. For changing view by selecting any button you need to replace current view by selected one using navigator like:

<Button onPress={()=> { this.props.navigator.replace({id:'component name'}) }}>

and in your navigator component you should define all required components in renderScene method on the basis of id value in route payload. If you want actual functionality as TabBar work then you can use this third party module react-native-tab-navigator. Thanks!

score 1 · Answer 2 · answered Feb 07 '17 at 19:47

Instead of replacing the content, why don't you have each Button navigate to a new page?

Let's say you're on the Profile tab. You could do something like this:

import FooterWrapper from './FooterWrapper'

<Footer>
  <FooterWrapper tab='profile' navigator={this.props.navigator} />
</Footer>

And then in your FooterWrapper (I just handled a case of two tabs):

constructor(props) {
  super(props)
  this.state = {
    profileTab: this.props.tab === 'profile',
    searchTab: this.props.tab === 'search',
  }
} 

navToProfilePage() {
  this.props.navigator.push({
    id: 'profile',
    tab: 'profile',
  })
}

navToSearchPage() {
  this.props.navigator.push({
    id: 'search',
    tab: 'search',
  })
}

render() {
  return (
    <FooterTab>
      <Button active={this.state.profileTab} onPress={() => this.navToProfilePage()}>
          Profile
          <Icon name='ios-person' size={30} color='#900' />
      </Button> 
      <Button active={this.state.searchTab} onPress={() => this.navToSearchPage()}>
          Search
          <Icon name='ios-search' />
      </Button>
    </FooterTab>
  )
}

score 0 · Answer 3 · answered Feb 08 '17 at 08:56

Ok so here is I how got it I used the renderContent method within the content tags to generate views depending on the state change when the button was clicked.

 <Content>
        {this._renderContent(this.state.selectedTab)}        
 </Content>

The selectedTab is a state variable whose state is set using this.setState in the onPress method. The renderContent has an if function that checks the selected tab and returns the appropriate view. I also tried the navigation approach but this seemed cleaner.

 _renderContent = (Tab: string,) => {
    if(this.state.selectedTab==="Profile"){
    return (
      <Profile/>
    );
    }
    else if(this.state.selectedTab==="Search"){

    }
}

Implementing Footer Tabs in Native React using Native Base

3 Answers3

Linked