Skip to content

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

Open
@pedsm

Description

@pedsm

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions