issue: handleSubmit does not execute onSubmit function (or any other funciton) on react native

[massanen7]

Version Number

7.31.1

Codesandbox/Expo snack

https://snack.expo.dev/@bluebill1049/react-hook-form-v7---controller

Steps to reproduce

1. Go to 'https://snack.expo.dev/@bluebill1049/react-hook-form-v7---controller'
2. Click on 'Button' button
3. See that console log of onSubmit function does not execute

Expected behaviour

onSubmit function should execute, and you should see the console.log output.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

That's because you have field errors.

{
  "errors": {
    "firstName": {
      "type": "required",
      "message": "",
      "ref": {
        "name": "firstName"
      }
    },
    "lastName": {
      "type": "required",
      "message": "",
      "ref": {
        "name": "lastName"
      }
    }
  }
}

if you want to do something, when the form submission fails, make sure to provide a second onInvalid callback to to the handleSubmit form method

const onInvalid = (errors) => console.error(errors)

handleSubmit(onSubmit, onInvalid)

[pierratono]

onInvalid is very helful, saved my day

[mainAlik]

you save me with onInvalid
thamk you <3

[MisterWaner]

Thank you so muuchhh !!!!!
It's been 2 days that I'm stuck on a bug, and I find the solution here !

[SaddamMohsen]

thank you this is very helpfull

[Devlouiz]

Thanks alot 2 days of battling with this

[massanen7]

Nope, already tried that, and does not print anything. Anything I pass to the handleSubmit function, does not execute. I was first playing with my own project example, but now Im just playing in the example of the documentation, and happens exactly the same. Both onSubmit nor onInvalid, does not execute

[Moshyfawn]

Hm.. can't reproduce in the Snack

rhf-submit-callbacks-screencast.mp4

[bluebill1049]

which example is in the doc? it's working for me: https://snack.expo.dev/@bluebill1049/react-hook-form-v7---controller

[Moshyfawn]

Hm.. can't reproduce in the Snack

rhf-submit-callbacks-screencast.mp4

Hm, I see a couple of thumbs up on the issue. Can someone confirm it's not working in this Snack?

[massanen7]

Screen.Recording.2022-05-18.at.10.19.00.mov

I'm working on typescript, but it all should work pretty much the same. Here is my recording. I also show that the reset actions works good, but not the handleSubmit one.

[bluebill1049]

it doesn't matter if it's typescript or not. please try to reproduce the issue in the snack above.

[massanen7]

Here you have pretty much the same structure I have. The "EmailInputScreen.tsx" is where I pretty much copy pasted the example of the documentation to play with react-hook-form. It's in a screen rendered in a stackNavigator, you'll see that onSubmit nor onErrors are never called there.

https://snack.expo.dev/@massanen/07c78c

[bluebill1049]

supply an isolated expo and I couldn't find EmailInputScreen.tsx

[bluebill1049]

update this codesandbox to reproduce the issue: https://snack.expo.dev/@bluebill1049/react-hook-form-v7---controller

[bluebill1049]

I understand your frustration, switch side me and @Moshyfawn as the maintainers are here to try our best to help with our free time. If you don't share a straightforward example for us to reproduce, it doesn't help us either. here is 8 pm I am finishing off my work and i am tired and still trying to help but you need to give me a hand as well, so I can help you isolate the issue.

this snack you shared works: https://snack.expo.dev/@bluebill1049/react-hook-form-v7---controller
the snack that I shared works too.

now next is if you can isolate an snack then I can have a look at it again.

[massanen7]

Hey guys, I just found the issue:

The way I export my App.tsx. I had a condition depending on Config value to load either my App either Storybook.

This is what I had:
export default Config.LOAD_STORYBOOK === 'true' ? StorybookUI : App;

Just exporting the App without the condition with just:
export default App;

The useForm is working.

If this helps you or anybody in anyway I'm happy, but looks like it's more on my side. Thanks much for all the help, here is the video of how this change made me just fix it:

Screen.Recording.2022-05-18.at.12.48.03.mov

[bluebill1049]

thanks for sharing. i am glad it finally works for you. good night.

[vinitsood]

Amazing! That was it. Thank you

[Rolozuna]

Thank you very much @massanen7, I was looking for the solution all morning, I searched everywhere, finally I found this answer, I was already thinking about using formik, haha. Thank you!

[Lokesh396]

I have a form in my component with some inputs and selects and i have some inputs which was not inside a form but i used register to get the data using watch, while submitting the form, the inputs which was not in the form is also restricting the form to submit, i got to know about the error using onInvalid is this the default behaviour of react-hook-form?