【ReactNative開発】画面遷移中にNon-serializable values were found in the navigation state のワーニングが発生する

こんにちは。今日もReact Nativeのトラブルシューティングは続きます。

前提

React Native + Type Script + Expo

画面遷移にはReact Navigationを利用

問題

画面遷移をしていると、以下の ワーニングが出てきました。

Non-serializable values were found in the navigation state. Check:

Search > SearchTheme > params.navigation.jumpTo (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. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.
at node_modules/@react-navigation/core/src/BaseNavigationContainer.tsx:344:14 in React.useEffect$argument_0
at [native code]:null in callFunctionReturnFlushedQueue

原因と解決方法

まず、以下のStack Overflowでヒントを見つけました。

https://stackoverflow.com/questions/66310505/non-serializable-values-were-found-in-the-navigation-state-when-passing-a-functi

そして、ここで紹介されているリンクを辿って、React Navigationの公式Docの見解に辿り着きました。

https://reactnavigation.org/docs/troubleshooting/#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state

この warningが出る理由はいくつも考えられるようですが、自分のケースの場合は、特に以下が当てはまりそうでした。Complex Dataとは？、となりますが、paramsとしてデータを引き継いでいくのでなく、Storeを利用することで解決できる、と書いています。

To pass complex data to another screen. Instead of passing the data params, you can store that complex data somewhere else (like a global store), and pass an id instead. Then the screen can get the data from the global store using the id. See what should be in params.

なるほど。 warningなので一旦後回しですが、今後store化してこのエラーが出なくなるか、試してみようと思います。勉強になりました！

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。