Send props on navigation goBack

Question

Basically I have three screens, the first is a stack navigator:

const stackNav = createStackNavigator({
    Main: {
        screen: MainScreen,
        navigationOptions:({navigation}) => ({
            header: null,
        })
    },
    Detail: {
        screen: DetailScreen,
        navigationOptions: (props) => ({
            title: "Detail",
        })
    }
})

The second one I have a button to go to the Detail screen:

<TouchableOpacity onPress={() => this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle})}>

The last one is just information, I would like to click a button and execute: this.props.navigation.goBack(), but sending props to the second screen (MainScreen), a setState and a integer id, how can I do that?

--EDIT WITH PARAMS--

I have this function in MainScreen:

handleOrdem(texto) {
    console.log('texto: '+texto)
    this.setState({
        param: global.ordemAtiva,
        ordemAtiva: !this.state.ordemAtiva
    });
}
//The onPress code:
onPress={() => this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle, ordemFunc: () => this.handleOrdem()})}>

and this is how I call it in Detail.screen:

execBack(param){
    console.log('param: '+param);
    this.props.navigation.state.params.ordemFunc(param);
    this.props.navigation.goBack();
}
//Button to do it
onPress={() => this.execBack('test')}

Answer 1

Create a Method in parent screen

returnData(){
    PERDROM_EVENT_WITH_RECEIVED_DATA
}

Then bind this method returnData with navigation code while executing navigation code

this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle , returnData: this.returnData.bind(this)})}

In child Component call returnData method before call of goBack()

this.props.navigation.state.params.returnData(RETURN_DATA_YOU_WANT);
this.props.navigation.goBack();

Handling return data

Suppose you want two parameters back then add two parms in returnData() method

For example we took first param is boolean and second param String

 returnData(flag,id){
    USE THIS `flag` and `id` to update state or method call or 
    What ever you wanted too.
}

And inside Child component pass these two param

 this.props.navigation.state.params.returnData(VALUE_OF `flag`, Value of `id`);

FOR EDIT WITH PARAMS

replace your code of navigation with this line

this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle, ordemFunc: this.handleOrdem.bind(this)})>

You have to bind method not to call with arrow function

So the problem is

ordemFunc: () => this.handleOrdem()

Replace this line with

ordemFunc: this.handleOrdem.bind(this)

Answer 2

I came across this exact same issue and the problem is actually quite simple. We will utilise a callback for passing the params when we trigger goBack()

For example lets say I have two Views: ViewA and ViewB. For which I will do as follows:

1. import useNavigation hook for setting up navigation.
2. When navigating to the next screen pass a callback ie: function with the specified paramaters for the values you would like to pass back to ViewA.
3. In ViewB use the route prop to get access to the params. In here you will find your callback.
4. Use your callback and pass in the correct arguments to your callback.
5. Call the navigation.goBack() to return to ViewA

6. In ViewA you will now have access to your value in your callback.

   import React from "react";
   import { View, Button } from "react-native";
   import { useNavigation } from "@react-navigation/native";
   
   const ViewA = () => {
     const navigation = useNavigation();
     return (
       <View>
         <Button
           onPress={() =>
             navigation.navigate("ViewB", {
               handleItem: (item) => console.log(item), // will log out "Your Item"
             })
           }
         />
       </View>
     );
   };
   
   const ViewB = ({ route }) => {
     const navigation = useNavigation;
     return (
       <View>
         <Button
           onPress={() => {
             route.params.handleItem("Your Item");
             navigation.goBack();
           }}
         />
       </View>
     );
   };