Tab navigator icons in React Navigation
Figured it out had to add
tabBarOptions: {
showIcon: true
},
After this the icon showed.
You can also simply add it with the help of Tab.Screen
First Import the icon from expo
import { Ionicons } from '@expo/vector-icons';
or choose any icons from here: https://icons.expo.fyi/
Then use it like this
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="home" color={color} size={size} />
),
}}
/>
This works for me, without enable showIcon:true
.
I am using Ionicons
icon pack.
HomeScreen:{
screen:HomeScreen,
navigationOptions: {
tabBarLabel:"Home",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-bookmarks" size={20}/>
)
},
},