Create a FormBuilder component in React Native (Intro & Part 1)

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
• Part 3: Create custom form input and button components
• Part 4: Work on the FormBuilder component
• Part 5: Enable/disable form buttons on-the-fly
• Part 6: Create a Sign Up form
• Part 7: Add support for Boolean field type

Final GitHub repo:
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 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. 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:

react-native init ReactNativeFormBuilder

Then run react-native run-ios inside our React Native project folder:

cd ReactNativeFormBuilder
react-native run-ios

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

Now it's the time to move forward an build a simple form using default React Native components. Go to Part 2 where we'll create a simple Salary Calculator Form.