How can I close a modally opened window with its own navigation stack?

Question

I have the following structure in my React Native project, suggested by this answer:

export const Root = () => {
    const RootStack = useMemo(() => createStackNavigator(), []);
    const HomeStack = useMemo(() => createStackNavigator(), []);

    function renderHomeStack() {
        return (
            <HomeStack.Navigator>
                <HomeStack.Screen name="Home" component={HomeScreen} />
                <HomeStack.Screen name="Settings" component={SettingsScreen} />
            </HomeStack.Navigator>
        );
    }

    function renderRootStack() {
        return (
            <RootStack.Navigator>
                <RootStack.Screen name="Login" component={LoginScreen} />
                <RootStack.Screen
                    name="HomeStack"
                    options={{
                        presentation: 'modal',
                    }}
                    component={renderHomeStack}
                />
            </RootStack.Navigator>
        );
    }

    return renderRootStack();
};

Currently, I want to go back from the Settings screen to the Login screen.

I tried the solutions under this question, but they didn't work.
I also tried using DeviceEventEmitter to send an event to the login screen to call navigation.popToTop() or navigation.goBack() - that didn't work either.

Simply you can navigate to the Login screen please try `navigation.navigate("Login")` — Yaman KATBY, Jan 16 '22 at 16:56
@YamanKATBY This doesn't work, as the navigation reference finds the inner stack and not the outer stack. — Tamás Sengel, Jan 16 '22 at 18:08

score 0 · Answer 1 · answered Jan 18 '22 at 10:05

Try this, you have to pass the parent props before,

props.navigation.navigate("LoginScreen");

or you can use AuthContext to save it in one location and goback,

      const initialLoginstate = {
        isLoading: true,
        userName: null,
        userToken: null,
      };

      const loginReducer = (prevState, action) => {
        switch (action.type) {
    
          case "LOGOUT":
            return {
              ...prevState,
              userName: null,
              userToken: null,
              isLoading: false,
            };
        }
      };

 
    const [loginState, dispatch] = React.useReducer(
        loginReducer,
        initialLoginstate
      );

 const authContext = React.useMemo(
        () => ({
    signOut: async () => {
    
                try {
                  await AsyncStorage.removeItem("userToken");
                } catch (e) {
                  console.log(e);
                }
                dispatch({ type: "LOGOUT" });
        }),
        []
      );

score 0 · Answer 2 · answered Jan 19 '22 at 07:08

0

Try using

 navigation.reset({
  index: 0,
  routes: [{ name: 'Login' }],
});

answered Jan 19 '22 at 07:08

Xhirazi

735
4
15

This doesn't work, as the navigation reference on the Settings screen doesn't know about the login screen. I need a way to access that other navigation reference somehow. – Tamás Sengel Jan 20 '22 at 14:24

score 0 · Answer 3 · answered Nov 28 '22 at 15:44

Option 1:

You just need to call navigate and pass in the id of the screen you want to navigate to.

i.e. The screen you want to see when the modal is closed:

props.navigation.navigate("MyScreen");

This will close the modal (as well as any of the screens that were in the modal).

Option 2:

props.navigation.popToTop();
props.navigation.goBack(null);

How can I close a modally opened window with its own navigation stack?

3 Answers3