how to destroy a screen after navigating from it in StackNavigator

Question

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?

Answer 1

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'
  }
);