CODEWITHSUNDEEP
react-nativereact-navigation
deluxan
deluxan

Reputation: 422

Check the render method of BottomNavigation - React Native

I am creating bottom navigation in react native project. It is working fine for the following coding.

App.js

import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { MaterialCommunityIcons } from 'react-native-vector-icons';
import { NavigationContainer } from '@react-navigation/native';

import Accounts from './src/components/Accounts';
// ...importing other screens here...

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      activeColor="#e91e63"
      labelStyle={{ fontSize: 12 }}
      style={{ backgroundColor: 'tomato' }}>
      <Tab.Screen name="Accounts" component={Accounts} />
      ...Other screens comes here...
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

But I need to add icons to the tabs. So I added the following props to theScreen

<Tab.Screen
  name="Accounts"
  component={Accounts}
  options={{
    tabBarLabel: 'Home',
    tabBarIcon: ({ color, size }) => (
      <MaterialCommunityIcons name="home" color={color} size={size} />
    ),
  }}
/>

After adding these props I am getting the following error

Invariant violation: Element type is invalid: expected string (for built-in components) or a class/function (for a 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

as per the documentation, I am doing everything correctly. The props is suggested from the React Navigation documentation. What is the wrong in my coding? I need icons in my tabs

Upvotes: 0

Views: 4064

Answers (5)

Bilal Ramzan
Bilal Ramzan

Reputation: 51

This issue is due to the versions conflict between @react-navigation packages you are using. This might be you are using a higher version or the lower version of package with respect to other @react-navigation packages. kindly check your versions. In my case the package versions was

"@react-navigation/bottom-tabs": "6.0.2", "@react-navigation/drawer": "5.12.5", "@react-navigation/native": "5.9.4", "@react-navigation/stack": "5.14.5",

I was using higher version for @react-navigation/bottom-tabs. Downgrading it to version

@react-navigation/bottom-tabs: ^5.x

solved my problem. Thanks to Lenny Laughter Answer.

Upvotes: 0

Turiano De Jesus Romero Guzman
Turiano De Jesus Romero Guzman

Reputation: 13

If you use npm:

rm -rf node_modules

rm package-lock.json

npm install

or yarn, use:

rm -rf node_modules

rm yarn.lock

yarn

Here's a link reactnavigation.org! :)

Upvotes: 0

Alex
Alex

Reputation: 216

I believe you must create the icons on the Tab.Navigator prop.

Here is an example utilizing a different icon package but should work the same: https://reactnavigation.org/docs/en/tab-based-navigation.html

// You can import Ionicons from @expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import { Ionicons } from '@expo/vector-icons';

// (...)

export default function App() {
  return (
    <NavigationContainer>
      <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';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Upvotes: 1

Dennis Persson
Dennis Persson

Reputation: 1104

If someone is experience this problem, please check what version of @react-navigation packages you are using. This error may occur if one of the packages uses a different major version than the others. If that the case, just downgrade or upgrade the mismatching package. Upgrading usually requires changes. Usually there are release notes for what have changes between upgrades. Here's upgrades notes for @react-navigation/material-bottom-tabs.

Upvotes: 1

Guru Prasad G
Guru Prasad G

Reputation: 61

This can be fixed by importing MaterialCommunityIcons like

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

Upvotes: 1

Related Questions