title: Exposing state props from functional component to navigationOptions function
body: <p>I have a component that renders the input field, I want to pass the data to the next page when user clicks on "next" button in the header. What is the best practice for doing so? How do I expose this into <code>Page.navigationOptions</code>? </p>
  
  <p>Or is it best to just set up redux for these types of things?</p>
  
  <pre><code>const Page = () =&gt; {
    const [desc, getDesc] = useState('');
  
    return (
      &lt;View style={styles.inputFieldDescContainer}&gt;
        &lt;TextInput
          multiline
          placeholder='Write a description...'
          onChangeText={(text) =&gt; getDesc(text)}
          value={desc}
        /&gt;
      &lt;/View&gt;  
    );
  };
  
  // How do I pass desc properties down into navigationOptions?
  
  Page.navigationOptions = (navData) =&gt; {
    return {
      headerTitle: 'Page,
      headerRight: (
        &lt;HeaderButtons HeaderButtonComponent={HeaderButton}&gt;
          &lt;Item
            title='Next'
            onPress={() =&gt; {
              navData.navigation.navigate('NextPage', {data: navData});
            }}
          /&gt;
        &lt;/HeaderButtons&gt;
      ),
      headerBackTitle: null
    };
  };
  
  /* NextPage.js */
  
  const NextPage = (props) =&gt; {
    console.log('enter props data', props.navigation.getParam('data'));
    console.log('enter props navigation', props.navigation);
    const [valueText, setValueText] = useState();
    return (
      &lt;View&gt;
        &lt;TextInput onChangeText={(text) =&gt; setValueText(text)} value={valueText}/&gt;
        &lt;TouchableOpacity&gt;&lt;Text&gt;Create your workout&lt;/Text&gt;&lt;/TouchableOpacity&gt;
      &lt;/View&gt;
    );
  ;}
  </code></pre>