src/navigation/AuthorizedNavigator.tsx

import { BottomTabBarOptions, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from "react";
import { Map } from "../components/Map";
import { Profile } from "../components/Profile";
import { colors } from "../globals";
import { FontAwesome } from '@expo/vector-icons';
import { authStore } from "../stores/AuthStore";
import { observer } from "mobx-react";

const MainTabs = createBottomTabNavigator();

const tabBarOptions: BottomTabBarOptions = {
    keyboardHidesTabBar: true,
    activeTintColor: 'white',
    inactiveTintColor: "lightgrey",
    style: {paddingBottom: 5, backgroundColor: colors.red}
} 

/**
 * The root navigator for all authorized screens ({@link Map}, {@link Profile}). It uses a [React Navigation Bottom Tabs Navigator]{@link https://reactnavigation.org/docs/bottom-tab-navigator/} the main navigation mechanism.
 * @category Navigation
 * @component
 */
const AuthorizedNavigator: React.FC = () => {
    return(
        <MainTabs.Navigator 
            initialRouteName="Map"
            tabBarOptions={tabBarOptions}>
            <MainTabs.Screen name="Map" component={Map} options={{tabBarIcon: ({color}) => (<FontAwesome name="map" size={15} color={color}/>)}} />
            <MainTabs.Screen name="Profile" options={{tabBarIcon: ({color}) => (<FontAwesome name="user" size={15} color={color}/>)}} >
                {(props) => <Profile userId={authStore.userId as string} />}
            </MainTabs.Screen> 
        </MainTabs.Navigator>
    )
}

export default observer(AuthorizedNavigator);