React Native Pass properties on navigator pop

Question

I'm using NavigatorIOS on my react native app. I want to pass some properties when navigating back to previous route.

An example case: I'm in a form page. After submitting data, I want to go back to the previous route and do something based on the submitted data

How should I do that ?

Answer 1

Could you pass a callback func on the navigator props when you push the new route and call that with the form data before you pop to the previous route?

Answer 2

Code sample showing how to use a callback before pop. This is specifically for Navigator and not NavigatorIOS but similar code can be applied for that as well.

You have Page1 and Page2. You are pushing from Page1 to Page2 and then popping back to Page1. You need to pass a callback function from Page2 which triggers some code in Page1 and only after that you will pop back to Page1.

In Page1 -

_goToPage2: function() {
  this.props.navigator.push({
    component: Page2,
    sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
    title: 'hey',
    callback: this.callbackFunction,
  })
},

callbackFunction: function(args) {
  //do something
  console.log(args)
},

In Page2 -

_backToPage1: function() {
  this.props.route.callback(args);
  this.props.navigator.pop();
},

The function "callbackFunction" will be called before "pop". For NavigatorIOS you should do the same callback in "passProps". You can also pass args to this callback. Hope it helps.

Answer 3

You can use AsyncStorage, save some value on child Component and then call navigator.pop():

AsyncStorage.setItem('postsReload','true');
this.props.navigator.pop();

In parent Component you can read it from AsyncStorage:

async componentWillReceiveProps(nextProps) {
    const reload =  await AsyncStorage.getItem('postsReload');
    if (reload && reload=='true')
    {
       AsyncStorage.setItem('postsReload','false');
       //do something
    }
  }