Type error when assigning handleSubmit to onPress prop in React Native

[MichielvanBeers]

Bug report

Current Behavior

When assigning the handleSubmit to the onPress prop of a Button in React Native, I get the following type error:

Type '(e?: FormEvent<HTMLFormElement> | undefined) => void' is not assignable to type '(event: GestureResponderEvent) => void'. Types of parameters 'e' and 'event' are incompatible. Type 'GestureResponderEvent' is not assignable to type 'FormEvent<HTMLFormElement>'. Types of property 'nativeEvent' are incompatible. Type 'NativeTouchEvent' is missing the following properties from type 'Event': bubbles, cancelBubble, cancelable, composed, and 17 more.ts(2322) index.d.ts(461, 5): The expected type comes from property 'onPress' which is declared here on type 'IntrinsicAttributes & InterfaceButtonProps & Partial<{}> & Partial<Record<string, any>> & { ref?: MutableRefObject<...> | undefined; }'

When I tap the button, the values do get logged correctly to the console, so it only looks like a Typescript issue.

Expected behavior

Using the handleSubmit function should not return a type error

Reproducible example

Link to Codesandbox example.

Suggested solution(s)

Additional context

Thanks in advance!

Your environment

Software	Version(s)
Formik	"^2.2.9"
React	"18.0.0"
TypeScript	"^4.6.3"
Browser	Expo Go
npm/Yarn	npm
Operating System	Android

[amanape]

Experiencing the same problem

TS2322: Type '(e?: FormEvent<HTMLFormElement> | undefined) => void' is not assignable to type '(event: GestureResponderEvent) => void'.
   Types of parameters 'e' and 'event' are incompatible.
     Type 'GestureResponderEvent' is not assignable to type 'FormEvent<HTMLFormElement>'.

Any updates?

[GasparAdragna]

Same here!

[Aure77]

Same issue. Temporary workaround to test my app (cast as expected onPress type): onPress={handleSubmit as unknown as (e: GestureResponderEvent) => void} But not a long term solution...

[tzunwip]

onPress={() => handleSubmit()} Works too.

[Aure77]

onPress={() => handleSubmit()} Works too.

This works but it's not a good practice. Anonymous function create a new reference at each render, that can cause unnecessary child component rerender (performance issue)...

https://reactjs.org/docs/faq-functions.html#arrow-function-in-render

[maichongju]

Still not fixed... Any work around other than the anonymous function?

[Samide47]

any solution guys ?

[wangjh7]

same issue

[captainalbert]

Any solution?

[brandonhsz]

same issue :c

[MarlonAEC]

+1

[MosefAsad]

This issue is also present in React Native applications using Formik.

[trajano]

Ideally they could add a dependency on react-native but only use the types, though that may be too big a bloat. So they may have to put it in as any

For the time being I worked around it by casting it as

onPress={handleSubmit as (e?: GestureResponderEvent) => void}