React Navigation passing function as parameter

Question

so i have lot of screen that have similar function eg:

1. ForgotPasswordCaptcha
2. ForgotUserIDCaptcha
3. RegisterCaptcha

these screens have same layout and functionality except they have different "Next" Button function in ForgotPassword users will be redirected into loginscreen, in ForgotUserID the user will be redirected into page that shows his userID. and in Register it will redirect user to Succes Page. .

so the function that i create in navigator is handleOkay, and when i press the button in SomeReusableScreen it gives me this warning

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

forgotUserIDStackScreen > FUinputCASAScreen > params.handleOkay (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. 

what i want to achieve is i to pass function as parameter in Stack navigator so the screen will just invoke that function to redirect/doing something with redux,

i dont know i should ignore this warning since in other screens it will handle redux sagas, set asyncstorage

Answer 1

so i have found the way to do what i wanted.

instead of passing the screen as component in Stack.Screen i pass it as child like this

<Stack.Screen
          initialParams={{progress: 0.2}}
          name={routes.nameofthisroute}
          options={({navigation, route}) => ({
            headerTitle: props => {
              let currentProps = {navigation, route};
              return <NavigationHeaderTwo {...currentProps} />;
            },
            ...otherStyle,
          })}>
          {props => (
            <PickMethodScreen handlePickMethod={handlePickMethod} {...props} />
          )}
        </Stack.Screen>

and i props some function and state from Stack Navigator and its written in this docs here

we can also create react context so component can consume it without having lot of props

Answer 2

I implemented a very simple example to clear the concept. You can pass function as a prop and can dispatch up to the parent component using the same props key. This way you can utilize reusable component.

//consider this your generic Component
function IButton(props){
  //receive the method as props
  //dispatch the method back to the parent
  return (
    <button onClick={()=>props.handleClick('hello')}>click me </button>
  )
}
const App=()=>{
   function handleOnClick(text){
       alert(text);
   }
  return(
    <div>
       {/*pass the function as Prop*/}
      <IButton handleClick={handleOnClick}/>
    </div>
  )
  
}
  ReactDOM.render( < App / > , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>