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
FormBuildercomponent, 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
- 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:
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
Target OS to
Android and go from there):
Watchmanusing Homebrew. If you don't have
Homebrew, you can follow instructions from their website about how to install it;
React Native CLI
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
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.