Sending Dynamically Changing Parameters from Functional Component to Navigation Options

In functional component’s navigation settings, we cannot take dynamically changing parameters directly from navigation data.

Suppose a functional component has a header button which takes information entered by user. In order to get the latest information given by the user, by using setParams() function, parameters can be passed to navigation options when user enters these values.

import React,{useState, useEffect, useCallback} from “react”;
import {TextInput} from “react-native”;
const foo = props => {
   const [name, setName]=useState(“”);
   const handlerFunc=useCallback(()=>{      
        //when header button is pressed
   },[name]) //never be recreated to avoid infinite loop
   useEffect(()=>      {props.navigation.setParams({handler:handlerFunc})},[handlerFunc]) 
  return(
     <View>
        <TextInput value={name} onChangeText  {(name)=>setName(name)}/> 
    </View>

In order to get the parameter from the component part use getParam()

foo.navigationOptions=navigationData=>{
const handler=navData.navigation.getParam(“handler”);
return {
   headerRight:(<HeaderButtons 
       HeaderButtonComponent= {YourHeaderButtonComponent}>
       <Item
          title=”save"
          onPress={handler} 
       />
   </HeaderButtons>)}