How to display tab bar icon in react navigation 4 - react-native

Question

I want to display bottom tab tar in react-navigation 4, but there is no luck to make it happen, even I use it. Can anyone help me to find the problem with my code or which option should I use?
static navigationOptions = {
title: "Map",
tabBarIcon: ({ tintColor }) => {
return <Icon name="home" size={30} color={tintColor} />;
}
}
in any component screen, it does still not work.
Here is my router
I want to apply the bottom tab icon to homescreen
const MainAuthenticated = createAppContainer(
createBottomTabNavigator(
{
main: {
screen: createBottomTabNavigator({
Marketplace: {
screen: createStackNavigator({
home: {
screen: HomeScreen,
},
profile: { screen: Profile },
business: { screen: MyBusiness },
logout: { screen: Logout },
itemlist: { screen: ItemList },
itemcreate: { screen: ItemCreate },
itemdetail: { screen: ItemDetail },
businesscreate: { screen: BusinessCreate },
businessdetail: { screen: MyBusinessDetail },
}),
},
XOrders: { screen: OrderScreen },
Favorite: { screen: FavoriteScreen },
}),
},
},
{
defaultNavigationOptions: {
tabBarVisible: false,
},
},
),
);

Answer 1

Here is the working code to add the bottom tab bar icon in react-navigation v4
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 = focused
? 'ios-information-circle'
: 'ios-information-circle-outline';
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Settings') {
iconName = focused ? 'ios-list-box' : 'ios-list';
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);
If you wanted to use some .png or jpeg or some other image file instead of vector icons just replace this
<IconComponent name={iconName} size={25} color={tintColor} /> // replace this with below
<Image source={require('your image path')} style={{height: 30, width: 30}} />