React-Nav-Melon/navigation/HomePageNavigator.js

import React from 'react'
import LandingPage from '../screens/LandingPage';
import SearchPage from '../screens/SearchPage';
import BookmarkPage from '../screens/BookmarkPage';
import SettingsPage from '../screens/SettingsPage';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import OctiIcon from 'react-native-vector-icons/dist/Octicons';
import IonIcon from 'react-native-vector-icons/dist/Ionicons';

import colors from '../theme/colors';
import fonts from '../theme/fonts';
import NewscoutHomeHeader from '../components/organisms/Headers/NewscoutHomeHeader';
import Header from '../components/atoms/Header';
import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
import { TouchableOpacity, View, Text } from 'react-native';

const Tab = createBottomTabNavigator();

// tabBar={props => <BottomTabBar {...props}/>}
const HomePageNavigator = ({ route, navigation }) => {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarItemStyle: { paddingHorizontal: fonts.getSize(36), flex: 0 },
                tabBarStyle: { height: fonts.getSize(64), alignItems: 'center' },
                tabBarShowLabel: false,
                tabBarIcon: ({ focused, color, size }) => {
                    let iconName;
                    let colorName;

                    switch (route.name) {
                        case "Landing":
                            iconName = "home-outline";
                            break;
                        case "Search":
                            iconName = "search-outline";
                            break
                        case "Bookmark":
                            iconName = "bookmark-outline";
                            break
                        case "Settings":
                            iconName = 'person-outline';
                            break
                        default:
                            break;
                    }

                    colorName = focused ? colors.topColor : colors.baseColor;

                    // You can return any component that you like here!
                    return <IonIcon name={iconName} size={size} color={colorName} />;
                },
            })}

        >
            <Tab.Screen
                name="Landing"
                component={LandingPage}
                options={({ navigation }) => ({
                    header: () => <NewscoutHomeHeader />
                })} />
            <Tab.Screen
                name="Search"
                component={SearchPage}
                options={(navigation) => ({
                    headerShown: false
                })} />
            <Tab.Screen
                name="Bookmark"
                component={BookmarkPage}
                options={(navigation) => ({
                    header: () => <NewscoutTitleHeader title={"My Bookmarks"}>
                        <OctiIcon name='three-bars' size={24} color={colors.topColor} />
                    </NewscoutTitleHeader>
                })}
            />
            <Tab.Screen
                name="Settings"
                component={SettingsPage}
                options={() => ({
                    header: () => <NewscoutTitleHeader title={"Settings"} backButtonShown={true}></NewscoutTitleHeader>
                })}
            />
        </Tab.Navigator>

    )
}

export default HomePageNavigator