MainMap.js

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import Map from '../MapTab/Map';
import Attractions from '../MapTab/Attractions';
import Directions from '../MapTab/Directions.js';

import { FontAwesome5 } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';

const Tab = createMaterialTopTabNavigator();

export default function App() {
  return (
    <Tab.Navigator screenOptions={{tabBarShowLabel: false}}>
      <Tab.Screen name="Map" component={Map} 
      options={{tabBarIcon: ()=><FontAwesome5 name="map-marked-alt" size={24} color="black" />}}/>
      <Tab.Screen name="Locations" component={Attractions} 
      options={{tabBarIcon: ()=><MaterialIcons name="insights" size={24} color="blue" />}} />
      <Tab.Screen name="Directions" component={Directions} 
      options={{tabBarIcon: ()=><FontAwesome5 name="directions" size={24} color="green" />}} />
    </Tab.Navigator>
  );
}