Sending params with navigation.goBack in react navigation

Viewed 7837

hellow , how to send params navigation go back ?

const Onsubmit = (data, details = null) => {
    console.log(details.formatted_address);
    route.params.onPlaceChosen(
      route.params.id,
      details.formatted_address,
      details.geometry
    );
    navigation.goBack();
  };

here I want to pass the value from details.formatted_address to page B. How to ?

3 Answers

If you are navigating from Screen A to Screen B, and when you want to go back to Screen A with running a callback in again Screen A, below is what you need to do:

In your Screen A (Source)

...
const onPlaceChosen = (params) => {
    // here is your callback function
}

...
navigation.navigate('ScreenB', { onPlaceChosen })
...

In your Screen B (Destination)

..
const Onsubmit = (data, details = null) => {

    navigation.state.params.onPlaceChosen(
      route.params.id,
      details.formatted_address,
      details.geometry
    );
    navigation.goBack();
  };
...

I did something like this based on https://reactnavigation.org/docs/5.x/hello-react-navigation/#passing-additional-props

const [params, setParams] = useState({});   

<Stack.Navigator>
  <Stack.Screen name="One">
  {props => <FirstScreen {...props} paramsFromTwo={params} />}
  </Stack.Screen>  

  <Stack.Screen name="Two">
  {props => <SecondScreen {...props} onGoBack={(paramsFromSecond} => setParams(paramsFromSecond)} />}
  </Stack.Screen>  
</Stack.Navigator>

In my case, using navigation and route passed by props, the solution was:

route.params.onFilter({
    route.params.id,
    details.formatted_address,
    details.geometry
});
navigation.goBack();
Related