"Reset" stackNavigator, after clicking in another BottomTabNavigatorTab

Question

I currently have this navigation schema:

BottomTabNavigator

export const HomePageBottomNavigator = createBottomTabNavigator(
{
    CardListStack: {
        screen: CardListStack,
        navigationOptions: () => ({
            title: 'My Cards'
        })
    },
    ClassListStack: {
        screen: ClassListStack,
        navigationOptions: () => ({
            title: 'My classes'
        })
    }
})

CardListStack

export const CardListStack = createStackNavigator(
{
    CardListPage: {
        screen: CardListPage
    },
    CardPage: {
        screen: CardPage,
        headerMode: 'none'
    }
},
{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false
    },
    initialRouteName: 'CardListPage'

});

ClassListStack

export const ClassListStack = createStackNavigator(
{
    ClassesListPage: {
        screen: ClassesListPage
    },
    ClassPage: {
        screen: ClassPage,
        headerMode: 'none'
    },
    CardPage: {
        screen: CardPage,
        headerMode: 'none'
    }
},
{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false
    },
    initialRouteName: 'ClassesListPage',
});

So basically I have two tabs: The first one is all about cards, you can see your cards list and click to see the details of a specific card. In the second one you can find your classes, see one class in particular and click to see the cards it has.

The problem I'm facing is that when I'm in the CardListStack and I execute the following actions: Open a card, go to the ClassListStack, then go back to the CardListStack... The card is still open. The same thing happens when I open a class details, change the stack and then go back. Is there any way I can "reset" the stack when I move back to it?

score 1 · Accepted Answer · answered Mar 20 '19 at 01:00

I believe this is the intended behavior of StackNavigators. Many times you want the user to be able to go as far down as they want in navigation for a particular tab, and when they leave the tab and come back they wouldn't want all of their progress lost.

However, I too have tried to have a tab "reset" when I navigate to it and found the solutions frustrating.

Here are a few ways to approach this:

Instead of calling navigation.navigate('CardListStack') try being more specific about the exact screen you want, which I believe is CardListPage. Therefore, navigation.navigate('CardListPage') might do exactly what you want it to. I've had a lot of trouble with that though depending on different versions of react-navigation.
Use navigation.popToTop(). This will pop you back to the top of the current route you're on. So calling this after you navigate back to CardListStack will pop you back to CardListPage, which I think is what you want. However, this isn't ideal because the user will see the animation of the card being dismissed and moving back to the list.
You can also reach into Navigation Actions and see what can be done there, as answered here.

Hope one of these helps!

score 0 · Answer 2 · answered Mar 20 '19 at 02:50

All tabs inside tab navigator are rendered immediately and it will not be reset when you're switching tabs. you need to use lazy property on tabnavigator config to make tabs rendered only when they are made active or clicked.

Like this:

export const HomePageBottomNavigator = createBottomTabNavigator(
{
    CardListStack: {
        screen: CardListStack,
        navigationOptions: () => ({
            title: 'My Cards'
        })
    },
    ClassListStack: {
        screen: ClassListStack,
        navigationOptions: () => ({
            title: 'My classes'
        })
    }
},
{
   lazy:true
}
)

"Reset" stackNavigator, after clicking in another BottomTabNavigatorTab

2 Answers2