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" />