[WARN] Non-serializable values were found in the navigation state

[zhafri-shafiq]

on Filter screen, onNavigateLocation() and onNavigateArea() are passing function setLocation() and setArea() in navigation, which triggered warning:

WARN Non-serializable values were found in the navigation state. Check: ChooseLocation > params.onApply (Function) This 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.

Is there any workaround or solutions that i can do to achieve expected behavior? And i would not disable the warning because, i might have deep link later on which could break the state persist.

[eldano1995]

I could tell you about my approach to that problem if you'd like @zhafri-shafiq

[zhafri-shafiq]

@eldano1995 yes please tell me. this will help other people that may come here to find solution as well

[eldano1995]

@eldano1995 yes please tell me. this will help other people that may come here to find solution as well

The solution we came up with applies to all screens that are like ChooseLocation (screens with a list of items, where you select one, and the a callback function is called when pressing on apply). The solution involves using Redux. Esencially:

• Make the button that takes you to the ChooseLocation screen a separated component, in it's own file
• The button will receive as prop the callback function (and also the list of items and any other props you need)
• Create a reducer "filter_list", that stores the selected value in the screen (might be the whole item, or simply an ID, or the index in the list of items)
• Connect the button component to the "filter_list" reducer (the selected value).
• Create an useEffect inside the button component that has the selected value as a dependency. Whenever it changes (because a new one was selected), call the actual callback function, and dispatch another action that resets the "filter_reducer" state to it's initial state (which should be an invalid selection value: something like -1 if you are storing the index of the selected item)
• When "Apply" button is pressed (on when ever you'd like to apply the change), dispatch an action that stores the selection. That action will be handled by "filter_list" reducer. Then do navigation.goBack()

I think that's it. Any doubts, leave a comment. Sorry if I didn't explain it well.

[eldano1995]

I've got another solution, that might not be that "fancy"

[zhafri-shafiq]

@eldano1995 basically moving the setter function from component to redux? I get it. I think this is considered solved for this issue. I just had a different scenario, example: a tv shows has many seasons. in tv show detail screen, there is a button to a list of seasons. currently, I passed the setter function in navigation to the list of seasons, and call that function when navigating back. which would throw this warning. I could move it to redux, but there will be a lot of tv shows. so, I just don't think that would be okay. what do you think?

anyway, thank you for your concern. I am closing this issue.

[eldano1995]

@eldano1995 basically moving the setter function from component to redux? I get it. I think this is considered solved for this issue. I just had a different scenario, example: a tv shows has many seasons. in tv show detail screen, there is a button to a list of seasons. currently, I passed the setter function in navigation to the list of seasons, and call that function when navigating back. which would throw this warning. I could move it to redux, but there will be a lot of tv shows. so, I just don't think that would be okay. what do you think?

anyway, thank you for your concern. I am closing this issue.

Why wouldn't that be OK?? Give me details about the concern, to see if there's something I'm missing, or to help you out if that's not the case.