navigation.dispatch SET_PARAMS was not handled by any navigator

Question

I have 3 screens and I just want the last screen to modify the previous screen's params. Navigable like this:

Home -> Feature -> Settings

Home -> Feature has a data param, something like navigation.navigate("FeatureScreen", { data: data }).

Feature -> Settings is pretty straightforward, something like navigation.navigate("SettingScreen").

Settings screen itself is a standalone screen and it pulls some data and modify it, and now I want to update the data param in Feature screen via Settings's button action (i.e. button press will set/pass the data data back to previous screen).

This is a working example in Settings screen:

navigation.setOptions({
            headerLeft: () => (
                <Button
                    title="< Back"
                    onPress={() => {
                        // Pass and merge params back to home screen
                        navigation.navigate({
                            name: "FeatureScreen",
                            params: { data: newFullListOfData },
                            merge: true,
                        });
                    }}
                />
            )

It works but unfortunately, the downside is that it modifies the Back button which I am not keen.

I came across setParams, which allows me to call navigation.dispatch with type SET_PARAMS and no need to modify my Back button. This is the code I have now in Settings screen save button:

        const setParamsAction = CommonActions.setParams({
            data: newFullListOfData
        });

        navigation.dispatch(state => {
            const route = state.routes.find(route => route.name == "FeatureScreen")
            return ({ ...setParamsAction, target: route?.key })
        });

Which seems to be great BUT I am getting that dreaded red "The action 'SET_PARAMS' with payload {"params":my-data-here} was not handled by any navigator."

Given that I have provided the target route key, any idea why it is still not working? I printed out the data for state and route and it seems to be populated correctly with the data.

I am using React Navigation 6.x, functional components, and testing on iOS:

"@react-navigation/native": "6.1.6",
"@react-navigation/native-stack": "6.9.12",

Any help to try and resolve this is greatly appreciated.

Answer 1

Use source property to set params for a particular route.

navigation.dispatch((state) => {
  return {
    ...CommonActions.setParams({ ... }),
    source: state.routes.find(r => r.name == '?').key
  };
});

See setParams for details.