I couldn't use react-navigation tab bar. How to use this? - react-native

Question

Now I am trying to create React Native app on Expo and use React-Navigation Tab Bar but I could't.
Actually I don't get any error but this code below doesn't work.
No warning as well.
import { createBottomTabNavigator, createAppContainer } from 'react-
navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import Home from './src/Screens/Home';
import Help from './src/Screens/Help';
const App = createBottomTabNavigator(
{
Home: {
screen: Home,
defaultNavigationOptions: {
tabBarIcon: ({ tintColor }) => {
<Icon name="home" style={{ width: 25, height: 25, tintColor:
tintColor}}/>
},
title: 'Home',
},
},
Help: { screen: Help },
},
{
swipeEnabled: false, //Android用
tabBarOptions: {
activeTintColor: '#DE628D',
inactiveTintColor: '#707070',
},
},
);
export default createAppContainer(App);

Answer 1

the tab works fine, but if you meant, there's no icon, try this instead
navigationOptions: {
tabBarIcon: ({ tintColor, activeTintColor }) => (
<Icon name="home" size={24} color={tintColor} />)
},

Answer 2

Please try to implement this way. This is copy of my tabNavigator. Hope this will be helpful for you.
const TabRouter = createBottomTabNavigator(
{
HomeAfterLoginScreen: { screen: A },
ShowListAlertScreen: { screen: B },
ShowListProfessionScreen: { screen: C },
MyAccountScreen: { screen: F }
},
{
tabBarPosition: "bottom",
tabBarOptions: {
style: { backgroundColor: "#50bcb8" },
showIcon: true,
showLabel: true,
gesturesEnabled: true,
indicatorStyle: { borderBottomWidth: 3, borderBottomColor: Style.color },
inactiveTintColor: "#fff",
activeTintColor: "#fff",
tabStyle: { justifyContent: "center", alignItems: "center" }
}
});

Answer 3

I got it. I have solved this issue.
const App = createBottomTabNavigator(
{
Favorite: {
screen: FavoriteShops,
navigationOptions: {
tabBarLabel: 'お気に入り',
tabBarIcon: ({ tintColor }) => (
<Icon name="heart" size={25} color={tintColor} />
),
},
},
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: 'ホーム',
tabBarIcon: ({ tintColor }) => (
<Icon name="home" size={30} color={tintColor} />
),
},
},
Help: {
screen: Help,
navigationOptions: {
tabBarLabel: 'その他',
tabBarIcon: ({ tintColor }) => (
<Icon name="bars" size={25} color={tintColor} />
),
},
},
},
{
swipeEnabled: false, //Android用
tabBarOptions: {
showIcon: true,
showLabel: true,
activeTintColor: '#DE628D',
inactiveTintColor: '#707070',
style: {
width: '100%',
height: 70,
},
tabStyle: {
paddingTop: 20,
},
},
},
);