React App Template :: NavStack.js #reactnative

Navstack.Js1.js

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React, {useContext, useEffect} from 'react';
import {EventRegister} from 'react-native-event-listeners'
import Icon from 'react-native-vector-icons/FontAwesome5';

import ScoreRunner from '../components/Scores';
import {Context as AuthContext} from '../context/AuthContext';

import LoginScreen from './Login';
import RandomScreen from './Random'
import RecipesScreen from './Recipes'
import SettingsScreen from './Settings'
import SignupScreen from './Signup';

// functional screens for app
const RecipesStack = createNativeStackNavigator();

function RecipesStackScreen() {
    return (
        <RecipesStack.Navigator>
        <RecipesStack.Screen name = "Recipes Screen" component = { RecipesScreen } />
        </RecipesStack.Navigator>);
}

const RandomStack = createNativeStackNavigator();

function RandomStackScreen() {
    return (
        <RandomStack.Navigator>
        <RandomStack.Screen name = "Random Beverage" component = { RandomScreen } />
        </RandomStack.Navigator>);
}

const SettingsStack = createNativeStackNavigator();

function SettingsStackScreen() {
    return (
        <SettingsStack.Navigator>
        <SettingsStack.Screen name = "User Settings" component = { SettingsScreen } />
    </SettingsStack.Navigator>);
}

// user screens for signup / login
const UserStack = createNativeStackNavigator();

function UserStackScreen() {
    return (
        <UserStack.Navigator>
            <UserStack.Screen name="Login" component={
        LoginScreen} />
            <UserStack.Screen name="Signup" component={SignupScreen} />
        </UserStack.Navigator>
    );
}

// const SignupStack = createNativeStackNavigator();
//
// function SignupStackScreen() {
//     return (
//         <SignupStack.Navigator>
//             <SignupStack.Screen name="Bar Assistant User Login" component={SignupScreen} />
//         </SignupStack.Navigator>
//     );
// }


const tabBarOptions = {
        activeTintColor: '#cd077d',
            inactiveTintColor: 'white',
}

const Tab = createBottomTabNavigator();

const NavStack = props => {
        const {state, loadCredentials, hasToken, signout} = useContext(AuthContext);
        () => hasToken();
        console.log("isLoggedIn: " + state.isLoggedIn);
        if (state.isLoggedIn) {
            console.log("true isLoggedIn: " + state.isLoggedIn);
        } else {
            console.log("false isLoggedIn: " + state.isLoggedIn);
        }

        useEffect(() => {
            const eventListener = EventRegister.addEventListener('invalidLogin', (data) => {
                console.log('hit event!!!!!');
                () => invalidLogin();
            });
            return () => {
                EventRegister.removeEventListener(eventListener);
            }
        }, [ state.isLoggedIn ]);

        // console.log("isLoggedIn: " + isLoggedIn);
        if (state.isLoggedIn) {
            console.log('we have a token');
        return(
                <NavigationContainer>
                    <ScoreRunner />
                    <Tab.Navigator
        screenOptions = {{
                            tabBarActiveTintColor: "#80b2ea",
                                tabBarInactiveTintColor: 'gray',
                                tabBarShowLabel: true,
                                tabBarStyle: {
                                    paddingVertical: Platform.OS === 'ios' ? 20 : 0,
                                    height: 60,
                                    backgroundColor: 'black'
                                }
                        }} >
                        <Tab.Screen name = "Recipes" component = {RecipesStackScreen} options = {{
                            tabBarLabel: 'Recipes',
                            tabBarIcon: ({ color, size }) => (
                                <Icon name="book" color={color} size={size} />
                            ),
                        }}
                        />
                        <Tab.Screen name="Random" component={RandomStackScreen} options={{
                            tabBarLabel: 'Random',
                            tabBarIcon: ({ color, size }) => (
                                <Icon name="glass-whiskey" color={color} size={size} solid />
                            ),
                        }} />
                        <Tab.Screen name="Settings" component={SettingsStackScreen} options={{
                            tabBarLabel: 'Settings',
                            tabBarIcon: ({ color, size }) => (
                                <Icon name="user" color={color} size={size} />
                            ),
                        } } />
                    </Tab.Navigator>
                        </NavigationContainer>
        );
    } else {
        return(
            <NavigationContainer>
                <UserStack.Navigator>
                    <UserStack.Screen name="Login" component={LoginScreen} />
                        <UserStack.Screen name = "Signup" component = { SignupScreen } />
                </UserStack.Navigator>< /NavigationContainer>
        );
    }


};


export default NavStack;