7

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 ?

5 Answers 5

2

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();
  };
...
Sign up to request clarification or add additional context in comments.

4 Comments

Got warning when passing function as parrams.
navigation.state is undefined. What am I doing wrong?
It's this.props.route.params. Answer from: stackoverflow.com/a/61261000
2

I did this way:

onPress={() => {
    // Pass and merge params back to home screen
    navigation.navigate({
        name: 'Home',
        params: { post: postText },
        merge: true,
    });
}}

It was extracted from: https://reactnavigation.org/docs/params#passing-params-to-a-previous-screen

Comments

1

I think the bottom line is you can't use goBack() to pass params at all, you have to use navigate() to pass params.

But then you have to calculate the previous route, which I don't think anyone has mentioned how to do yet. Here is what worked for me:

// get previous route
const routes = navigation.getState().routes;
const previousRoute = routes[routes.length - 2];

// navigate to previous route with param functionality
navigation.navigate({
  name: previousRoute?.name ?? "",
  params: {
    someParam
  },
  merge: true // merge new params with previous page params
});

Comments

0

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>

Comments

-1

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();

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.