go two screen back with single press event using react-navigation in react native app

Question

I am using reactnavigation component from https://reactnavigation.org and using the code below i am going one screen back

<Button
          onPress={() => goBack()}
          title="Go back from this HomeScreen"
        />

how can i go 2 screen back on single press action

I am using this code to initialize the navigator

const RouteConfigs = {
    Login: {screen:Login},
    Home: {screen:Home},
    Chat: {screen:Chat},
    Facebook: {screen:Facebook},
    Facebookgallery: {screen:Facebookgallery}    
}

const StackNavigatorConfig = {
    headerMode: 'none',
}

export default StackNavigator(RouteConfigs, StackNavigatorConfig)

I navigate from home to Facebook with this code :

() => this.props.navigation.navigate('Facebook', {user:this.state.user})

and from Facebook to Facebookgallery with this code :

onPress={ () => this.props.navigation.navigate('Facebookgallery', {user:this.state.user}) }

now i want to go back from Facebookgallery to Home directly with some parameters

Vincent · Answer 1 · 2019-10-31T19:25:50.787

45

I know it's an older question but what I use is:

navigation.pop(n);

Takes you to the previous screen in the stack. If you provide a number, n, it will specify how many screens to take you back within the stack. https://reactnavigation.org/docs/en/navigation-prop.html

edited Oct 31 '19 at 19:25

answered Sep 17 '19 at 23:45

Vincent

745
10
21

Thanks. best answer – Muhammad Aamir Ali Oct 29 '19 at 18:40

score 14 · Answer 2 · answered Oct 01 '20 at 18:40

14

you can use navigation.pop(screenCount) with screenCount as integer

navigation.pop(2)

here is for refference

https://reactnavigation.org/docs/stack-actions#pop

answered Oct 01 '20 at 18:40

Khadam Ikhwanus

302
2
10

bychung · Answer 3 · 2021-02-01T01:36:01.290

9

React Navigation is updated not to use pop function directly, use dispatch function with StackActions.

navigation.dispatch(StackActions.pop(2));

edited Feb 01 '21 at 01:36

answered Jan 29 '21 at 09:35

bychung

93
1
4

1

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Jon Jan 29 '21 at 16:27
2

It's not a special answer, just updated with Khadam Ikhwanus' answer as you know if you see the all the answer of this thread ;) Because React Navigation is recently updated not to use 'pop' function directly, but use 'dispatch' function with StackActions. – bychung Feb 01 '21 at 01:33

score 2 · Answer 4 · answered Nov 19 '19 at 16:09

navigation.navigate({ routeName: SCREEN, key: SCREEN_KEY_A });
navigation.navigate({ routeName: SCREEN, key: SCREEN_KEY_B });
navigation.navigate({ routeName: SCREEN, key: SCREEN_KEY_C });
navigation.navigate({ routeName: SCREEN, key: SCREEN_KEY_D });

Now you are on-screen D and want to go back to screen A (popping D, C, and B). Then you need to supply a key to goBack FROM:

navigation.goBack(SCREEN_KEY_B)

https://reactnavigation.org/docs/en/navigation-prop.html#going-back-from-a-specific-screen-with-goback

score 1 · Answer 5 · edited Sep 06 '22 at 13:50

You could define an additional navigation action type, e.g. POP_TWO_ROUTES and overwrite StackRouter.getStateForAction(passedAction, state) like that (only exemplary):

    ...
    const defaultGetStateForAction = AppNavigator.router.getStateForAction;

    AppNavigator.router.getStateForAction = (passedAction, state) => {
      if(state && state.routes && state.routes.length > 2
          && passedAction.type === 'POP_TWO_ROUTES') {
        let routes = state.routes.slice();
        routes.pop();
        routes.pop();

        return {
          index: routes.length - 1,
          routes: routes
        };
      }
      // default behaviour for none custom types
      return defaultGetStateForAction(passedAction, state);
    }
    ...

Then in your screen component you can do something like that:

    ...
    onPress={() => this.props.navigation.dispatch({
      type: 'POP_TWO_ROUTES' 
    })}
    ...

See also https://reactnavigation.org/docs/routers/#Custom-Navigation-Actions.

score 1 · Answer 6 · answered Jan 11 '18 at 15:30

The "proper" solution right now is:

Get the key for the screen after the screen you want to go to. In your case, you'll need to get the key for the Facebook screen.
Call NavigationAction.back(key: 'key-of-previous-screen'), and it will pop your navigation stack as if you were on the screen with that key

Code example where I go back multiple screens in a thunk (relevant if you use redux):

export const postItemAndReturnToMap = item => (dispatch, getState) => {
  const {nav} = getState();

  // Get the key for the screen after/above the root view and use that as reference
  // to return to the root view. This is hardcoded for my stack setup, as you can see
  // there are quite a few nested StackNavigators in my setup
  const {key} = nav.routes[0].routes[0].routes[0].routes[1];

  // Dispatch whatever action you want
  dispatch(postItem(item));

  // This will now go back multiple screens, in my case to the
  // bottom of the top stackNavigator
  return dispatch(NavigationActions.back({key}));
};

This isn't pretty. Let's hope react-navigation implements something like .back(2) to make things easier in the future.

score 1 · Answer 7 · answered Jun 27 '18 at 12:04

1

If you are using push then you can go to root screen with this

this.props.navigation.popToTop();

and to Push

this.props.navigation.navigate('SummaryScreen', {
    otherParam: 'anything you want here',
});

answered Jun 27 '18 at 12:04

Waseem Sarwar

2,645
1
21
18

score 0 · Answer 8 · answered May 10 '17 at 17:19

0

It sounds like you're looking for something along the lines of #reset (https://reactnavigation.org/docs/navigators/navigation-actions#Reset).

I haven't used this library, but you likely are trying to go back to the navigation stack's root screen. Other libraries I've used for nav have some sort of popToRoot or something similar.

answered May 10 '17 at 17:19

Skip Suva

915
5
9

no i cannot use this because in root i am using scroller and i need to go back to same scroller screen from where the navigation is originating. it works when do onPress={() => goBack()} 2 times on the two different screens but i need it go directly to 2 screen back as its happening when manually pressing back button – Abhishek Kumar May 10 '17 at 18:26
Reset wipes the entire stack and resets (recreates) all views that would reside underneath. This may work if the view you want to reset to is light and loads quickly, but if not, it doesn't provide a good user experience. – Kristfal Jan 11 '18 at 14:49

score 0 · Answer 9 · answered Mar 07 '18 at 05:29

0

Try this

onPress={() => {
    props.rootNavigation.dispatch(
      NavigationActions.reset({
        index: 0,
        key:null,
        actions: [NavigationActions.navigate({ routeName: 'Home' })]
      })
    )
}}

answered Mar 07 '18 at 05:29

coder2017

330
4
9

score 0 · Answer 10 · answered Apr 22 '21 at 13:15

0

This should work:

this.props.navigation.pop(2)

answered Apr 22 '21 at 13:15

Shreya B

305
2
14

score 0 · Answer 11 · answered Dec 29 '22 at 00:44

0

For React Native V6 2022

Simple Go Back "goBack"

navigation.goBack()

Go Back tow screen or 3 on specific the name "navigate"

props.navigation.navigate("RouteName")

Navigate to the top screen "popToTop"

navigation.popToTop()

answered Dec 29 '22 at 00:44

alexander ferreras

984
8
9

go two screen back with single press event using react-navigation in react native app

11 Answers11