I am new to react-native and trying to implement tab navigator. I am using react-native-vector-icons. i tried to display icon in my screen but It isn't showing me any icon.Here is what I did
1-npm install react-native-vector-icons --save
2-react-native link react-native-vector-icons
3-Edited android/app/build.gradle
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
4- react-native run-android
import React, { Component } from 'react';
import { StyleSheet, Text, View,Image,StatusBar,Button,TouchableOpacity} from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import profile from './profile';
export class test extends Component
{ render()
{
return (
<View style={styles.container}>
<Text style={styles.text}>Test</Text>
</View>
);
}
}
export default createBottomTabNavigator({
'test':{screen:test,
navigationOption:{
tabBarLabel:'test',
tabBarIcon:({tintColor})=>(
<Icon name="rocket" color={tintColor} size={40}/>
)}},
'Profile': { screen:profile,
navigationOption:{
tabBarLabel:'profile',
tabBarIcon:({tintColor})=>(
<Icon name="rocket" color={tintColor} size={40}/>
) } }
},{
navigationOption:{
tabBarVisible:true
},
tabBarOptions:{
activeTintColor:'red',
inactiveTintColor:'grey'
}
});
const styles= StyleSheet.create({
container:{
flexGrow:1,
backgroundColor:'#1c313a',
justifyContent:'center',
alignItems:'center'
},
text:{
fontSize:25,
fontWeight:'500',
color :'#fff',
paddingHorizontal:16 ,
textAlign:'center'
}
});