Nativebase: Issue with NativeBase tab bar mixed with react navigation

Created on 11 Mar 2018 · 11Comments · Source: GeekyAnts/NativeBase

29026121_1805530686148614_5213406963752239104_o
29063440_1805530846148598_6242474745552437248_o

We are getting these 2 issues when mix NativeBase tab bar and react navigation.
Here is the code:

const MainTabBar = TabNavigator(
  {

   Saved: {screen: SavedScreen},
   Chat: {screen: ChatScreen},
    Profile: {screen: ProfileScreen},

  },

 {    
    tabBarPosition: 'bottom',
    swipeEnabled: false,
     tabBarComponent: props => {
      return (
        <Footer>
          <FooterTab>
            <Button
              vertical
              active={props.navigationState.index === 0}
              onPress={() => props.navigation.navigate("Saved")}>
              <Icon name="bowtie" />
              <Text>Lucy</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 1}
              onPress={() => props.navigation.navigate("Profile")}>
              <Icon name="briefcase" />
              <Text>Nine</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 2}
              onPress={() => props.navigation.navigate("Chat")}>
              <Icon name="headset" />
              <Text>Jade</Text>
            </Button>
          </FooterTab>
        </Footer>
       );
    }
  }
);

const Main = StackNavigator(
  {
   Signin: {screen: SigninScreen},
    Signup1: {screen: SignupScreen1},
     Welcome: {screen: WelcomeScreen},
     Settings: {screen: SettingsScreen},
    MainTab: {screen: MainTabBar}
  },
  {
    initialRouteName: "Signin",
    headerMode: "none",
  },
);

P.S you may noticed we used the code from your tutorial :)
How these issues can be fixed? What is wrong in this code?
Thanks in advance!

awaiting response

Source

ArtyomBaykov

Most helpful comment

if want to implement with react-navigation 3.0 with native-base 2.13 then below code will work.

 import { createBottomTabNavigator,createStackNavigator,createAppContainer } from 'react-navigation';
  import React from 'react';
  import { Button, Text, Icon, Footer, FooterTab } from 'native-base';

  import Home from './containers/Home';
  import CreateCase from './containers/CreateCase';
  import Profile from './containers/Profile';
  import Performance from './containers/Performance';

  const MainNavigator = createStackNavigator(
    {
        Home : {
            screen: Home,
            navigationOptions: {
              header: null,
            }
          },
      Create:  {
        screen: CreateCase,
        navigationOptions: {
          title: "Generate Case",
        }
      },
    },
    {
      initialRouteName: "Home"
    }
  );

  const Main = createBottomTabNavigator({
      Home: { screen: MainNavigator },
      Profile: { screen: Profile },
      Performance: {screen: Performance}
    },
    {
      tabBarComponent: props => {
        return (
          <Footer>
            <FooterTab>
              <Button
                vertical
                onPress={() => props.navigation.navigate('Home')}
              >
                <Icon name="bowtie" />
                <Text>Lucy</Text>
              </Button>
              <Button
                vertical
                onPress={() => props.navigation.navigate('Profile')}
              >
                <Icon name="briefcase" />
                <Text>Nine</Text>
              </Button>
              <Button
                vertical
              >
                <Icon name="headset" />
                <Text>Jade</Text>
              </Button>
            </FooterTab>
          </Footer>
        );
      }
    }
  );

  export default createAppContainer(Main);

theZulqarnain on 2 Aug 2019

👍3

All 11 comments

@ArtyomBaykov tried a similar code. It was working fine with react-navigation

Code

import React from 'react';
import { Text, View } from 'react-native';
import { TabNavigator } from 'react-navigation';
import { Footer, FooterTab, Button, Icon, Text as NBText } from 'native-base'

class Lucy extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Lucy</Text>
            </View>
        );
    }
}

class Nine extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Nine</Text>
            </View>
        );
    }
}

class Jade extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Jade</Text>
            </View>
        );
    }
}

export default TabNavigator({
    Lucy: { screen: Lucy },
    Nine: { screen: Nine },
    Jade: { screen: Jade }
},
    {
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        tabBarComponent: props => {
            return (
                <Footer>
                    <FooterTab>
                        <Button
                            vertical
                            active={props.navigationState.index === 0}
                            onPress={() => props.navigation.navigate("Lucy")}>
                            <Icon name="bowtie" />
                            <NBText>Lucy</NBText>
                        </Button>
                        <Button
                            vertical
                            active={props.navigationState.index === 1}
                            onPress={() => props.navigation.navigate("Nine")}>
                            <Icon name="briefcase" />
                            <NBText>Nine</NBText>
                        </Button>
                        <Button
                            vertical
                            active={props.navigationState.index === 2}
                            onPress={() => props.navigation.navigate("Jade")}>
                            <Icon name="headset" />
                            <Text>Jade</Text>
                        </Button>
                    </FooterTab>
                </Footer>
            );
        }
    });

Gif

footertab

akhil-geekyants on 12 Mar 2018

👍3

@akhil-geekyants the point is that we are trying to use it with stack navigator as you see in our code and get the mentioned issues .

ArtyomBaykov on 12 Mar 2018

@ArtyomBaykov tried with StackNavigator.It is working fine(except for the warning in 0.54.0).

Posting the code

import React from 'react';
import { Text, View } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import { Footer, FooterTab, Button, Icon, Text as NBText } from 'native-base'

class Home extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Home</Text>
                <Text style={{ marginTop: 20 }} onPress={() => this.props.navigation.navigate('Tabs')}>Go to Tabs</Text>
            </View>
        );
    }
}

class Lucy extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Lucy</Text>
            </View>
        );
    }
}

class Nine extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Nine</Text>
            </View>
        );
    }
}

