Bottom Navigation TabBarIcon render method is wrong?-CodePudding

I tried to create bottom Navigation,
Following this link : https://reactnavigation.org/docs/tab-based-navigation/#customizing-the-appearance

and here is my code :

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "react-native-vector-icons";

// Screens
import Home from "./Home";
import Settings from "./Settings";

const Tab = createBottomTabNavigator();

function MainContainer({ navigation }) {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === "Home") {
            iconName = focused
              ? "ios-information-circle"
              : "ios-information-circle-outline";
          } else if (route.name === "Settings") {
            iconName = focused ? "ios-list-box" : "ios-list";
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: "tomato",
        tabBarInactiveTintColor: "gray",
      })}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
}

export default MainContainer;

But I got this error :

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TabBarIcon`.

I found out the mistake,
on the import Ionicons from "react-native-vector-icons"; it should have been import Ionicons from "react-native-vector-icons/Ionicons"

CodePudding user response：

Solutions:

You need wrap your <Tab.Navigator> into root navigation container

Example:

You need to first install dependency of @react-navigation/native

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const MainContainer = () => {
  return (
    <NavigationContainer>
      
      <Tab.Navigator />
      <Stack.Navigator />

      ...other your navigation

    </NavigationContainer>
  );
};

You can checkout react-navigaiton https://reactnavigation.org/docs/getting-started/

CodePudding user response：

Just wrape your <Tab.Navigator> in <NavigationContainer>

import React from "react";
import { NavigationContainer } from '@react-navigation/native'
//Reset Imports



const Routes = () => {
    return (
        <NavigationContainer>
          <Tab.Navigator>
          </Tab.Navigator>
        </NavigationContainer>
    )
}
export default Routes