CODEWITHSUNDEEP
react-nativereact-navigation
user8435607
user8435607

Reputation:

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

Scenario:

  1. Navigate: Screen 'StoreCategories' --> Screen 'QRScanner'
  2. Back press while at Screen 'QRScanner' redirect to Screen 'StoreCategories' working perfectly
  3. Navigate: Screen 'QRScanner' --> Screen 'Options' and
  4. Navigate: Screen 'Options' --> Screen 'QRScanner' again
  5. 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
}
);

Upvotes: 1

Views: 500

Answers (2)

rabbit87
rabbit87

Reputation: 3205

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

Upvotes: 1

Ali SabziNezhad
Ali SabziNezhad

Reputation: 3118

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

Upvotes: 1

Related Questions