React Navigation + Native Base => props.navigation.navigate is not a function - reactjs

Question

I'm trying to style my TabNavigator using Native Base, but I always get "props.navigation.navigate is not a function" and I have no idea why.
This is my TabNavigator:
import { createBottomTabNavigator } from 'react-navigation';
import React from 'react';
import { Button, Text, Icon, Footer, FooterTab } from 'native-base';
import CameraRouter from './CameraRouter';
import Feed from '../components/Feed';
const MainRouter = createBottomTabNavigator(
{
Feed: {
screen: Feed,
},
Camera: {
screen: CameraRouter,
navigationOptions: {
tabBarVisible: false,
},
},
},
{
tabBarComponent: props => {
return (
<Footer>
<FooterTab>
<Button
vertical
onPress={() => props.navigation.navigate('Feed')}
>
<Icon name="bowtie" />
<Text>Lucy</Text>
</Button>
<Button
vertical
onPress={() => props.navigation.navigate('CameraRouter')}
>
<Icon name="briefcase" />
<Text>Nine</Text>
</Button>
<Button
vertical
>
<Icon name="headset" />
<Text>Jade</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
);
export default MainRouter;
Which I call here:
import React, { Component } from 'react';
import { YellowBox } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import MainRouter from './config/MainRouter';
import reducers from './reducers';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
class App extends Component {
render() {
const store = createStore(reducers);
return (
<Provider store={store}>
<MainRouter />
</Provider>
);
}
}
export default App;
What is wrong with my code? I used this guide to get an idea of the usage:
http://docs.nativebase.io/docs/examples/navigation/StackNavigationExample.html
Thank you guys!

Answer 1

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

Answer 2

https://reactnavigation.org/docs/en/navigation-prop.html
This doc mentions that navigation props is not available to every component by default only the screen components have it.
if you wish to access this prop in other components then you either pass this prop to the component where it is needed or you use what is called 'withNavigation'

Answer 3

I think the props aren't being passed through from your App component, could you try this?
class App extends Component {
render() {
const store = createStore(reducers);
return (
<Provider store={store}>
<MainRouter {...props}/>
</Provider>
);
}
}
export default App;

Answer 4

I found the solution to my problem: I had to add a root StackNavigator