Search code examples
react-nativeexpo-router

tabBarIcon Not Rendering Warning: React.jsx: type is invalid

I am getting the above error when trying to render tabBarIcon in my _layout.js file for my Tabs.

Code:

import { Tabs } from "expo-router";
import { Feather } from "@expo/vector-icons/Feather";

const TabsLayout = () => {
  return (
    <Tabs screenOptions={{ headerShown: true }}>
      <Tabs.Screen
        name="Home"
        options={{
          title: "Home",
          tabBarIcon: ({ focused, color, size }) => {
            <Feather name="home" color={color} size={size} />;
          },
        }}
      />
      <Tabs.Screen
        name="Favourite"
        options={{
          title: "Favourites",
          tabBarIcon: ({ color, size }) => {
            <Feather name="heart" color={color} size={size} />;
          },
        }}
      />
      <Tabs.Screen
        name="Message"
        options={{
          title: "Messages",
          tabBarIcon: ({ color, size }) => {
            <Feather name="message-square" color={color} size={size} />;
          },
        }}
      />
      <Tabs.Screen
        name="Account"
        options={{
          title: "Account",
          tabBarIcon: ({ color, size }) => {
            <Feather name="user" color={color} size={size} />;
          },
        }}
      />
    </Tabs>
  );
};

export default TabsLayout;

Full Error:

Warning: React.jsx: 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.

EDIT:

Have changed my import to:

import { Feather } from "@expo/vector-icons/Feather";

Have changed my tabBarIcon function to:

tabBarIcon: ({ color, size }) => (
            <Feather name="heart" color={color} size={size} />
          ),

Latest Error:

enter image description here

Solution

  • Seems like you forget to return something in your tabBarIcon props. If you use curly brackets, you need to use return() to tell components what you output. Or simply just use brackets().

    Replace

    tabBarIcon: ({ color, size }) => {<Feather name="heart" color={color} size={size} />;},

    by

    tabBarIcon: ({ color, size }) => (<Feather name="heart" color={color} size={size} />),

    Edit

    Mark sure your import format is correct for default import or named import. Please edit your Feather icon import.

    //Default import
import Feather from "@expo/vector-icons/Feather";

    or

    //Named import
import { Feather } from "@expo/vector-icons";

    After you editted the import, there maybe cache issue for the simulator, see here to clear cache. https://github.com/expo/expo/issues/8368.