Logic for Loggedin

this for navigator open the app route to welcome navigator (login, signup, welcome screen) and if u success login, go to home

you must install react-native-firebase, you can see documentasion ios and android at docs.

Create folder Navigator in src folder and create file useAuthentication.js

import auth from '@react-native-firebase/auth'
import {useState, useEffect} from 'react'

function useAuthentication() {
  const [user, setUser] = useState('')

  useEffect(() => {
    const unsubscibeFromAuthStatusChanged = auth().onAuthStateChanged((user) => {
      if(user) {
        setUser(user)
      }
      else {
        setUser()
      }
    })
    return unsubscibeFromAuthStatusChanged
  }, [])

  return user
}

export default useAuthentication

next create file AuthenticationNavigation.js

npm i @react-navigation/stack

and move LoginScreen.js and SignUpScreen to folder Screens > Authentication

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import LoginScreen from '../Screens/Authentication/LoginScreen'
import SignUpScreen from '../Screens/Authentication/SignUpScreen'

function AuthenticationNavigation() {
  const Stack = createStackNavigator()

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Login"
        options={{ headerShown: false }}
        component={LoginScreen}
      />
      <Stack.Screen
        name="Daftar"
        options={{ headerShown: false }}
        component={SignUpScreen}
      />
    </Stack.Navigator>
  )
}

export default AuthenticationNavigation

and then in app.js

import React, { useEffect } from 'react'
import { NativeBaseProvider } from 'native-base'
import Navigators from './src/Navigation/Navigators'
import { NavigationContainer } from '@react-navigation/native'
import Preloader from './src/Components/Basic/Preloader'
import Notification from './src/Components/Basic/Notification'
import { AppProvider } from './src/Context/AppContext'

export default function App() {


  return (
    <NavigationContainer>
      <NativeBaseProvider>
        <AppProvider>
          <Preloader />
          <Notification />
          <Navigators />
        </AppProvider>
      </NativeBaseProvider>
    </NavigationContainer>
  )
}

and then in Navigators.js

for customize bottom tabs navigator

npm i @react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import React, { useEffect, useState } from 'react'
import messaging from '@react-native-firebase/messaging'
import { useNavigation } from '@react-navigation/native'
import firestore from '@react-native-firebase/firestore'

import ProductNavigation from './ProductNavigation'
import MessageNavigation from './MessageNavigation'
import AuthenticationNavigation from './AuthenticationNavigation'
import { Entypo, Ionicons } from '@expo/vector-icons'
import FeedNavigation from './FeedNavigation'
import { useAppContext } from '../Context/AppContext'
import useAuthentication from './useAuthentication'
import ProfileNavigators from './ProfileNavigators'
import { Button, Stack } from 'native-base'
import ProductionNavigation from './ProductionNavigation'

const Tab = createBottomTabNavigator()

function Navigators() {
  const isLogedIn = useAuthentication()


  return (
    <Tab.Navigator>
      <Tab.Screen
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="ios-time" color={color} size={size} />
          ),
          tabBarStyle: { backgroundColor: 'black' },
          tabBarInactiveTintColor: 'grey',
          tabBarActiveTintColor: 'white',
        }}
        name="feed"
        component={FeedNavigation}
      />
      <Tab.Screen
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="cart-outline" color={color} size={size} />
          ),
          tabBarStyle: { backgroundColor: 'black' },
          tabBarInactiveTintColor: 'grey',
          tabBarActiveTintColor: 'white',
        }}
        name="Shop"
        component={ProductNavigation}
      />

      {isLogedIn ? (
        <>
          <Tab.Screen
            options={{
              headerShown: false,
              tabBarIcon: ({ size, color }) => (
                <Ionicons name="chatbox" color={color} size={size} />
              ),
              tabBarBadge: notificationAmount > 0 ? notificationAmount : null,
              tabBarStyle: { backgroundColor: 'black' },
              tabBarInactiveTintColor: 'grey',
              tabBarActiveTintColor: 'white',
            }}
            name="Messages"
            component={MessageNavigation}
          />
          <Tab.Screen
            options={{
              headerShown: false,
              tabBarIcon: ({ color, size }) => (
                <Ionicons
                  name="person-circle-outline"
                  color={color}
                  size={size}
                />
              ),
              tabBarStyle: { backgroundColor: 'black' },
              tabBarInactiveTintColor: 'grey',
              tabBarActiveTintColor: 'white',
            }}
            name="Profile"
            component={ProfileNavigators}
          />
        </>
      ) : (
        <>
          <Tab.Screen
            options={{
              headerShown: false,
              tabBarIcon: ({ size, color }) => (
                <Ionicons name="chatbox" color={color} size={size} />
              ),
              // tabBarBadge: notificationAmount > 0 ? (notificationAmount) : (null),
              tabBarStyle: { backgroundColor: 'black' },
              tabBarInactiveTintColor: 'grey',
              tabBarActiveTintColor: 'white',
            }}
            name="Messages"
            component={AuthenticationNavigation}
          />
          <Tab.Screen
            options={{
              headerShown: false,
              tabBarIcon: ({ color, size }) => (
                <Ionicons
                  name="person-circle-outline"
                  color={color}
                  size={size}
                />
              ),
              tabBarStyle: { backgroundColor: 'black' },
              tabBarInactiveTintColor: 'grey',
              tabBarActiveTintColor: 'white',
            }}
            name="Profile"
            component={AuthenticationNavigation}
          />
        </>
      )}
    </Tab.Navigator>
  )
}

export default Navigators