Add Bottom Tabs to a React Native App with React Navigation

For react-navigation v3, App.js should be

import React, { Component } from 'react';
import {
  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator
} from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome'

import RestaurantList from 'components/RestaurantList';
import RestaurantInfo from 'components/RestaurantInfo';
import About from 'components/About';

const List = createStackNavigator({
  Home: { screen: RestaurantList },
  Info: { screen: RestaurantInfo }
}, {
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: '#0066cc',
      color: '#fff'
    },
    headerTintColor: '#fff',
    headerTitleStyle: { color: '#fff' }
  }
});

const TabNavigator = createBottomTabNavigator({
  List: { screen: List },
  About: { screen: About }
}, {
  defaultNavigationOptions: ({ navigation }) => {
    return {
      tabBarIcon: ({ tintColor }) => {
        const route = navigation.state.routeName;
        console.log('route', route);
        const name = {
          'List': 'list',
          'About': 'info-circle'
        }[route]
        return <Icon name={name} color={tintColor} size={22} />
      },
      tabBarOptions: {
        activeBackgroundColor: '#E6F0FA'
      }
    }
  }
});

export default createAppContainer(TabNavigator);

Thanks とうせいきょう

Thanks とうせいきょう

The ** createBottomTabNavigator ** is moved to another package. Install it with yarn add react-navigation-tabs Then update the js file

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

Then if you are getting an error null of something then cd ios pod install And restart the project again