Source: HomeTabs.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { HomeScreen, SelectScreen, ProfileScreen } from './screens';
import Icon from 'react-native-vector-icons/MaterialIcons';
import theme from './theme.style';

const Tab = createBottomTabNavigator();

/**
 * This is the React component which defines the UI for the tabbed bottom navigator.
 *
 * @function HomeTabs
 * @param {Object} props - This is a dictionary of component properties.
 * @namespace
 */
export default function HomeTabs({extraData}) {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      tabBarOptions={{
        activeTintColor: theme.PURPLE,
      }}
    >
      <Tab.Screen
        name="Home"
        options={{
          tabBarIcon: ({color, size}) => (
            <Icon name="home" color={color} size={size}/>
          ) 
        }}
      >
        {props => <HomeScreen {...props} extraData={extraData} />}
      </Tab.Screen>
      <Tab.Screen
        name="Select"
        options={{
          tabBarIcon: ({color, size}) => (
            <Icon name="camera" color={color} size={size}/>
          ) 
        }}
      >
        {props => <SelectScreen {...props} extraData={extraData} />}
      </Tab.Screen>
      <Tab.Screen
        name="Profile"
        options={{
          tabBarIcon: ({color, size}) => (
            <Icon name="face" color={color} size={size}/>
          ) 
        }}
      >
        {props => <ProfileScreen {...props} extraData={extraData} />}
      </Tab.Screen>
    </Tab.Navigator>
  );
}