How to send data to the parent page using React Native Navigation (v5)?

Question

I'm using https://reactnavigation.org/ (version 5.0.1) in my project with GraphQL Apollo client.

I have a page with a form where the user needs to select some options from a list.
In the first page, I have a button with this code:

props.navigation.navigate('SelectTagsPage', {
            onSelect: (selectedIds) => {
              // update the form state
              setTagsIds(selectedIds)
            },
          });

On the tags page I have this:

const { onSelect } = props.route.params;

//...

<Button onPress={() => { onSelect(ids) }}>

So, basically I'm passing a function when calling the navigation.navigate, and I'm executing this function to send data back to the initial screen.

This is working very well, however when I open the TagsPage I'm getting this warning:

We found non-serializable values in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params

If passing a function in the params is a problem, what is the best way to achieve the same functionality of sending data from a page to the parent page and solve this warning message?

satya164 satya164 · Accepted Answer · 2020-02-21T21:17:30

You can pass them as params:

navigation.navigate('NameOfPreviousScreen', { selectedIds });

When you navigate to a previous screen, it acts like goBack, but also passes any params you want.

https://reactnavigation.org/docs/en/params.html

How to send data to the parent page using React Native Navigation (v5)?

1 Answers