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 aprop
to aFormBuilder
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
andWatchman
using Homebrew. If you don't haveHomebrew
, you can follow instructions from their website about how to install it; - Install
React Native CLI
- Install
Xcode
andXcode 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.
Top comments (0)