React Native Custom Navbar issue - reactjs

Question

Hey so I am having a little brain meltdown,
I cannot for the life of me figure out how I should do this.
What I am trying to do is have my custom navbar not show on the login screen but show anywhere else.
I explained in this short video: https://cdn.discordapp.com/attachments/643261623519150090/904146526778056805/Desktop_2021.10.30_-_16.10.14.04.mp4
This is my code:
[ root ./ ] App.js
import LoginScreen from './views/login'
import HomeScreen from './views/home'
import ProfileScreen from './views/profile'
import CustomNav from './views/nav/index'
const Stack = createStackNavigator();
export default function App() {
return (
<View style={styles.Test} >
<NavigationContainer theme={DarkTheme} linking={{
config: {
screens: {
Login: "/",
Home: "/home",
Profile: "/Profile/:Username"
}
},
}}>
<Stack.Navigator
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
<CustomNav Nav="Mobile" />
</NavigationContainer>
</View>
);
}
[ ./nav/index] index.js
import React, {useEffect, useState} from 'react';
import {} from 'react-native';
import MobileNav from './mobile'
import WebsiteNav from './website'
const CustomNav = () => {
const [viewing, setViewing] = useState('login');
useEffect(() => {
if(viewing === 'login'){
console.log("Viewing Login")
}else{
console.log("Not Login")
}
}, []);
return(
null
);
}
export default CustomNav;