How to pass a function to another screen in react native?

Question

JavaScript

Hello. I am passing a function to another screen via props. But I get a warning. How can I pass the function correctly so that there is no warning?
I pass the function like this (change_item_of_list_DATA function):

onPress={() => navigation.navigate('Screen_3', {item: item, func1: change_item_of_list_DATA})}

This warning is issued:

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

Screen_3 > params["func1"] (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-native\Libraries\LogBox\LogBox.js:117:10 in registerWarning
at node_modules\react-native\Libraries\LogBox\LogBox.js:63:8 in warnImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn
at node_modules\expo\build\environment\react-native-logs.fx.js:18:4 in warn
at node_modules\@react-navigation\native\node_modules\@react-navigation\core\src\BaseNavigationContainer.tsx:348:14 in React.useEffect$argument_0
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15561:31 in commitHookEffectListMount
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15618:35 in commitPassiveHookEffects
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18795:29 in flushPassiveEffectsImpl
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18647:29 in scheduleCallback$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:597:41 in workLoop
at node_modules\scheduler\cjs\scheduler.development.js:552:23 in flushWork
at node_modules\scheduler\cjs\scheduler.development.js:42:17 in _flushCallback
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16 in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue

Answer 1

In general, no way.
If your function does not contain closures and does not bind anything, but depends only on parameters and public global values, then you can serialize it into a string, pass this string to another screen, and then parse

function func(a) { console.log('***', a); }
const funcStr = func.toString();
...
const parsedFunc = Function('return ' + funcStr)();
parsedFunc(12); // в консоли: *** 12

Well, if you created a function that contains closures to some values, then these values ​​must be passed in separate props. It will not be possible to serialize the function (or rather, it will not be possible to parse it back), and in general, most likely, it will actually be more correct to import it. The trick with passing a function is relevant if, depending on some data, you want to transfer exactly some algorithm