mobileapp/navigation/TabsNavigator.js

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';

// unused method for displaying tabbar based on screen shown
// 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" 
        tabBarOptions={{
          keyboardHidesTabBar: true,
          tabBarLabel: 'Test',
          activeTintColor: "white",
          inactiveTintColor: "lightgrey",
          style: {paddingBottom: 5, backgroundColor: "#df3f3f"}
        }}>
        <Tabs.Screen 
          name="Map" 
          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;