How do you add icons to tabs in the tabnavigator? - react-native

Question

const OneNav = createStackNavigator({
Home: {screen: pages.Home},
Social: {screen: pages.Social},
House: {screen: pages.House},
},{
initialRouteName: 'Home',
});
const TwoNav = createStackNavigator({
Home: {screen: Two}
},{
initialRouteName: 'Home',
});
const TabNav = createBottomTabNavigator({
Home: {screen: OneNav},
Interact: {screen: TwoNav},
},{
initialRouteName: 'Check',
defaultNavigationOptions: {
headerTitle: () => (
<View>
<Logo />
</View>)
}
});
How do you add icons to each tab in the tabnavigator here? Right now only the text is showing. What do I add to TabNav to add icons for Home and Interact?

Answer 1

Below is the code you can try :
// You can import Ionicons from #expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
export default createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Settings') {
iconName = `ios-options`;
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);
More you can read here from their official docs
I hope this helps....Thanks :)