React Native Navigation: Remove screen from stack navigator

Question

I'm using React Navigation 5.

At the top I have a Drawer navigator, with the following screens:

  <Drawer.Navigator>
    <Drawer.Screen name="One" component={StackNavigatorOne} />
    <Drawer.Screen name="Two" component={StackNavigatorTwo} />
    <Drawer.Screen name="Three" component={StackNavigatorThree} />
  <Drawer.Navigator/>

Within StackNavigatorOne , I have a stack navigator,

<Stack.Navigator>
  <Stack.Screen name="Screen1" component={Screen1} />
  <Stack.Screen name="Screen2" component={Screen2} />
  <Stack.Screen name="Screen2" component={Screen3} />
</Stack.Navigator>

When user clicks StackNavigatorOne from the drawer, the user goes to Screen 1 of StackNavigatorOne . From Screen 1, the user is taken to Screen2 after a few seconds.

Once the user has reached Screen2 , I want to completely remove Screen 1 from StackNavigatorOne , so that the next time when user clicks StackNavigatorOne in drawer, there is no Screen1 now, and the user is directly taken to Screen2 . Is this possible? Can you please help?

Answer 1

Yes, since you are using React Navigation 5, you can render your stacks or screens conditionally. For example;

<Stack.Navigator>
 { !isScreenOneDisplayed && <Stack.Screen name="Screen1" component={Screen1} /> }
  <Stack.Screen name="Screen2" component={Screen2} />
  <Stack.Screen name="Screen3" component={Screen3} />
</Stack.Navigator>