12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- import 'react-native-gesture-handler';
- import React, {useLayoutEffect} from 'react';
- import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
- import { createStackNavigator } from '@react-navigation/stack';
- import { DefaultTheme } from 'react-native-paper'
- import Map from '../screens/Map'
- import { MockProvider, useMockState } from '../contexts/MockContext';
- import Icon from 'react-native-vector-icons/FontAwesome';
- import Account from '../screens/Account';
- import LandmarkForm from '../screens/LandmarkForm';
- import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
- const shouldTabBarDisplay = (route) => {
- const routeName = getFocusedRouteNameFromRoute(route);
- console.log(routeName)
- if (routeName == "LandmarkForm") {
- return false;
- }
-
- return true;
- }
- const Tabs = createBottomTabNavigator();
- const MapStack = createStackNavigator();
- const AccountStack = createStackNavigator();
- const theme = {
- ...DefaultTheme,
- colors: {
- primary: '#df3f3f',
- accent: 'white',
- },
- }
- const MapStackNavigator = ({navigation, route}) => {
- const {dispatch, state} = useMockState();
- useLayoutEffect(() => {
- const tabBarShouldDisplay = shouldTabBarDisplay(route);
- if (state.tabBarVisible != tabBarShouldDisplay) {
- dispatch({type: "CHANGE_TABBAR_VISIBILITY", payload: tabBarShouldDisplay})
- }
-
- }, [navigation, route]);
- return(
- <MapStack.Navigator screenOptions={{headerTransparent: true}} screenOptions={{headerTransparent: true, headerTitle: ""}}>
- <MapStack.Screen name="Map" component={Map} />
- <MapStack.Screen name="LandmarkForm" component={LandmarkForm} />
- </MapStack.Navigator>
- )
- }
- const AccountStackNavigator = () => {
- return(
- <MapStack.Navigator screenOptions={{headerTransparent: true}} screenOptions={{headerTransparent: true, headerTitle: ""}}>
- <MapStack.Screen name="AccountSummary" component={Account} />
- </MapStack.Navigator>
- )
- }
- const TabsNavigator = ({route}) => {
- const {state} = useMockState();
- return(
- <Tabs.Navigator
- initialRouteName="Map"
- screenOptions={{tabBarVisible: state.tabBarVisible}}
- tabBarOptions={{
- keyboardHidesTabBar: true,
- tabBarLabel: 'Test',
- activeTintColor: "white",
- inactiveTintColor: "lightgrey",
- style: {paddingBottom: 5, backgroundColor: "#df3f3f"}
- }}>
- <Tabs.Screen
- name="Mapt"
- component={MapStackNavigator}
- options={{
- tabBarIcon: ({color}) => (<Icon name="map" size={15} color={color}/>),
- }} />
- <Tabs.Screen
- name="Account"
- component={AccountStackNavigator}
- options={{
- tabBarIcon: ({color}) => (<Icon name="user" size={15} color={color}/>),
- }} />
- </Tabs.Navigator>
- )
- }
- export default TabsNavigator;
|