How to pop to the previous screen with params?

Question

I'm on screen A which has current state of {key:'value'} , I navigated to screen B

now I'm trying to pop from screen B to screen A again , but I don't want to lose the current state in screen A {key:'value'}

some solution is to save data in the AsynStorage , and retrive it when coming back to screen A , but that's not a good practice

.pop() do it , but what if I need to go back with additional params ?

Navigation.pop(this.props.componentId, {
  passProps: {
    data: "current",
    more: "just-example",
  },
});

the above code, did not work

any suggestions ?

I don't use any state management tool like Redux/Mobx ..

`the above code , did not work` what do you mean? Did it got an error? — Vencovsky, Apr 24 '19 at 12:22
@Vencovsky , no it popped up to the previous screen but without the any passed params — Ahmed Mohsen, Apr 24 '19 at 12:26
I use `react-navigation` over `react-native-navigation` so I don't know if this is possible. When you navigate to the child page, you can simply parse something like: `navigate('somePage', { parent: this } )` in which case you can then access the parent from the child by calling `this.props.blah.blah.parent` this may be a work around for you. — , Apr 24 '19 at 12:26

score 7 · Answer 1 · answered Apr 24 '19 at 13:06

I found a good solution is to send a callback function with the params

in screen A

  getback(success)
  {
      alert(success);
  }

  Navigation.push(this.props.componentId , { component : {
         name : "Payment",
         passProps: {
         subscription : current,
         getback: this.getback
       },
   }});

then in screen B , when you pop to screen A fire the getback function

Navigation.pop(this.props.componentId);
this.props.getback(true);

this worked well with me

does getback method need wrapped by useCallback? – famfamfam Jun 21 '22 at 03:08 — famfamfam, Jun 21 '22 at 03:08

score 2 · Answer 2 · edited Sep 12 '22 at 12:47

2

If the reason why you wanted navigation.pop is the animation, I have news for you: just use navigation.navigate!

When using the card presentation (for example), doing, from screen B, navigation.navigate(screenA_Id, options), works like navigation.pop

edited Sep 12 '22 at 12:47

Dhia Djobbi

1,176
2
15
35

answered Sep 07 '22 at 08:55

Leonardo Trapani

115
2
9

marquesm91 · Answer 3 · 2019-04-24T13:06:17.813

I have been working on this and I achieved with react-navigation.

Basically, your component A will send to component B the navigation state of component A. So, For B point of view it will be the prevState before stacking B component.

So when component B navigates "back" to component A using the previous navigation state it was like your navigation state never changed and now you could use the second parameter of navigate to send params back to component A.

This simple example illustrate this practice and I think it is totally valid and no AsyncStorage usage.

// In Component A use a custom prevState when goes to Component B
const { navigation } = this.props;

navigation.navigate('ComponentB', { prevState: navigation.state });

// In Component B use this custom goBack to "pop" to last screen
function goBack(data) {
  const { navigation } = this.props;

  const { routeName, key } = navigation.getParam('prevState');

  navigation.navigate({ routeName, key, params: data });
}

// And finally in Component A again you could get data like this
function getDataFromComponentB() {
  const { navigation } = this.props;

  // It is null if no parameters are specified!
  return navigation.state.params;
}

I never worked with `react-native-navigation` and I am sorry to not provide a specific answer with this lib. Maybe my answer could inspire you to do the same as I do. — marquesm91, Apr 24 '19 at 12:46

score 0 · Answer 4 · answered Jun 08 '19 at 11:53

0

As Terrance suggested. you can use a callback in the props and fire it before pop back to the previous page

answer source: React Native Pass properties on navigator pop

answered Jun 08 '19 at 11:53

Ido Cohen

621
5
16

score 0 · Answer 5 · answered Jun 02 '21 at 11:02

I was working on similar thing which I wan't to popToTop and pass some params when I came back to top of the stack.

here how I did it in react navigation 5 :-

props.navigation.reset({ // I did reset my stack using navigation.reset() instead of using popToTop
      index: 0,
      routes: [
        {
          name: "Home", //name of screen which you wan't to come back to it
          params: { isDialogOpen: true }, // params you wanna pass to the screen
        },
      ],
    });

score 0 · Answer 6 · answered Aug 25 '23 at 02:01

0

Let me explain in deep Your stack now is [A, B, C] (current in C)

// make another A
navigation.push("A") // => [A,B,C,A]
// back to A with params
navigation.navigate(A, params) // => [A]
// just back
navigation.back() // => [A,B]

answered Aug 25 '23 at 02:01

HIếu Nguyễn

61
1
3

How to pop to the previous screen with params?

6 Answers6