App.tsx

import React from "react";
import { GlobalContextProvider } from "./GlobalContext";
import AppNavigator from "./AppNavigator";
import { NavigationContainer } from "@react-navigation/native";

const Root = () => (
  <NavigationContainer>
    <GlobalContextProvider>
      <AppNavigator />
    </GlobalContextProvider>
  </NavigationContainer>
)

export default Root;

AppNavigator.tsx

import React, { useContext } from "react";
import { GlobalContext } from "./GlobalContext";
import BottomTabs from "./BottomTabNavigator";
import Auth from './Auth'

interface RouteProps { }

const AppNavigator: React.FC<RouteProps> = ({ }) => {
  const global = useContext(GlobalContext);
  const { state: { jwt } } = global

  jwt ? <BottomTabs/> : <Auth/>
};

export default AppNavigator;

BottomTabNavigator.tsx

import React, { useContext } from "react";
import { GlobalContext } from './GlobalContext'
import { Text, View } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import TabBarIcon from "../components/TabBarIcon";
import HomePage from "../screens/HomePage";
// I can share what these types look like if you want
// they add some type safety to the route params you might pass to a screen/stack
import { BottomTabParamList } from "./BottomTabParamList";

const Tabs = createBottomTabNavigator<BottomTabParamList>();

interface BottomTabProps { }

// Example using GlobalContext in a screen
const SettingsScreen = () => {
  const { state } = useContext(GlobalContext)
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Settings!</Text>
    </View>
  );
}

const BottomTabs: React.FC<BottomTabProps> = () => {
  return (
    <Tabs.Navigator initialRouteName="Home" tabBarOptions={{ ... }}>
      <Tabs.Screen
        name="Home"
        component={HomePage}
        options={{
          title: "Home",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-home" />
          ),
        }}
      />
      <Tabs.Screen
        name="Bros"
        component={SettingsScreen}
        options={{
          title: "Bros",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-home" />
          ),
        }}
      />
      <Tabs.Screen
        name="Account"
        component={SettingsScreen}
        options={{
          title: "Account",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-home" />
          ),
        }}
      />
    </Tabs.Navigator>
  );
};

export default BottomTabs;

GlobalContext.tsx

import React, { useEffect, useState } from "react";

type ContextProps = {
  state: State;
};

const GlobalContext = React.createContext<ContextProps>(
  (null as unknown) as ContextProps
);

interface State {
  jwt: string
}

const initialState: State = { jwt: "" };

interface Props { children: React.ReactNode }

const GlobalContextProvider = (props: Props) => {
  const [state, setState] = useState(initialState);
  useEffect(() => {
    (async () => {
      // If you want to also store it in async storage,
      // you could always access it here and set the jwt in state
    })()
  })

  return (
    <GlobalContext.Provider
      value={{ state }}
    >
      {props.children}
    </GlobalContext.Provider>
  );
}

export { GlobalContext, GlobalContextProvider };