App.js

import 'react-native-gesture-handler';
import React from 'react';

import RootNavigator from './src/navigation/RootNavigator';
import { AuthenticatedUserProvider } from './src/navigation/AuthenticatedUserProvider';

const App = () => {
  return (
    <AuthenticatedUserProvider>
      <RootNavigator />
    </AuthenticatedUserProvider>
  );
};

export default App;

AppNavigator.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Colors from '../constants/Colors';
import { Feather } from '../constants/Icons';
import Favorites from '../screens/App/Favorites';
import Listings from '../screens/App/Listings';
import Profile from '../screens/App/Profile';

const Main = createBottomTabNavigator();

const screenOptions = (route, color) => {
  let iconName;
  let iconType;

  switch (route.name) {
    case 'Listings':
      iconName = 'coffee';
      iconType = 'Feather';
      break;
    case 'Favorites':
      iconName = 'heart';
      iconType = 'Feather';
      break;
    case 'Profile':
      iconName = 'user';
      iconType = 'Feather';
      break;
    default:
      break;
  }

  if (iconType === 'Feather') {
    return <Feather name={iconName} color={color} size={24} />;
  }
};

const tabOptions = {
  showLabel: false,
  inactiveTintColor: Colors.gray,
  activeTintColor: Colors.white,
  activeBackgroundColor: Colors.primary60,
  inactiveBackgroundColor: Colors.white,
  style: {
    backgroundColor: Colors.white,
    borderTopRightRadius: 32,
    borderTopLeftRadius: 32,
    alignItems: 'center',
    position: 'absolute',
    bottom: 0,
    elevation: 10
  },
  tabStyle: {
    borderRadius: 32,
    marginHorizontal: 40,
    marginVertical: 2
  }
};

export default function AppNavigator() {
  return (
    <Main.Navigator
      initialRouteName='Listings'
      tabBarOptions={tabOptions}
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color }) => screenOptions(route, color)
      })}
    >
      <Main.Screen name='Listings' component={Listings} />
      <Main.Screen name='Favorites' component={Favorites} />
      <Main.Screen name='Profile' component={Profile} />
    </Main.Navigator>
  );
}

AuthenticatedUserProvider.js

/**
 * This provider is created
 * to access user in whole app
 */
import React, { createContext, useState } from 'react';

export const AuthenticatedUserContext = createContext({});

export const AuthenticatedUserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <AuthenticatedUserContext.Provider value={{ user, setUser }}>
      {children}
    </AuthenticatedUserContext.Provider>
  );
};

AuthNavigator.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import SignIn from '../screens/Auth/SignIn';
import SignUp from '../screens/Auth/SignUp';
import ForgotPassword from '../screens/Auth/ForgotPassword';
import CheckYourMail from '../screens/Auth/CheckYourMail';

const Auth = createStackNavigator();

export default function AuthNavigator() {
  return (
    <Auth.Navigator headerMode='none'>
      <Auth.Screen name='SignIn' component={SignIn} />
      <Auth.Screen name='SignUp' component={SignUp} />
      <Auth.Screen name='ForgotPassword' component={ForgotPassword} />
      <Auth.Screen name='CheckYourMail' component={CheckYourMail} />
    </Auth.Navigator>
  );
}

RootNavigator.js

import React, { useState, useEffect, useContext } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import auth from '@react-native-firebase/auth';

import AuthNavigator from './AuthNavigator';
import AppNavigator from './AppNavigator';
import { AuthenticatedUserContext } from './AuthenticatedUserProvider';
import OfflineNotice from '../components/OfflineNotice';
import Loader from '../components/Loader';

export default function RootNavigator() {
  const { user, setUser } = useContext(AuthenticatedUserContext);
  const [isLoading, setIsLoading] = useState(true);

  // Handle user state changes
  function handleOnAuthStateChanged(user) {
    setUser(user);
    // console.log(user);

    if (isLoading) setIsLoading(false);
  }

  useEffect(() => {
    const authSubscriber = auth().onAuthStateChanged(handleOnAuthStateChanged);

    // unsubscribe on unmount
    return authSubscriber;
  }, []);

  if (isLoading) {
    return <Loader />;
  }

  return (
    <>
      <OfflineNotice />
      <NavigationContainer>
        {user ? <AppNavigator /> : <AuthNavigator />}
      </NavigationContainer>
    </>
  );
}