jaredpalmer / formik

Build forms in React, without the tears 😭
https://formik.org
Apache License 2.0
33.99k stars 2.79k forks source link

React native documentation should be updated to clarify proper type safe usage. #4002

Open pedsm opened 1 month ago

pedsm commented 1 month ago

Bug report

This is not a bug but rather a mis-documentation.

Current Behavior

The following docs explain how to use formik with RN

Although the explanation makes sense by calling out that handleSubmit needs to be bound to a button press and not a form submission it shows an example of onPress={handleSubmit}

Which is not technically correct.

RN's OnPressEvent is a GestureResponderEvent while handleSubmit expects a FormEvent

Expected behavior

handleSubmit expects a form event and does only 2 things with this event:

  const handleSubmit = useEventCallback(
    (e?: React.FormEvent<HTMLFormElement>) => {
      if (e && e.preventDefault && isFunction(e.preventDefault)) {
        e.preventDefault();
      }

      if (e && e.stopPropagation && isFunction(e.stopPropagation)) {
        e.stopPropagation();
      }
  1. Prevent default (this is to prevent a browser from sending an http request)
  2. Stop propagation (again this is to prevent browser behaviour)

After those 2 are complete the event is not needed.

Since those are not relevant in a React Native context then I propse we change the documentation for React-Native to prompt users to use it as such:

         <Button onPress={handleSubmit} title="Submit" />

This doesn't require any changes to the handleSubmit function such as the patch solution proposed here https://github.com/jaredpalmer/formik/issues/3233#issuecomment-856034261

Neither the non type safe solutions mentioned in a few other issues such as:

3690

3646

3233

Reproducible example

Suggested solution(s)

Update the docs to indicate that react native users should not be passing in onPress events into the handleSubmit method

Additional context

3690

3646

3233

pedsm commented 1 month ago

Happy to submit a PR to amend the docs assuming this approach seems sensible