How to pass the parameter with pop in wix react-native-navigation?

Question

how to pass parameters in pop method.

Requirement: There are two screens, screen 1 has two tabs like this: Address and Billing. There are two button on each tab layout. On click button go to screen 2 after functionality back to screen 1 but now which tab is active. If go to address tab so back to address tab same as billing tab.

Tell me how to do it?

How you implement the tab feature . Did you use any package like "react-native-tab-view" for it ? — Ajith, Dec 10 '19 at 09:52

score 1 · Accepted Answer · answered Dec 10 '19 at 09:00

You can pass callback while pushing screen like

Navigation.push(this.props.componentId, {
  component: {
    name: "Your.ScreenName",
    options: {
      callback:this.yourCallBackFun
    }
  }
});

Now while pop you can call that function like

this.props.callback();
Navigation.pop(this.props.componentId);

I think it will help you.

score 0 · Answer 2 · answered Dec 10 '19 at 10:31

0

Screen A:

this.props.navigation.navigate('ScreenB', {func: this.func});
...
func = value => {
  console.log(value);
}

Screen B:

this.props.navigation.getParam('func')();

You can call ScreenA function like this.

answered Dec 10 '19 at 10:31

Shing Ho Tan

931
11
30

score 0 · Answer 3 · answered Jan 31 '20 at 10:08

Screen1:

Write your navigation function and callback function in your first screen. Pass callback function as a navigation parameter white pushing the screen.

const cbFunction = () => new Promise((resolve) => {
  resolve();
});

const navigation = () => {
  const { componentId } = this.props;
  Navigation.push(componentId, {
    component: {
      name: `SCREEN_NAME`,
      options: {
        cbFunction: this.cbFunction
      }
    }
  });
}

Screen2:

Write a function to go back to first screen. And call callback function from navigation parameter.

const goBack = async () => {
  const { cbFunction, componentId } = this.props;
  await cbFunction();
  Navigation.pop(componentId);
}

How to pass the parameter with pop in wix react-native-navigation?

3 Answers3