TabNavigator.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import HomeScreen from './HomeScreen';
import FeedScreen from './FeedScreen';
import { onTabPress } from '../services';

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
    return (
        <Tab.Navigator>
            <Tab.Screen
                name='Home'
                component={HomeScreen}
                options={{
                    tabBarLabel: 'Home',
                    tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons name="home" color={color} size={size} />
                    ),
                }}
                listeners={({ navigation, route }) => ({
                    tabPress: () => onTabPress(navigation, route)
                })}
            />
            <Tab.Screen
                name='Feed'
                component={FeedScreen}
                options={{
                    tabBarLabel: 'Feed',
                    tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons name="rss" color={color} size={size} />
                    ),
                }}
                listeners={({ navigation, route }) => ({
                    tabPress: () => onTabPress(navigation, route)
                })}
            />
        </Tab.Navigator>
    )
};

const BottomTabNavigator = () => {
    return (
        <NavigationContainer>
            <TabNavigator />
        </NavigationContainer>
    )
};

export default BottomTabNavigator;