How to do the upgrade from navigation reaction 4 to navigation 5 in this simple code

Question

This is the code that I want to upgrade

This function:

function AddNotes({ navigation }) {
  const [noteTitle, setNoteTitle] = useState("");
  const [noteDescription, setNoteDescription] = useState("");

  function onSaveNote() {
    navigation.state.params.addNote({ noteTitle, noteDescription });
    navigation.goBack();
  }

Error in message:

undefined in not an object evaluting navigation.state.params

Error in console:

Non-serializable values were found 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 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.

node_modules\react-native\Libraries\YellowBox\YellowBox.js:71:8 in console.warn

node_modules\expo\build\environment\muteWarnings.fx.js:18:23 in warn

node_modules@react-navigation\core\src\BaseNavigationContainer.tsx:258:10 in React.useEffect$argument_0

node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16921:31 in commitHookEffectList

node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16970:29 in commitPassiveHookEffects

node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl

node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback

node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20061:28 in flushPassiveEffectsImpl

[native code]:null in flushPassiveEffectsImpl

node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority

node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19597:25 in scheduleCallback$argument_1

node_modules\scheduler\cjs\scheduler.development.js:482:68 in flushTask

node_modules\scheduler\cjs\scheduler.development.js:607:20 in flushWork

node_modules\scheduler\cjs\scheduler.development.js:58:18 in _flushCallback

node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer

node_modules\react-native\Libraries\Core\Timers\JSTimers.js:399:17 in callTimers

node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction

node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0

node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard

node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0

[native code]:null in callFunctionReturnFlushedQueue

Nostromo Nostromo · Accepted Answer · 2020-10-25T21:24:03

In React Navigation 5, you can access your callback functions in route.params

function AddNotes({ navigation, route }) {
  const [noteTitle, setNoteTitle] = useState("");
  const [noteDescription, setNoteDescription] = useState("");

  function onSaveNote() {
    const { params: { addNote } } = route;
    addNote({ noteTitle, noteDescription });
    navigation.goBack();
  }

How to do the upgrade from navigation reaction 4 to navigation 5 in this simple code

1 Answers