Is there a way to navigate between screens that is not defined in the NavigationContainer in ReactNavigation?

I’m trying to navigate to my Login screen, but I haven’t defined my Login screen in my NavigationContainer. This is because I don’t want the Login screen to be a tab in my navbar. This leads to my question: Is there a way to navigate to the Login screen, without having it as a tab in the navbar?

export default function App() {
  return (
    <NavigationContainer>
      <SafeAreaView style={{flex: 1}}>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'home-outline'
                : 'home-outline';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'person-circle-outline' : 'person-circle-outline';
            } else if (route.name === 'Calendar') {
              iconName = focused ? 'calendar-clear' : 'calendar-clear';
            } else if (route.name === 'Agenda') {
              iconName = focused ? 'calendar-outline' : 'calendar-outline';
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'blue',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
        <Tab.Screen name="Calendar" component={CalendarScreen} />
        <Tab.Screen name="Agenda" component={AgendaScreen} />
        <Tab.Screen name="New Event" component={NewEventScreen} />
      </Tab.Navigator>
      </SafeAreaView>
    </NavigationContainer>
  );
}
<Button 
   title="Do you have an account? Click here to log in"
   onPress={() => this.props.navigation.navigate("Login")}
/>

4 thoughts on “Is there a way to navigate between screens that is not defined in the NavigationContainer in ReactNavigation?”

  1. This is an example of how it can be done:

    private render() {
        const Stack = createStackNavigator();
        const landingScreen = this.props.isLoggedIn ? null : (
            <Stack.Screen
                name="LoginScreen"
                component={LoginScreen}
            />
        );
        
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    {landingScreen}
                    <Stack.Screen name="HomeScreen" component={this.renderTabNavigator}/>
                </Stack.Navigator>
            </NavigationContainer>
        );
    }
    
    private renderTabNavigator = () => {
        const Tab = createBottomTabNavigator();
        return (
            <Tab.Navigator>
                <Tab.Screen name="Home" component={SearchScreen}/>
                <Tab.Screen name="Favorites" component={FavoritesScreen}/>
                <Tab.Screen name="Settings" component={SettingsScreen}/>
            </Tab.Navigator>
        );
    }
    
    Reply

Leave a Comment