CODEWITHSUNDEEP
reactjsreact-nativereact-navigationnative-base
Alexander Valtingojer
Alexander Valtingojer

Reputation: 485

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

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!

Upvotes: 2

Views: 5029

Answers (4)

zulqarnain
zulqarnain

Reputation: 1626

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

Upvotes: 1

Alexander Valtingojer
Alexander Valtingojer

Reputation: 485

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

Upvotes: 0

dentemm
dentemm

Reputation: 6379

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;

Upvotes: 0

Suhail Jain
Suhail Jain

Reputation: 146

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'

Upvotes: 0

Related Questions