CODEWITHSUNDEEP
react-nativereact-navigationstack-navigator
Osvaldo Margato
Osvaldo Margato

Reputation: 35

Reset StackNavigator inside createBottomTabNavigator on tabBarOnPress

I have this structure:

bottomTabNavigator:

When the user navigates to Screen B, then goes to Screen 1 and go back to Screen 2, he goes directly in B, how can I reset the stack using the tabBarOnPress function to force the user to go back to A?

I'm using react-navigation 3.0.9, I tried a few codes but I got errors and I think it is due to the version.

My code structure:

const Navigator = createBottomTabNavigator({
        Screen1: {
            screen: Screen1,
            navigationOptions: () => ({
                tabBarOnPress...
            })
        },
        Screen2: {
            screen: Screen2,
            navigationOptions: () => ({
                tabBarOnPress...
            })
        }
})

Upvotes: 2

Views: 2593

Answers (4)

Okan SARICA
Okan SARICA

Reputation: 327

In the new version, you can use the unmountOnBlur option for the screen. There is a little code sample:

<NavigationContainer>
    <Tab.Navigator tabBarOptions={{
        activeTintColor: ThemeConstants.mainColor,
    }}>
        <Tab.Screen name="Categories" component={CategoriesStackScreen}
                    options={{
                        unmountOnBlur:true
                        tabBarLabel: translate('Categories'),
                        tabBarIcon: ({color, size}) => (
                            <Icon  style={[{color: color}]} type='MaterialIcons' name='restaurant-menu'/>
                        ),
                    }}
        />
        <Tab.Screen name="Info" component={InfoStackScreen}
                    options={{
                        unmountOnBlur:true,
                        tabBarLabel: translate('Info'),
                        tabBarIcon: ({color, size}) => (
                            <Icon  style={[{color: color}]} type='MaterialIcons' name='info-outline'/>
                        ),
                    }}
        />
        <Tab.Screen name="Account" component={AccountStackScreen}
                    options={{
                        unmountOnBlur:true,
                        tabBarLabel: translate('Account'),
                        tabBarIcon: ({color, size}) => (
                            <Icon style={[{color: color}]} type='Feather' name='user'/>
                        ),
                    }}/>
        <Tab.Screen name="CartStackScreen" component={CartStackScreen}
                    options={{
                        unmountOnBlur:true,
                        tabBarBadge: (quantity && quantity>0)?quantity:null,
                        tabBarLabel: translate('Cart'),
                        tabBarIcon: ({color, size}) => (
                            <Icon  style={[{color: color}]} type='Feather' name='shopping-cart'/>
                        ),
                    }}
        />
    </Tab.Navigator>
</NavigationContainer>

And there is the link that describes the property https://reactnavigation.org/docs/bottom-tab-navigator/

Upvotes: 3

Muhammad Numan
Muhammad Numan

Reputation: 25413

Solution 1:

import {  StackActions } from '@react-navigation/native';
   
if(this.props.navigation.canGoBack())
{
    this.props.navigation.dispatch(StackActions.popToTop());
}

Solution 2:

use unmountonblur props in tab screen like this

<Tab.Navigator
    >
      <Tab.Screen
        name='User'
        component={ProfileModule}
        options={{ unmountOnBlur: true }}
      />
    </Tab.Navigator>

Upvotes: 0

Bastien
Bastien

Reputation: 131

So there is already a response, but this one could help some people. You can use the property of createBottomTabNavigator, resetOnBlur and set it up at true. It is in false at default and because of that, it always save the state in each tab navigator.

Upvotes: 2

Michael Ostrovsky
Michael Ostrovsky

Reputation: 629

As given by the explanation here. you can do a reset action when clicking a tab like this:

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

So you should do something like:

tabBarOnPress{() => StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Screen1' })],
})};

Upvotes: 0

Related Questions