CODEWITHSUNDEEP
react-nativereact-navigation
izikandrw
izikandrw

Reputation: 1873

how to destroy a screen after navigating from it in StackNavigator

Using react navigation. I have a StackNavigator 

const Stack = StackNavigator( // eslint-disable-line new-cap
    {
      List: {
        screen: DrugPage,
      },
      Create: {
        screen: DrugCreate,
      },
    },
    {
      initialRouteName: 'List',
    }
  );

The first screen is a list of entities and the second screen is to create a new entity that will add to the list. The first List screen has a nice link to 'Add Entity' in the navigation bar which goes to the Create route. After creating the entity I use navigation.navigate to go back to the List route. This leaves the create entity screen on the stack and so then a back button appears in the nav bar on my list screen. I don't want the Create Entity screen to remain in the stack after the entity is successfully created--I want it destroyed so Create screens don't build up in a stack that I don't need and so I don't have a back button I don't want on the List screen. I thought about using a StackNavigator but that doesn't give you a nice navbar at the top (in iOS). Any recommendations?

Upvotes: 6

Views: 19182

Answers (4)

Timcu Alexei
Timcu Alexei

Reputation: 290

The easiest way is to use pop(), then you navigate to main screen

navigation.pop();
navigation.navigate('List')

Upvotes: 4

Ovidiu Cristescu
Ovidiu Cristescu

Reputation: 1043

https://reactnavigation.org/docs/navigation-actions#reset

Based on the answers above, with little improvements this is what worked for me:

import { CommonActions } from '@react-navigation/native';

const SplashScreen = () => {
  const isFocused = useIsFocused();
  const navigation = useNavigation();

  ...

  useEffect(() => {
    if (!isFocused) {
      navigation.dispatch(state => {
        const routes = state.routes.filter(item => item.name !== 'SplashScreen');

        return CommonActions.reset({ ...state, routes, index: routes.length - 1 });
      });
    }
  }, [isFocused, navigation]);

  ...

  return ...
}

Upvotes: 0

Luan M Gepfrie
Luan M Gepfrie

Reputation: 469

I had a problem very similar to yours, and after days searching I was able to solve my problem by adding a line of code, which in my case destroys the screen as soon as it leaves it.

add this to the properties of drawerNavigator : unmountInactiveRoutes: true

follows an example of my code :

const drawMenu = createDrawerNavigator({
   StackHome,
   StackOS
},{
   unmountInactiveRoutes: true,
   initialRouteName: 'StackHome'
  }
);

Upvotes: 10

izikandrw
izikandrw

Reputation: 1873

I used the reset action in NavigationActions per @Pritish Vaidya's comment on my original question. (https://reactnavigation.org/docs/navigation-actions#reset)

Implementation

const resetAction = NavigationActions.reset({
          index: 0,
          actions: [NavigationActions.navigate({routeName: 'List'})],
          key: null,
        });

navigation.dispatch(resetAction);

Upvotes: 6

Related Questions