Build forms in React Native with tcomb-form-native

Building forms from scratch is hectic than we may imagine. tcomb-form-native is one powerful library, that helps building complex input forms having validation, maintain state on input or submit, or initializing the form with default values, styling the input fields etc. Here is the official link as well:

gcanti/tcomb-form-native

In this tutorial, we will explore the library while writing example codes to see how it practically works.

Let’s get started with obvious steps:

Initializing new RN project:

react-native init tcombFormNativeTutorial

Installing tcomb library:

npm i --save tcomb-form-native

Building first form:

Lets build a new component in Tcomb.js which renders our form. tcomb automatically generates a form based on provided domain model, ‘PersonModel’ in our case, as follows:

import React, { Component } from 'react';
import { View } from 'react-native';
import t from 'tcomb-form-native'

let Form = t.form.Form
class Tcomb extends Component {
  constructor(props){
    super(props)
  }
  render() {
    let PersonModel = t.struct({
      name: t.String, // a required string
      surname: t.maybe(t.String), // an optional string
      age: t.Number, // a required number
      rememberMe: t.Boolean, // a boolean
    });
    return (
      <View>
       <Form
         ref='form'
         type={PersonModel}
         // options={{}}
         // value={{}}
         // onChange={{}}
       />
      </View>
    )
  }
}
export default Tcomb;

The above form adds Text Input, Numeric and Boolean input fields. And notice, it adds labels on its own, and it adds mandatory validation by default and you need to use t.maybe() for optional fields (i.e. ‘surname’ in the above form).

Validating input:

To verify the fields we call getValue() function on form using ref. We will add a submit button and its handler which ultimately triggers the validation of the fields:

submitForm() {
  var value = this.refs.personForm.getValue();
  if (value) {
    // if validation fails, value will be null
    ToastAndroid.show('Validation successful', ToastAndroid.SHORT);
  } else {
    ToastAndroid.show('Please fix errors', ToastAndroid.SHORT);
  }
}

and in render

<TouchableOpacity style={styles.button} onPress={this.submitForm}>
  <Text style={styles.buttonText}>Submit</Text>
</TouchableOpacity>

here is the result

Adding default values:

Let’s add default values to our form. We add this.state.value in our constructor

this.state = {
  value: {
    name: 'First',
    surname: 'Last',
    age: 25,
    rememberMe: true,
  },
};

and update form as follows

<Form
  ref='personForm'
  type={PersonModel}
  // options={{}}
  value={this.state.value}
  // onChange={{}}
/>

Changing labels

To change the label from ‘Name’ to ‘First Name’, we add options inside render:

let options = {
  fields: {
    name: {
      label: 'First Name',
    },
  },
};

and update our form

<Form
  ref='personForm'
  type={PersonModel}
  options={options}
  value={this.state.value}
  // onChange={{}}
/>

Hint/Help Text:

let options = {
  fields: {
    name: {
      label: 'First Name',
      help: 'Must be less than 20 characters',
    },
  },
};

Dropdown field:

Let us add a dropdown field of gender:

let PersonModel = t.struct({
  name: t.String, // a required string
  surname: t.maybe(t.String), // an optional string
  age: t.Number, // a required number
  rememberMe: t.Boolean, // a boolean
  gender: t.enums({M: 'Male', F: 'Female'}, 'gender'),
});

Disabling fields:

Here we disable the fields ‘age’, ‘rememberMe’ and ‘gender’. Notice, we sometimes use ‘editabale’ and sometimes ‘disabled’ configuration variables

let options = {
  fields: {
    name: {
      label: 'First Name',
    },
    age: {
      editable: false,
    },
    rememberMe: {
      editable: false,
    },
  },
};

Conclusion:

We built a simple form using tcomb-form-native library. We used textinput, dropdown, toggle switch, we also added mandatory validation and added a form submission handler. There will be another tutorial in the continuation where I will show how can you add custom advanced validation to the fields. This project is also uploaded on Github for reference:

https://github.com/ows-ali/tcombFormNativeTutorial

Comments

[Patrick Wendo]

I am using tcomb form but I am using function based components. Could you please explain how I can get the value of a form into a variable. Every time I try I get the error undefined is not an object (evaluating 'form.getValue')