React native forms … the right way!

Every project (especially big projects) starts with enthusiasm and joy… then you arrive at the “Making the Forms” part …

Forms are a necessary part of every app and of course are vital whenever you want to receive data from your user (sign in/up, settings, etc). From the developer’s point of view, they are just a tedious and time losing activity.

There are tons of libraries that should help you to solve this problem but I personally never liked their approach, especially when making apps with react native.

This is why I finally created my own library.

React-native-form-generator

React-native-form-generator has advantages such as:

• Clean, react style approach (keep it simple, yeah!)
• Automatic onChange and events handling (you just have to check changes on Form Component, not on every field.
• Custom fields and styles without adding any weird syntax (just create a react component)
• Applies by default the current OS style (stop dealing with styles just to make a simple settings view)

ok… so what does it mean?

It means that you can create a form in this way:

<Form ref='registrationForm'
      onFocus={this.handleFormFocus.bind(this)}
      onChange={this.handleFormChange.bind(this)}
      label="Personal Information">
</Form>

…and then you can add the fields inside the form

<Form
        ref='registrationForm'
        onFocus={this.handleFormFocus.bind(this)}
        onChange={this.handleFormChange.bind(this)}
        label="Personal Information">
        <InputField 
             ref='first_name' 
             label='First Name' 
             placeholder='First Name'/>
        
        <InputField 
             ref='last_name' 
             placeholder='Last Name'/>
</Form>

As soon as your user will input some data, onChange will be automatically triggered and will receive the inputted data.

handleFormChange(formData){
    //formData will be a json object that will contain
    // refs of every field
    //formData.first_name
    //formData.last_name
}

What’s cool about that?

• You’re actually designing the form with complete control over the type of fields you want to use and the data returned by fields (custom fields can contain complex design and return objects).
• You can mix any type of component such as a link to terms and conditions inside the form (check out the complete example @https://github.com/MichaelCereda/react-native-form-generator)
• Just the fields that have a ref attribute will be connected to the onChange event of the form, so you can add everything you want in the form (also other react components) and the ones with a ref will automatically receive a props named onChange. [see Separator component]

Attaching keyboard events to your react native form

Another huge problem that you can face with form libraries is handling keyboard events and make your interface react to that.

React-native-form-generator already implements everything you need to achieve this functionality.

import { KeyboardAwareScrollView } from 'react-native-form-generator'
...
handleFormFocus(event, reactNode){
   this.refs.scroll.scrollToFocusedInput(event, reactNode)
}
...
  <KeyboardAwareScrollView ref='scroll'>
    <Form ref='registrationForm'
      onFocus={this.handleFormFocus.bind(this)}
      onChange={this.handleFormChange.bind(this)}
      label="Personal Information">
      ........
    </Form>
</KeyboardAwareScrollView>

KeyboardAwareScrollView it’s an edited version of https://github.com/APSL/react-native-keyboard-aware-scroll-view

(check https://github.com/facebook/react-native/issues/3195#issuecomment-146518331 for informations about that extension, any copyright goes to its author).

more news are coming