React-navigation crash when going back from a nested navigation

Question

I'm using React-navigation 6 on my React native application I have two StackNavigator in a BottomStackNavigator with those screens and params on each stack:

export type BottomNavigationStack = {
    Planner: undefined,
    Profile: undefined,
}

export type PlannerNavigationStack = {
    PlannerHome: undefined,
    PlannerDetails: {
        detail: { ... }
    },
    Profile: {
        screen: string,
        initial?: boolean,
        params?: { [name: string]: string }
    }, // We can go to ProfileNavigationStack from PlannerNavigationStack
}

export type PlannerNavDetailProps = StackScreenProps<PlannerNavigationStack, 'PlannerDetails'>

export type ProfileNavigationStack = {
    ProfileHome: undefined,
    ProfileAddThings: {
        service: string
        from: string,
    },
    Planner: {
        screen: string,
        initial?: boolean,
        params?: { [name: string]: string }
    }, // We can go to PlannerNavigationStack from ProfileNavigationStack
}

export type ProfileNavAddThingsProps = StackScreenProps<ProfileNavigationStack, 'ProfileAddThings'>

So i'm trying to navigate from PlannerStack to ProfileStack, when I'm in ProfileStack, I want to go back to PlannerStack.

I got no problem going to ProfileStack from PlannerStack like this:

navigation.navigate('Profile', {
    screen: 'ProfileAddThings',
    params: {
        service: 'myservice',
        from: 'myfrom',
    },
    initial: false,
})

So at that moment I'm on ProfileStack on screen ProfileAddThings . if I read the documentation, the PlannerStack keep it's history, and if I click on the bottomTab button of Planner I can see the page is still PlannerDetails . But, when I click on the back button of the screen ProfileAddThings , I'm going back to ProfileHome . I tried to overide the backButton action of the screen ProfileAddThings with that code:

navigation.navigate('Planner', { screen: 'PlannerDetails' })

But I got the error: undefined is not an object (evaluating 'route.params.detail')

Detail is a parameter of PlannerDetails screen.

I really don't understand why this parameter is undefined because de PlannerStack history is still present.

Someone has already gone back from a nested navigation in react native?

Thanks

Answer 1

You need to get the parent navigator. You can do this by using the getParent() method from the current screen. Will be something like this:

let parent = navigation.getParent(); // This will assing PlannerStack to the parent variable. 

then you should call navigation method with the Route name

parent.navigate('PlannerDetails');

The route history, register the hole component from the screen (in your case PlannerStack) and in your PlannerStack the innitialRoute probably is ProfileHome, thats the reason you get there when using the back button.