Issue with NativeBase tab bar mixed with react navigation

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!

[theZulqarnain]

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

[akhil-ga]

@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