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);
Source