title: How use formik from Header / navigationOptions and trigger handleSubmit onpress HeaderRight
body: <h3>the goal</h3>
  
  <p>pass params to navigation in order to get access to </p>
  
  <pre class="lang-js prettyprint-override"><code>onPress={props.handleSubmit}
  </code></pre>
  
  <p>within a simple react Natie app, 
  inside <code>#EditProductScreen.js</code> </p>
  
  <p>I have this pattern </p>
  
  <pre class="lang-js prettyprint-override"><code>//import
  import React, { useState, useEffect, useCallback } from 'react';
  ...
  import { Formik, ErrorMessage } from 'formik';
  import * as Yup from 'yup';
  ...
  
  //compnt
  const EditProductScreen = props =&gt; {
  ...
  }
  
  //Navigation
  EditProductScreen.navigationOptions = navData =&gt; {
  ...
  };
  
  //Style
  const styles = StyleSheet.create({
    form: {
      margin: 20
    },
  ...
  });
  
  export default EditProductScreen;
  </code></pre>
  
  <p>I saw these issue and answer but unfortunately can't figure out the correct way to what I need
  here the <a href="https://stackoverflow.com/q/56675671/7800866">issue</a>
  and here answer <a href="https://stackoverflow.com/users/2938974/jaredpalmer">jaredpalmer</a></p>
  
  <p>This link could also be very close to <a href="https://t.ly/Zb0mx" rel="nofollow noreferrer">the targeted pattern</a>
  however, no navigationOptions have been added to that example</p>
  
  <p>I have a serious issue (cause can't figure the NavigationOption setup with formik) to use trick you provide there
  here a screenshot that explains the goal
  <a href="https://i.stack.imgur.com/xloNe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xloNe.jpg" alt="enter image description here"></a></p>
  
  <h3>dive inside main cmpnt and Navigation</h3>
  
  <p><code>#cpnt</code></p>
  
  <pre class="lang-js prettyprint-override"><code>const EditProductScreen = props =&gt; {
     //some code 
     ...
  
    return (
      &lt;ScrollView&gt;
        &lt;Formik
          initialValues={{ title: title, email: '' }}
          validationSchema={Yup.object({
            title: Yup.string()
              .min(2, 'Too Short!')
              .max(50, 'Too Long!')
              .required('Required')
          })}
          onSubmit={(values, formikActions) =&gt; {
            submitHandler();
          }}
        &gt;
          {props =&gt; (
            &lt;View&gt;
              &lt;View style={styles.form}&gt;
                &lt;View style={styles.formControl}&gt;
                  &lt;Text style={styles.label}&gt;Title&lt;/Text&gt;
                  &lt;TextInput
                    // some code
                  /&gt;
  
                // some code
  
                &lt;/View&gt;
              &lt;/View&gt;
              &lt;Button
                title={'submit'}
                onPress={props.handleSubmit}
                color='black'
                mode='contained'
                loading={props.isSubmitting}
                disabled={props.isSubmitting}
                style={{ marginTop: 16 }}
              &gt;
                Submit
              &lt;/Button&gt;
            &lt;/View&gt;
          )}
        &lt;/Formik&gt;
      &lt;/ScrollView&gt;
    );
  };
  </code></pre>
  
  <p><code>#navigation</code></p>
  
  <pre class="lang-js prettyprint-override"><code>EditProductScreen.navigationOptions = navData =&gt; {
    const submitFn = navData.navigation.getParam('submit');
    return {
      headerTitle: navData.navigation.getParam('productId')
        ? 'Edit Product'
        : 'Add Product',
      headerRight: (
        &lt;HeaderButtons HeaderButtonComponent={HeaderButton}&gt;
          &lt;Item
            title='Save'
            iconName={
              Platform.OS === 'android' ? 'md-checkmark' : 'ios-checkmark'
            }
            onPress={submitFn}
            // here the challenge 
  
          /&gt;
        &lt;/HeaderButtons&gt;
      )
    };
  };
  </code></pre>
  
  <p>so here I am, 
  I try to build something like this inside </p>
  
  <h3>what i guess</h3>
  
  <p>create a useEffect</p>
  
  <pre class="lang-js prettyprint-override"><code> useEffect(() =&gt; {
          navigation.setParams({ handleSubmit: handleSubmit.bind() });
      }, []);
  </code></pre>
  
  <p>and call it from the navigation... but how even call handleSubmit in this useEffect ? how seriuosly define handleSubmit before, in order to use it inside the useEffect? </p>
  
  <p>let's say that I succeed to build that useEffect</p>
  
  <p>then call it from navigation</p>
  
  <pre class="lang-js prettyprint-override"><code>EditProductScreen.navigationOptions = navData =&gt; {
  const submitForValidation = navData.navigation.getParam('handleSubmit');
  // some code 
      headerRight: (
        &lt;HeaderButtons HeaderButtonComponent={HeaderButton}&gt;
          &lt;Item
            // some code 
            onPress={submitForValidation}
          /&gt;
        &lt;/HeaderButtons&gt;
      )
  }
  
  </code></pre>
  
  <p>I did a snack fo my current code if it helps to help.
  <a href="https://snack.expo.io/@vbaxt/formik-and-navigationheader" rel="nofollow noreferrer">Snack</a></p>