I have a screen with form. Now in that form there's a button that opens another screen where user selects the target option and upon selection they're navigated back to the original form (stack navigator), the reasoning is that user can also create a new option there so they go to the same UI as they would if editing options separately (which they can).
My code below solution works, but I get following warning:
Non-serializable values were found in the navigation state. This canbreak usage such as persisting and restoring state. This might happenif you passed non-serializable values such as function, classinstances etc. in params. If you need to use components with callbacksin your options, you can use 'navigation.setOptions' instead. Seehttps://reactnavigation.org/docs/5.x/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-statefor more details.
Now that link suggests to use setOptions
however that is more for like adding a button to header, which is not the case, user selects the option in the target screen by clicking on the option.
Here are important parts of the code:
// MAIN FORM SCREEN<Button title={"Some Title"} onPress={openSelectItem}></Button>const openSelectFish = () => { return navigation.navigate("ItemList", { sendItemBack: true, onGoBack: onSelectItem });};const onSelectItem = (item: ItemDTO) => { setItem(item.name); // basic useState};// THE OPTIONS SCREENconst onChooseItem = (item: ItemDTO) => { console.log(this); if ((typeof route !== "object") || (typeof route.params !== "object")) return; if (!route.params.sendItemBack ?? true) return; route.params.onGoBack(item); return navigation.goBack();};// onChooseItem is then used in onPress of each option
Is there a better way how to send callback to the other screen?