fix(3942): added support for NativeSyntheticEvent

Author: erashu212

docs/api/formik.md

@@ -74,24 +74,24 @@ keys and shape will match your schema exactly. Internally, Formik transforms raw
 on your behalf. If you are using `validate`, then that function will determine
 the `errors` objects shape.
 
-#### `handleBlur: (e: any) => void`
+#### `handleBlur: (e: React.FocusEvent<any> | NativeSyntheticEvent<any> | any) => void`
 
 `onBlur` event handler. Useful for when you need to track whether an input has
 been `touched` or not. This should be passed to `<input onBlur={handleBlur} ... />`
 
-#### `handleChange: (e: React.ChangeEvent<any>) => void`
+#### `handleChange: (e: React.ChangeEvent<any> | NativeSyntheticEvent<any>) => void`
 
 General input change event handler. This will update the `values[key]` where
 `key` is the event-emitting input's `name` attribute. If the `name` attribute is
 not present, `handleChange` will look for an input's `id` attribute. Note:
 "input" here means all HTML inputs.
 
-#### `handleReset: () => void`
+#### `handleReset: (e?: React.SyntheticEvent<any> | NativeSyntheticEvent<any>) => void`
 
 Reset handler. Will reset the form to its initial state. This should be passed
 to `<button onClick={handleReset}>...</button>`
 
-#### `handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void`
+#### `handleSubmit: (e?: React.FormEvent<HTMLFormElement> | NativeSyntheticEvent<HTMLFormElement>) => void`
 
 Submit handler. This should be passed to `<form onSubmit={props.handleSubmit}>...</form>`. To learn more about the submission process, see [Form Submission](../guides/form-submission.md).
 

docs/api/useField.md

@@ -139,8 +139,8 @@ An object that contains:
 
 - `name: string` - The name of the field
 - `checked?: boolean` - Whether or not the input is checked, this is _only_ defined if `useField` is passed an object with a `name`, `type: 'checkbox'` or `type: 'radio'`.
-- `onBlur: () => void` - A blur event handler
-- `onChange: (e: React.ChangeEvent<any>) => void` - A change event handler
+- `onBlur: (e: React.FocusEvent<any> | NativeSyntheticEvent<any>) => void` - A blur event handler
+- `onChange: (e: NativeSyntheticEvent<any> | React.ChangeEvent<any>) => void` - A change event handler
 - `value: Value` - The field's value (plucked out of `values`) or, if it is a checkbox or radio input, then potentially the `value` passed into `useField`.
 - `multiple?: boolean` - Whether or not the multiple values can be selected. This is only ever defined when `useField` is passed an object with `multiple: true`
 
@@ -160,9 +160,9 @@ An object that contains relevant computed metadata about a field. More specifica
 An object that contains helper functions which you can use to imperatively change the value, error value or touched status for the field in question. This is useful for components which need to change a field's status directly, without triggering change or blur events.
 
 - `setValue(value: any, shouldValidate?: boolean): Promise<void | FormikErrors>` - A function to change the field's value. Calling this will trigger validation to run if `validateOnChange` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a second argument as `false`.
-If `validateOnChange` is set to `true` and there are errors, they will be resolved in the returned `Promise`.
+  If `validateOnChange` is set to `true` and there are errors, they will be resolved in the returned `Promise`.
 
 - `setTouched(value: boolean, shouldValidate?: boolean): void` - A function to change the field's touched status. Calling this will trigger validation to run if `validateOnBlur` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a second argument as `false`.
-If `validateOnBlur` is set to `true` and there are errors, they will be resolved in the returned `Promise`.
+  If `validateOnBlur` is set to `true` and there are errors, they will be resolved in the returned `Promise`.
 
 - `setError(value: any): void` - A function to change the field's error value

packages/formik/src/Formik.tsx

@@ -2,6 +2,7 @@ import deepmerge from 'deepmerge';
 import isPlainObject from 'lodash/isPlainObject';
 import cloneDeep from 'lodash/cloneDeep';
 import * as React from 'react';
+import { NativeSyntheticEvent } from 'react-native'
 import isEqual from 'react-fast-compare';
 import invariant from 'tiny-warning';
 import { FieldConfig } from './Field';
