DEV Community

Using React Hook Form with Ionic React Components

Aaron K Saunders on March 11, 2020

see updated post example for using v6+ - https://dev.to/aaronksaunders/using-react-hook-form-with-ionic-react-components-update-1463 Setting up ...

Read full post

Aaron K Saunders • Mar 11 '20

I noticed when I ported the code, that react-hook-form in codesandbox.io is older than the latest version. In the latest version, there is a breaking change.

Before:

import { TextInput } from 'react-native';

<Controller
  as={<TextInput style={{ borderWidth: 2, borderColor: 'black'}} />}
  name="text"
  control={args => ({
    value: args[0].nativeEvent.text,
  })}
  onChange={onChange}
/>

now:

import { TextInput } from 'react-native';

<Controller
  as={<TextInput style={{ borderWidth: 2, borderColor: 'black'}} />}
  name="text"
  control={args => args[0].nativeEvent.text}
  onChange={onChange}
/>

github.com/react-hook-form/react-h...

Sirajul Muneer • May 2 '20 • Edited

@aaronksaunders Thank you. This article was a life saver. Is there a way to handle IonCheckbox ? I tried the approach similar to Radio button but, doesn't work.

Aaron K Saunders • May 6 '20

just seeing this, did you get it resolved yet?

Sirajul Muneer • May 8 '20

Not yet. I'm currently working on something else. Will update you by the end of the day.

cordial • Jun 29 '20 • Edited

Thanks for the post, very useful. If I actually want to submit the data to send to an email address, can I just use something like Formspree to do so and it will work in the native iOs and Android apps? Or would it be better to put it in something like firebase and send it from there?

Aaron K Saunders • Jun 29 '20

you can use formspree, from what I have seen it should work

cordial • Jun 29 '20

great, thanks! Will give it a go. And Thanks for replying so quickly.

Bill • Mar 16 '20

Thank you very much for writing up this awesome blog post.

Aaron K Saunders • Mar 16 '20

your welcome, extremely helpful hook for efficiently managing forms in react... working on a new one showing hook use in modals and overmindjs for state management

Bill • Mar 16 '20

looking forward for that!

Rikin Patel • Jul 17 '20

This is great info, not many examples are out there. I posted comment on other areas where your content is displayed for other users, but this will break if you are using react-hook-form v6+.
In order to use the method from this post, you would have to use v5.7.2 or below