issue with tabBarIcon in react navigation v5 - reactjs

Question

I want to set an icon for tab navigation but it returns an error
This is my code:
<Tab.Screen name="Home" component={Home} options={{tabBarIcon:'home'}} />
This is the error i get:
How can i fix this?

Answer 1

You must set showIcon property to true in tabBarOptions like this:
<Tab.Navigator tabBarOptions={{ showIcon: true }}>
and then you can set the icon for your screen like this:
<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon:(tabInfo) => (<MaterialIcons name="home" size={18} color={tabInfo.tintColor} />)}}/>
full code example:
import React from "react";
import { createMaterialTopTabNavigator } from "#react-navigation/material-top-tabs";
import HomeScreen from "../screens/HomeScreen";
import { MaterialIcons } from "#expo/vector-icons";
const Tab = createMaterialTopTabNavigator();
const MyTabs = (props) => {
return (
<Tab.Navigator
tabBarOptions={{ showIcon: true, showLabel: false }}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: (tabInfo) => (
<MaterialIcons name="home" size={18} color={tabInfo.tintColor} />
),
}}
/>
</Tab.Navigator>
);
};
export default MyTabs;

Answer 2

Just as one of the solutions given above, we can create a TabBarIcon component and gave it the props of name and focused.
import React from "react"
import { Ionicons } from "#expo/vector-icons"
export default function TabBarIcon({ name, focused }) {
return (
<Ionicons
name={name}
size={25}
color={focused ? "tomato" : "black"}
style={{ marginBottom: -10 }}
/>
)
}
Then import it in the App.js file and on the tabBarIcon option, return the TabBarIcon component
import { StatusBar } from "expo-status-bar"
import React from "react"
import { NavigationContainer } from "#react-navigation/native"
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs"
import { StyleSheet } from "react-native"
import HomeScreen from "./app/screens/HomeScreen"
import TabBarIcon from "./app/components/TabBarIcon"
const Tab = createBottomTabNavigator()
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
showIcon: true,
activeTintColor: "tomato",
inactiveTintColor: "gray",
labelStyle: {
fontSize: 12,
padding: 10,
},
}}
>
<Tab.Screen
initialRouteName="Home"
name="Home"
component={HomeScreen}
options={{
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === "ios" ? `ios-home` : "md-home"}
/>
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
}

Answer 3

You need to import the real way (TabBarIcon file)
import React from 'react';
import { Ionicons } from '#expo/vector-icons';
export default function TabBarIcon(props) {
return (
<Ionicons
name={props.name}
size={26}
color={props.focused ? 'red' : 'black'}
style={{ marginBottom: -3 }}
/>
);
}
and you need to select the right icon (ios and md)(Part of router.js)
import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createSwitchNavigator } from 'react-navigation';
import TabBarIcon from "./components/TabBarIcon";
import Home from './components/Home';
import Register from './components/Register'
// Home page
const HomeStack = createStackNavigator({
Home: Home,
});
HomeStack.navigationOptions = {
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-home`
: 'md-home'
}
/>
),
};
HomeStack.path = '';

Answer 4

Even though I tried what was described above in the answers I was still getting the label shown in the tab bar. It only disappeared when I added labeled={false} as a prop to the Navigator.
Example
<Tab.Navigator
initialRouteName="Home"
labeled={false}
sceneAnimationEnabled={false}
>
etc
</Tab.Navigator>

Answer 5

Here it is:
import Icon from 'react-native-vector-icons/Ionicons';
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ focused, color }) => (
<Text style={{ marginTop: 6 }}> // Your Style Here
<Icon name={'md-add-circle'} color={color} />
</Text>
)
}}
/>
I hope you like it!!!