@@ -604,7 +605,13 @@ export function useFormik<Values extends FormikValues = FormikValues>({
   );
 
   const executeChange = React.useCallback(
-    (eventOrTextValue: string | React.ChangeEvent<any>, maybePath?: string) => {
+    (
+      eventOrTextValue:
+        | string
+        | React.ChangeEvent<any>
+        | NativeSyntheticEvent<any>,
+      maybePath?: string
+    ) => {
       // By default, assume that the first argument is a string. This allows us to use
       // handleChange with React Native and React Native Web's onChangeText prop which
       // provides just the value of the input.
@@ -620,8 +627,8 @@ export function useFormik<Values extends FormikValues = FormikValues>({
           (eventOrTextValue as React.ChangeEvent<any>).persist();
         }
         const target = eventOrTextValue.target
-          ? (eventOrTextValue as React.ChangeEvent<any>).target
-          : (eventOrTextValue as React.ChangeEvent<any>).currentTarget;
+          ? (eventOrTextValue as React.ChangeEvent<any> | NativeSyntheticEvent<any>).target
+          : (eventOrTextValue as React.ChangeEvent<any> | NativeSyntheticEvent<any>).currentTarget;
 
         const {
           type,
@@ -661,8 +668,8 @@ export function useFormik<Values extends FormikValues = FormikValues>({
 
   const handleChange = useEventCallback<FormikHandlers['handleChange']>(
     (
-      eventOrPath: string | React.ChangeEvent<any>
-    ): void | ((eventOrTextValue: string | React.ChangeEvent<any>) => void) => {
+      eventOrPath: string | React.ChangeEvent<any> | NativeSyntheticEvent<any>
+    ): void | ((eventOrTextValue: string | React.ChangeEvent<any> | NativeSyntheticEvent<any>) => void) => {
       if (isString(eventOrPath)) {
         return event => executeChange(event, eventOrPath);
       } else {
@@ -808,7 +815,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
   });
 
   const handleSubmit = useEventCallback(
-    (e?: React.FormEvent<HTMLFormElement>) => {
+    (e?: React.FormEvent<HTMLFormElement> | NativeSyntheticEvent<HTMLFormElement>) => {
       if (e && e.preventDefault && isFunction(e.preventDefault)) {
         e.preventDefault();
       }

packages/formik/src/types.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { NativeSyntheticEvent } from 'react-native';
 import { FieldConfig } from './Field';
 /**
  * Values of fields in the form
@@ -125,29 +126,30 @@ export interface FormikHelpers<Values> {
 
 /**
  * Formik form event handlers
+ * import { NativeSyntheticEvent } from 'react-native';
  */
 export interface FormikHandlers {
   /** Form submit handler */
-  handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
+  handleSubmit: (e?: React.FormEvent<HTMLFormElement> | NativeSyntheticEvent<HTMLFormElement>) => void;
   /** Reset form event handler  */
-  handleReset: (e?: React.SyntheticEvent<any>) => void;
+  handleReset: (e?: React.SyntheticEvent<any> | NativeSyntheticEvent<any>) => void;
   handleBlur: {
     /** Classic React blur handler, keyed by input name */
-    (e: React.FocusEvent<any>): void;
+    (e: React.FocusEvent<any> | NativeSyntheticEvent<any>): void;
     /** Preact-like linkState. Will return a handleBlur function. */
-    <T = string | any>(fieldOrEvent: T): T extends string
-      ? (e: any) => void
+    <T = string | NativeSyntheticEvent<any> | any>(fieldOrEvent: T): T extends string
+      ? (e:  NativeSyntheticEvent<any> | any) => void
       : void;
   };
   handleChange: {
     /** Classic React change handler, keyed by input name */
-    (e: React.ChangeEvent<any>): void;
+    (e: React.ChangeEvent<any> | NativeSyntheticEvent<any>): void;
     /** Preact-like linkState. Will return a handleChange function.  */
-    <T = string | React.ChangeEvent<any>>(
+    <T = string | NativeSyntheticEvent<any> | React.ChangeEvent<any>>(
       field: T
-    ): T extends React.ChangeEvent<any>
+    ): T extends React.ChangeEvent<any> | NativeSyntheticEvent<any>
       ? void
-      : (e: string | React.ChangeEvent<any>) => void;
+      : (e: string | React.ChangeEvent<any> | NativeSyntheticEvent<any>) => void;
   };
 
   getFieldProps: <Value = any>(