CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-native-navigationreact-navigation-stack
Harold Obasi
Harold Obasi

Reputation: 15

How to navigate from Child Component to Parent in React Native

I have multiple Navigations nested together (Stacks and BottomTab) and i want to navigate from the child of a navigator to the top; consider the following example:

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

function AuthNav() {
  const Stack = createNativeStackNavigator();
  return (
    <NavigationContainer independent={true}>
      <Stack.Navigator>
        <Stack.Screen
          name="Signup"
          component={Signup}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
} 

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Auth"
          component={AuthNav}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Feed" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Say i want to move from my Signup screen back up to the App, and then navigate into the Home component, how would i go about doing that, also an explanation as to how the {independent: true} option works will be appreciated as well

Upvotes: 0

Views: 1760

Answers (2)

Tafsir Ahamed
Tafsir Ahamed

Reputation: 956

As mentioned in previous answer and comment, you're using NavigationContainer twice. You cannot do that. If you want to navigate back to parent screen, you can use navigation.goBack().

Upvotes: 4

Talha
Talha

Reputation: 886

you are using the wrong formatting for coding

use this,

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

function AuthNav() {
  const Stack = createNativeStackNavigator();
  return (
    
      <Stack.Navigator>
        <Stack.Screen
          name="Signup"
          component={Signup}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    
  );
} 

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Auth"
          component={AuthNav}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Feed" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

I hope it resolves your issue.

Upvotes: 0

Related Questions