10

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?

Victor
  • 5,043
  • 3
  • 41
  • 55

1 Answers1

6

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

satya164
  • 9,464
  • 2
  • 31
  • 42
  • It makes sense, but when using `navigate` does it adds this page in the navigation stack? Like, I'll have `Home` -> `Tags` -> `Home` in the navigation state, ,right? I thought that using `props.navigation.goBack()` was meant to remove the page from the stack – Victor Feb 21 '20 at 21:34
  • 1
    If you have `Home` -> `Tags` and do `navigate('Home')`, you'll just have `Tags`. It behaves like `goBack` because there was already a `Home` screen, so it goes back to it instead of adding a new screen. – satya164 Feb 21 '20 at 21:40
  • @satya164 On the home screen, how can we access the "selectedIds"? I know we can access it through route parameters. But need an example of how to achieve it. – Satyam Apr 20 '21 at 10:22