React navigation unable to navigate to just pervious screen after navigating multiple screens

Question

Scenario:

Navigate: Screen 'StoreCategories' --> Screen 'QRScanner'
Back press while at Screen 'QRScanner' redirect to Screen 'StoreCategories' working perfectly
Navigate: Screen 'QRScanner' --> Screen 'Options' and
Navigate: Screen 'Options' --> Screen 'QRScanner' again
Click on back while at Screen 'QRScanner' redirect to Screen 'StoreCategories' again

Not redirecting to its previous Screen 'Options'.

Everything happens with default back functioning in react-navigation, I am not using any custom function for back functioning.

How can I resolve it and navigate to just previous from redirection happens rather than already cached screen in react-navigation(V2)?

const StackNavigator = defaultRoute =>
createStackNavigator(
{
  CustomerLogin: {
    screen: CustomerLogins
  },
  MerchantLogin: {
    screen: MerchantLogin
  },
  Profile: {
    screen: Profile
  },
  OtpVerification: {
    screen: OtpVerification
  },
  StoreOffers: {
    screen: StoreOffers
  },
  StoreCategories: {
    screen: StoreCategories
  },
  QRScanner: {
    screen: QRScanner
  },
  MerchantHome: {
    screen: MerchantHome
  },
  CustomerHome: {
    screen: CustomerHome
  },
  ThankYou: {
    screen: ThankYou
  },
  Detail: {
    screen: Detail
  },
  Options: {
    screen: Options
  },
  PayOnline: {
    screen: PayOnline
  },
  PayCash: {
    screen: PayCash
  },
  PayTm: {
    screen: PayTm
  },
  Token: {
    screen: Token
  },
  AddDiscount: {
    screen: AddDiscount
  },
  CustomerHistory: {
    screen: CustomerHistory
  },
  Webview: {
    screen: Webview
  },
  Direction: {
    screen: Direction
  }
},
{
  initialRouteName: defaultRoute
}
);

Can you show the code that you use to navigate to another screen? Is it the navigate function? — rabbit87, Jul 23 '18 at 09:44

score 1 · Answer 1 · answered Jul 23 '18 at 10:05

1

if You want to navigate to back screen, you can use this code:

this.props.navigation.goBack()

by navigate to Main it will redirect to initial route of Main and it seems to be A

answered Jul 23 '18 at 10:05

Ali SabziNezhad

3,050
1
17
31

score 1 · Accepted Answer · answered Jul 23 '18 at 10:09

The way the current React-Navigation's navigate function works is a bit different then how they work previously. Currently if you navigate to a screen that is already in the screen stack, the system would go back to that screen (removing the other screens between the current screen and that screen will be remove) instead of simply adding a new screen to the stack.

If you want to use the old system style, you can use push instead of navigate. This would simply add to the stack instead of going back to the last one (if exist in the stack).

So rather than use

const {navigate} = navigation;
navigate(nextScreen, params);

you use

const {push} = navigation;
push(nextScreen, params);

Thanks, it's working perfectly after changing navigate to push https://stackoverflow.com/questions/51090135/react-navigation-v2-difference-between-navigation-push-and-navigation-navigate — , Jul 24 '18 at 09:30
https://stackoverflow.com/questions/51090135/react-navigation-v2-difference-between-navigation-push-and-navigation-navigate — , Sep 20 '18 at 09:36

React navigation unable to navigate to just pervious screen after navigating multiple screens

2 Answers2