Easily Build Forms in React Native – React Native Development – Medium

Easily Build Forms in React Native -

  • A few things you might have to take care of… – Creating the necessary components (text inputs, select inputs, checkboxes, switches, etc)Writing/finding validation logicUpdating your components to display any errors (I always forget to do this)Updating your UI whenever you change fieldsNone of these things are difficult, but they can…
  • What We’re BuildingWe’ll be building a sign up form that has the following fields – Email (required)Username (optional)Password (required)Agree to terms (required)Defining the Form ModelThe first thing we need to do is define a model for our form — this is what will be passed to the form component and used to render the…
  • First we need to get the Form component (line 6) then we need to render the form and pass our model to it as the type (line 19).
  • Then pass those options to the Form component – Let’s do the same thing to add some error the Form DesignThe final thing I want to do is modify the design of this form slightly.
  • You can do quite a few things but I’m just going to be changing the label color on this one form.

If you’re building a React Native app it’s almost a guarantee that you’ll have to build at least one form. The reality is you’ll probably build quite a few (sign in, sign up, edit profile, etc.)…

Easily Build Forms in React NativeIf you’re building a React Native app it’s almost a guarantee that you’ll have to build at least one form. The reality is you’ll probably build quite a few (sign in, sign up, edit profile, etc.)

Forms are pretty simple, right?

Yeah! But there can be quite a few moving parts involved. A few things you might have to take care of…

Creating the necessary components (text inputs, select inputs, checkboxes, switches, etc)Writing/finding validation logicUpdating your components to display any errors (I always forget to do this)Updating your UI whenever you change fieldsNone of these things are difficult, but they can be time consuming. Especially if you’re trying to ship something quickly.

In the past I’ve always done all of this myself. But it takes time away from what I really want to be doing.

I started looking around for solutions to solve this problem and came across tcomb-form-native. It makes creating forms in React Native easy by simply having to define a model for that form and you’re set! No fussing around with a dozen components.

SetupTo get started I’ve put together a Snack that will allow us to do all of our work on the web. It’s an awesome tool.

You’ll notice at the top of the file I’ve added import t from ‘tcomb-form-native’; which is the library we’ll be using to build our form. Snack will automatically pull that…

Easily Build Forms in React Native – React Native Development – Medium