class Jade extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Jade</Text>
            </View>
        );
    }
}

const tabs = TabNavigator({
    Lucy: { screen: Lucy },
    Nine: { screen: Nine },
    Jade: { screen: Jade }
},
    {
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        tabBarComponent: props => {
            return (
                <Footer>
                    <FooterTab>
                        <Button
                            vertical
                            active={props.navigationState.index === 0}
                            onPress={() => props.navigation.navigate("Lucy")}>
                            <Icon name="bowtie" />
                            <NBText>Lucy</NBText>
                        </Button>
                        <Button
                            vertical
                            active={props.navigationState.index === 1}
                            onPress={() => props.navigation.navigate("Nine")}>
                            <Icon name="briefcase" />
                            <NBText>Nine</NBText>
                        </Button>
                        <Button
                            vertical
                            active={props.navigationState.index === 2}
                            onPress={() => props.navigation.navigate("Jade")}>
                            <Icon name="headset" />
                            <Text>Jade</Text>
                        </Button>
                    </FooterTab>
                </Footer>
            );
        }
    });

export default main = StackNavigator({
    Home: { screen: Home },
    Tabs: { screen: tabs }
}, {
        initialRouteName: "Home",

    })

Gif

tabs

akhil-geekyants on 12 Mar 2018

👍2

@akhil-geekyants thanks a lot for your help. Does it mean that yellow message is the bug of react-navigation? Also can you tell me please how can I change style for active tab in this part?

 tabBarComponent: props => {
            return (
                <Footer>
                    <FooterTab>
                        <Button
                            vertical
                            active={props.navigationState.index === 0}
                            onPress={() => props.navigation.navigate("Lucy")}>
                            <Icon name="bowtie" />
                            <NBText>Lucy</NBText>
                        </Button>
                        <Button
                            vertical
                            active={props.navigationState.index === 1}
                            onPress={() => props.navigation.navigate("Nine")}>
                            <Icon name="briefcase" />
                            <NBText>Nine</NBText>
                        </Button>
                        <Button
                            vertical
                            active={props.navigationState.index === 2}
                            onPress={() => props.navigation.navigate("Jade")}>
                            <Icon name="headset" />
                            <Text>Jade</Text>
                        </Button>
                    </FooterTab>
                </Footer>
            );
        }

ArtyomBaykov on 13 Mar 2018

@ArtyomBaykov Check Docs to customize components

SupriyaKalghatgi on 13 Mar 2018

@ArtyomBaykov

According to the docs here it says,

If you want to customize the tabBarComponent:

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

const TabBarComponent = (props) => (<BottomTabBar {...props} />);

const TabScreens = createBottomTabNavigator(
  {
    tabBarComponent: props =>
      <TabBarComponent
        {...props}
        style={{ borderTopColor: '#605F60' }}
      />,
  },
);

From the example replace TabNavigator with createBottomTabNavigator from 'react-navigation-tabs'; not from react-navigation

ianemv on 5 Aug 2018

if want to implement with react-navigation 3.0 with native-base 2.13 then below code will work.

 import { createBottomTabNavigator,createStackNavigator,createAppContainer } from 'react-navigation';
  import React from 'react';
  import { Button, Text, Icon, Footer, FooterTab } from 'native-base';

  import Home from './containers/Home';
  import CreateCase from './containers/CreateCase';
  import Profile from './containers/Profile';
  import Performance from './containers/Performance';

  const MainNavigator = createStackNavigator(
    {
        Home : {
            screen: Home,
            navigationOptions: {
              header: null,
            }
          },
      Create:  {
        screen: CreateCase,
        navigationOptions: {
          title: "Generate Case",
        }
      },
    },
    {
      initialRouteName: "Home"
    }
  );

  const Main = createBottomTabNavigator({
      Home: { screen: MainNavigator },
      Profile: { screen: Profile },
      Performance: {screen: Performance}
    },
    {
      tabBarComponent: props => {
        return (
          <Footer>
            <FooterTab>
              <Button
                vertical
                onPress={() => props.navigation.navigate('Home')}
              >
                <Icon name="bowtie" />
                <Text>Lucy</Text>
              </Button>
              <Button
                vertical
                onPress={() => props.navigation.navigate('Profile')}
              >
                <Icon name="briefcase" />
                <Text>Nine</Text>
              </Button>
              <Button
                vertical
              >
                <Icon name="headset" />
                <Text>Jade</Text>
              </Button>
            </FooterTab>
          </Footer>
        );
      }
    }
  );

  export default createAppContainer(Main);

theZulqarnain on 2 Aug 2019

👍3

How do I use StyleProvider if I am using <Footer> component as a custom component with createBottomTabNavigator? this doesn't seem to work

<StyleProvider style={getTheme(platform)}>
        <Footer>
             <FooterTab>
            ....
            ....
            </FooterTab>
        </Footer>
</StyleProvider>

annjawn on 17 Jan 2020

I have a gist for React Navigation 5.x working BottomTabNavigator with Nativebase's FooterTab

https://gist.github.com/wobsoriano/7f2d490acadbf33c7874b7e2fb82773a

wobsoriano on 16 Feb 2020

I have a gist for React Navigation 5.x working BottomTabNavigator with Nativebase's FooterTab

https://gist.github.com/sorxrob/7f2d490acadbf33c7874b7e2fb82773a

Your gist is sadly not working anymore

Manu206 on 6 Dec 2020

I have a gist for React Navigation 5.x working BottomTabNavigator with Nativebase's FooterTab
https://gist.github.com/sorxrob/7f2d490acadbf33c7874b7e2fb82773a

Your gist is sadly not working anymore

Updated

wobsoriano on 6 Dec 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings