I am using react-native-vector-icons/FontAwesome
to show icons and react-navigation
for showing tabs. I am trying to show Home icon in button navigation but icons are not appearing.
PFB relevant code of Icon and createBottomTabNavigator
JavaScript
x
40
40
1
import React from 'react';
2
import { createBottomTabNavigator } from 'react-navigation';
3
// import { Icon } from 'react-native-elements';
4
import Icon from 'react-native-vector-icons/FontAwesome';
5
6
import Account from '../../Form/components/Account';
7
import Home from '../../Layout/components/Home';
8
9
export const Tabs = createBottomTabNavigator({
10
Account: {
11
screen: Account,
12
navigationOptions: {
13
tabBarLabel: 'Account',
14
tabBarIcon: ({ tintColor }) => <Icon name="rocket" size={35} color="#fdc94c" />
15
}
16
},
17
Home: {
18
screen: Home,
19
navigationOptions: {
20
tabBarLabel: 'Home',
21
tabBarIcon: ({ tintColor }) => <Icon name="rocket" size={35} color="#fdc94c" />
22
},
23
}
24
}, {
25
order: ['Home', 'Account'],
26
tabBarOptions: {
27
showLabel: true,
28
showIcon: true,
29
activeBackgroundColor: '#42a5f5',
30
style: {
31
backgroundColor: '#42a5f5',
32
paddingVertical: 10,
33
height: 60
34
},
35
indicatorStyle: {
36
backgroundColor: '#42a5f5',
37
}
38
}
39
})
40
PFB screenshot as well.
What do I need to do to show icon of Home?
Advertisement
Answer
Make sure that the font is linked in your iOS workspace, by using react-native link react-native-vector-icons
then rebuild the app
Follow the documentation and make sure that everything is set as they mentioned https://github.com/oblador/react-native-vector-icons#ios