All files / atlas/src/navigation AuthorizedNavigator.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
 
 
 
 
 
 
 
3x
 
3x
 
 
 
 
 
 
 
 
 
 
 
3x
1x
 
 
 
2x
2x
 
 
 
 
 
 
 
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);