rnRoute-Bottom.jsx

const AppTabNavigator = createBottomTabNavigator({
    home : {
        screen : Home,
        navigationOptions :{
            title : 'Beranda',
        }
    },
    favorite : {
        screen : Favorite,
        navigationOptions :{
            title : 'Favorit',
        }
    },
    search : {
        screen : Search,
        navigationOptions :{
            title : 'Cari',
        }
    },
    profile : {
        screen : Profile,
        navigationOptions :{
            title : 'Akun'
        }
    }
},
{
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        
        let iconType = 'MaterialIcons';
        let iconName;
        if (routeName === 'home') {
            iconType = `MaterialCommunityIcons`;
            iconName = `home${focused ? '' : '-outline' }`;
        } 
        else if (routeName === 'favorite') {
            iconType = `MaterialCommunityIcons`;
            iconName = `bookmark${focused ? '' : '-outline'}`;
        } 
        else if (routeName === 'search') {
            iconType = `${focused ? 'FontAwesome' : 'AntDesign'}`;
            iconName = 'search';
        } 
        else if (routeName === 'profile') {
            iconName = `person${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here!
        return <Icon type={iconType} name={iconName} size={24} color={tintColor} style={{color: '#b2b2b2'}}/>;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#f0f0f0',
      inactiveTintColor: 'gray',
      style:{
        paddingTop: 3,
        backgroundColor: '#303030',
      }
    },
    navigationOptions : {
        header : null,
    }
})