CODEWITHSUNDEEP
node.jsreact-nativenavigationstackreact-navigation
Ashish Pipaliya
Ashish Pipaliya

Reputation: 123

Navigation between one navigation container to another navigation container in react-native

import React, { useState } from 'react';     
import { createNativeStackNavigator } from '@react-navigation/native-stack';    
import { NavigationContainer } from '@react-navigation/native';     
. . . .

all the screens were imported...

Log out of the profile screen and then navigate to the login screen.

my navigation file is...

const BottomTab = createBottomTabNavigator();
const Stack = createNativeStackNavigator()
export default Navigate = () => {

    function Editable() {
        return (
            <NavigationContainer independent={true}>
                <Stack.Navigator screenOptions={{ headerShown: false }} >
                    <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
                    <Stack.Screen name='Edit_profile' component={Edit_profile} />
                    <Stack.Screen name='MyComplaints' component={MyComplaints} />
                </Stack.Navigator>
            </NavigationContainer>
        )
    }

    function HomeScreen() {
        return (
            <NavigationContainer independent={true}>
                <BottomTab.Navigator tabBarOptions={{ keyboardHidesTabBar: true }}>
                    <BottomTab.Screen name="Home" component={Home}/>
                    <BottomTab.Screen name="Home2" component={Home2} />
                    <BottomTab.Screen name="Editable" component={Editable}/>
                    <BottomTab.Screen name="Feedback" component={Feedback}/>
                </BottomTab.Navigator>
            </NavigationContainer>
        )
    };

    return (
        <NavigationContainer independent={true}>
            <Stack.Navigator screenOptions={{ headerShown: false }} 
                <Stack.Screen name="Login" component={Login} />
                <Stack.Screen name="App" component={App} />
                <Stack.Screen name="HomeScreen" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    )
};

I want to navigate from ProfileScreen to Login screen how can I do that?

Upvotes: 1

Views: 1713

Answers (2)

Nguyen Ngoc Thinh
Nguyen Ngoc Thinh

Reputation: 1

You can create each navigationRef for each NavigationContainer. Then use this ref to navigate without the navigation prop or hook.

// More info: https://reactnavigation.org/docs/navigating-without-navigation-prop/


export const navigationRef = createNavigationContainerRef()

export function navigate(name: any, params?: any) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name as never, params as never)
  }
}
...
 <NavigationContainer ref={navigationRef} {...props}>
...

Upvotes: 0

satya164
satya164

Reputation: 10145

Navigating between multiple navigation containers is impossible as they are independent from each other. You need to remove the nested NavigationContainer components.

There should be only one NavigationContainer at the root of your app.

https://reactnavigation.org/docs/getting-started/#wrapping-your-app-in-navigationcontainer

Upvotes: 1

Related Questions