Introducing React Native Forms

I’m open sourcing the library I wrote to quickly build forms at AuditionMe, React Native Forms. Check it out on Github: https://github.com/michaelhelvey/react-native-forms

Why Another Forms Library?

I develop React Native applications. Coming from a native iOS background, I love the library, and the ecosystem. In our previous app, which was completely native and written in Objective-C, we used the excellent XLForms library, which we were very happy with. But coming to the React Native ecosystem, I couldn’t find a forms library that really provided the API I wanted. What did I want?

  • A declarative API. I shouldn’t have to write any special styles or functions to get the library to work. It should just work.
  • Complete extensibility. There are some good solutions out there with libraries of components. But customizing the components are difficult, and so I found that to achieve the exact designs I needed, I would have to end up writing most of my own form components anyway. Why would I even use a library, in that case?
  • Consistent props. Each form component should basically work the same way. I shouldn’t have to look up a special set of props for every single component the form library provides.
  • Data serialization and separation of concerns. The library should be completely agnostic about what’s in it. When I ask for the data, it returns the data to me in a nice, serialized form, that I can use to handle the data however I want.

So I wrote a library that did all of those things.

React Native Forms

Let’s see some code. React Native Forms is very simple.

Here’s the Settings page for our app, and the code required to produce it:

And it works just as expected.

But not only can you use React Native Forms to easily produce native-looking forms with default styling, it can be completely customized. For example, I wrote a custom profile and cover photo picker component for our Edit Profile page, and inserting it into the form was as easy as:

<ProfilePicturePicker
profilePicture={this.props.user.profile_photo_url}
coverPhoto={this.props.user.cover_photo_url}
cellHeight={200}
/>

And it fits into the form perfectly, because Form and Section components are completely agnostic as to the behavior and styling of their children.

React Native Forms also ships with a simple data API for handling data and listening to changes in the Form’s data, and the ability to inject a validator function into any component that receives user input. For more information, check out the docs and examples on Github: https://github.com/michaelhelvey/react-native-forms.

Moving Forward

React Native Forms is already cross-platform, but I’d love to see the default Android styles look more like Android. I’d love to see our standard library of validators and components grow, as well as make our styling API more consistent and even more extensible.

We’re already using and maintaining the library in our app at AuditionMe, but I’m really looking forward to seeing what the React Native community does with it. Pull requests welcome!