I'm trying to add Icons to by Tab Navigator using Ionicons.
I'm importing them from expo/vector-icons
import { Ionicons } from '@expo/vector-icons';
I then add my screens to my navigator
const TabNavigator = createBottomTabNavigator(
{
Home: {screen: HomeStack},
AddNew: {screen: AddNewScreen},
Settings: {screen: SettingsStack},
},
And initiate my Ionicons in navigationOptions
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
var iconName;
if (routeName === 'Home') {
iconName = 'add-circle-outline';
} else if (routeName === 'AddNew') {
iconName = 'ios-add-circle';
} else if (routeName === 'Settings') {
iconName = 'md-options';
}
return <Ionicons name={iconName} size={25} color={tintColor} />;
}, });
Then I set up my AppContainer and export it
const AppContainer = createAppContainer(TabNavigator);
export default AppContainer;
I've tried using MaterialIcons
instead of Ionicons with same results.
My peers, who has successfully implemented ionicons, do not have to use the AppContainer to export their navigator, so I am inclined to think that's the issue.
Been at this for a while and it just wont work for me.
The error was due to the expo/vector-icons folder not being declared.
I solved it with this command in the terminal:
npm install @expo/vector-icons