React native expo: Tab navigator set initial screen

Question

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';


function LoginScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Login</Text>
    </View>

  );
}

function VideoScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Video</Text>
    </View>
  );
}

function PodcastScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Podcast</Text>
    </View>
  );
}

function TravelScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Travel</Text>
    </View>
  );
}

function InfoScreen() {
  return ( 
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Info</Text>
    </View>
  );
}


const Tab = createBottomTabNavigator();

export default function App() {
  return (

    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Video" component={VideoScreen} />
        <Tab.Screen name="Podcast" component={PodcastScreen} />
        <Tab.Screen name="Travel" component={TravelScreen} />
        <Tab.Screen name="Info" component={InfoScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

The code is from App.js. I will add the icons later

I want to have the login screen as the first screen to show up when the user opens the app. And when the user presses the login button then it should open like it is now. Also the loginScreen should not show up on the tab navigator.

Thank you for your help

Answer 1

This might help

const MainTabNavigator = () => {

     return (
      <Tab.Navigator>
        <Tab.Screen name="Video" component={VideoScreen} />
        <Tab.Screen name="Podcast" component={PodcastScreen} />
        <Tab.Screen name="Travel" component={TravelScreen} />
        <Tab.Screen name="Info" component={InfoScreen} />
      </Tab.Navigator>
     );
}


<NavigationContainer>
     <Stack.Navigator>
       {Store.userToken == null ? (
         <Stack.Screen name="Login" component={LoginStackScreen} options={{ headerShown: false }} />
       ) : (
           <Stack.Screen name="MainTabNavigator" component={MainTabNavigator} options={{ headerShown: false }} />)}
     </Stack.Navigator>
</NavigationContainer>