Skip to content

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

Open
@pedsm

Description

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 #3233 (comment)

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions