I am using React Navigation 6 createBottomTabNavigator and trying to provide Icon to tabBarIcon but the screen is coming up blank. and if I don't provide any icon then a box with a cross is coming Below is my code

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Home from '../screens/app/home';
import Login from '../screens/auth/login';
import {Icon} from 'react-native-elements';
import Ionicons from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarShowLabel: false,
        tabBarStyle: {backgroundColor: 'cyan'},
      }}>
      <Tab.Screen
        options={{
          tabBarIcon: ({color, size}) => {
            <Ionicons name="logo-bitcoin" />;
          },
        }}
        name="Home"
        component={Home}
      />
      <Tab.Screen
        options={{
          tabBarIcon: ({color, size}) => {
            <Icon
              type="font-awesome-5"
              name="coins"
              color={color}
              size={size}
            />;
          },
        }}
        name="Login"
        component={Login}
      />
      <Tab.Screen name="Login2" component={Login} />
    </Tab.Navigator>
  );
};

export default TabNavigator;

p.s. - I've tried including apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" in my android/app/build.gradle

CodePudding user response：

you miss RETURN in "tabBarIcon"

tabBarIcon: ({color, size}) => {
            return <Ionicons name="logo-bitcoin" />;
          },

or without return

tabBarIcon: ({color, size}) => <Ionicons name="logo-bitcoin" />