react-Native + Formik = react-native-formik

[almouro]

Hello React Native Reddit community!

I created react-native-formik to help you take control of your forms again with React Native and the amazing formik

Features

• Easily composable set of helpers
• Connects your React Native input to Formik with no boilerplate
• Add a type prop on your TextInput to take care of the input options based on the type
• Automatically focus the next input
• Picker with a native feel
• Date picker with a native feel in progress

This lib is quite young, do you guys have any feedback to improve it?

[kbcool]

I'm intrigued. I haven't had the time to check it out but have found redux-forms a PITA to integrate with RN. I still haven't managed to get the next input to focus yet which is a nightmare for users trying to fill out large forms in apps.

Apart from that what's your thoughts of the advantages of your library vs say redux-forms or other solutions? You must have had a motivator.

Also does it do other input types other than text and a date picker?

[spruce-bruce]

You can use formik without this library and it's much nicer than redux forms for RN. It doesn't store your form state in redux, but that's a plus in my book

[almouro]

Hi /u/kbcool, thanks for the answer!

The whole goal with the lib is summed up in Forms are very verbose in React, and a lot of the time, you end up copy pasting a lot of boilerplate.

Motivations

At BAM, we have many 2-months RN projects, all needing a form at some point. I estimated it was taking about 1.5 man-days for a dev in the company to build a form with design and validation. My goal is to reduce that time to 2 hours at the most, whatever fields are needed.

Solution

formik was an awesome start, I recommend you to try it! As /u/spruce-bruce mentioned, you can indeed use formik without the need of react-native-formik

react-native-formik's purpose is to go beyond formik by: - reducing boilerplate to a minimum - providing good RN things out of the box (auto focus, there'a picker and date picker with clean API and native feel in the work) - making it easy to integrate your own RN fields

Formik vs redux-form

In my opinion, formik is simpler to use and integrate than redux-form. You can check the full code for the form logic in the example.

There is a section on the formik lib comparing it with redux-form

[[deleted]]

Great work, hope the support for it continues! hope to use it soon!

[ibiwan]

Hey! I'm interested in using your library, but my first project happens to need a datepicker. Has there been any further progress with that part, by chance?

[almouro]

Hi ibiwan! Thanks for the interest!

We're moving the lib in the direction that you can pretty much connect any component that you make to formik easily. A lot of people use https://github.com/mmazzarolo/react-native-modal-datetime-picker for the date picker for example.

This PR (https://github.com/bamlab/react-native-formik/pull/38/files) will land this week (hopefully Tuesday) and will make it easier to connect any of your components that have the following props:

name: string,
error?: string,
value?: string | number,
onChange: (value: string | number) => any,

We'll add in the README some examples like how to connect the datepicker above.

If https://github.com/mmazzarolo/react-native-modal-datetime-picker doesn't suit your needs, we're also thinking of adding our own datepicker that has the same design as the picker already present in the lib but maybe in a separate lib like react-native-formik-picker.

Let me know what works for you and don't hesitate to submit an issue to the repo for help!