Create a FormBuilder component in React Native (Intro & Part 1)
Tags: react, reactnative, ios, javascript
Published: 2019-03-18 01:05:45

---
title: Create a FormBuilder component in React Native (Intro & Part 1)
published: true
description: 
tags: react, react-native, ios, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/68ghwpyr8mvgumn2edca.jpeg
series: Create a FormBuilder component in React Native
---

Hi everyone! 👋 
Recently I've been working on a React Native app where one of the tasks was to create 10+ different forms. All of them were doing pretty much the same thing, with the only difference being in how many fields each form has, and what type of fields each form uses. That lead me to define the following goals:
- reuse as much code as possible (well, that's the beauty of React components, right? 🙂);
- be able to create a new form by simply creating some sort or `form's configuration object or array`, and passing it as a `prop` to a `FormBuilder` component, which should render the form for me;
- be able to extend an existing form by simply updating its configuration.

I'm going to put together a list of posts where I'll describe step-by-step how we can achieve those goals by building a sample app in React Native. Let's get started! 🏁

---

This series contents:
- Part 1: Create a new React Native app (current)
- [Part 2: Create a simple Salary Calculator Form](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-2-2dec)
- [Part 3: Create custom form input and button components](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-3-1aib)
- [Part 4: Work on the `FormBuilder` component](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-4-5gc3)
- [Part 5: Enable/disable form buttons on-the-fly](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-5-535h)
- [Part 6: Create a Sign Up form](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-6-2ohd)
- [Part 7: Add support for Boolean field type](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-7-32c7)

Final GitHub repo:
[https://github.com/vasilestefirta/react-native-form-builder](https://github.com/vasilestefirta/react-native-form-builder)

# Part 1: Create a new React Native app
Before we can create a new React Native app, we need to make sure we have all the necessary tools installed on our machine. Let's check out the instructions from [React Native's Getting Started](https://facebook.github.io/react-native/docs/getting-started) documentation, and see what tools we need to install. Because I'll be running the app on an iOS simulator and not use the Expo app, we'll need to follow instructions from the `Building Projects with Native Code` section. Basically, we need do the following (please note that these instructions are for Mac users and, if you're a Windows user, then switch the `Development OS` option to `Windows` and `Target OS` to `Android` and go from there):
- Install `Node` and `Watchman` using [Homebrew](http://brew.sh/). If you don't have `Homebrew`, you can follow instructions from their website about how to install it;
- Install `React Native CLI`
- Install `Xcode` and `Xcode Command Line Tools`.

At this point we can create a new app using `React Native CLI`, by simply running the following command in your terminal:
```bash
react-native init ReactNativeFormBuilder
```

Then run `react-native run-ios` inside our React Native project folder:
```bash
cd ReactNativeFormBuilder
react-native run-ios
```

You should see your new app running in the iOS Simulator shortly.

![App Home Screen](https://thepracticaldev.s3.amazonaws.com/i/7tjrwxhhqp2367d19er7.jpeg "App Home Screen")

Now it's the time to move forward an build a simple form using default React Native components. Go to [Part 2](https://dev.to/dev_nope/create-a-formbuilder-component-in-react-native-part-2-2dec) where we'll create a simple Salary Calculator Form.