How to Create an Android App Using React Native

How I created a JotForm Submission Counter for Android using React Native

When Facebook released React Native(React-based library for building native mobile apps in JavaScript), I couldn’t wait to get my hands on it. I always wanted to create mobile applications, but learning their own native language is a challenge- but it’s not a hill that we can’t climb! As a web developer, I wanted to test my development skills for a mobile platform with this project: creating a JotForm submission counter for Android using React Native. (For developers like me here’s Why You Should Learn React Native too.)

So today I will share the basic ideas on how to get started and what I learned along the way. Reading the React Native documentation can help you in the process. I’ll make this as simple as possible.

So let’s build our app — a basic submission counter for JotForm. JotForm is an application where you can create and publish your online forms then get an email for each response. The goal is to display how many submissions a form received. We will have a picker that let us select our form and display how many submissions it‘ll have. We won’t go any further than that. Once you’ve nailed down the basics, you can start modifying the code and customize the app the way you want it. So let’s get started!

Requirements

• Javascript and ReactJS knowledge
• JotForm account. You can Sign up here if you’re not a member. We need your own JotForm API key later on. You can find it from my account page once you logged in.
• Genymotion — This will help us emulate and test our application. You can also use your android phone for testing.

Install dependencies

To install React Native follow the installation guide here. Once you’ve done that. Let’s create the application using the default boilerplate.

We create an application and call it submissionCounter. This creates a folder with the same name and with all the files we need.

react-native init submissionCounter

Now, make sure we’re inside the working directory.

cd submissionCounter

Setup Test

Let’s test if everything is set up correctly. Run Genymotion before executing the following code. React Native CLI detect any emulator devices that is connected to your computer and it will automatically install and run the app when you execute the code below.

react-native run-android

Another CLI window will pop up during the compilation process. Leave it open, it’s important that you do not close it. When React Native compiles everything and you have something like this.

Now we can start writing some code and get our hands dirty.

The Fun Part

Start by creating the submission counter UI. The counter on the middle of the screen and the top portion is where you can select a form. From here, I assume that you’re already familiar with the ReactJS coding environment.

Start by opening the index.android.js file. This file is the app main entry point. Remove everything and paste this code.

App entry point

We bootstrapped our app by importing and using the AppRegistry.registerComponent. The App component is what we’re going to create next.

AppRegistry is the JS entry point to running all React Native apps.

Create a src folder inside your working directory. Inside the src directory create a new file and name itapp.js. From this append the following code.

The app.js imports

We need to import the React Native components we need. Now let’s write our own class that handles the App execution.

The App class

Layout

Inside the render method we returned a View component. You will be seeing this a lot. This is how to create layout in React Native. In web development you have a lot of options because of the different tags but here in React Native, the most fundamental component for building a UI is the View component as well as the Text component.

In the first level of the View component here comes another React Native component, the Statusbar. I added this for layout and aesthetic purposes. More information about the component here.

The Statusbar component

Next to the Statusbar component is another View component that wraps both the picker and counter container. You probably noticed the Formpicker component here. This component spits the selected form via the onItemSelect property. Which calls formSelected method to manage the app state and make the necessary updates on the view. Insert the following code to the class.

And also create the class constructor that will initialize our app state.

The form state holds the selected form name and the count state for the selected form submission count. More info about this later on.

Styles

A StyleSheet is an abstraction similar to CSS StyleSheets

You can write the style property to any View component or any other component that supports it. The style property value must be a valid json object. It must be created by using the create method of StyleSheet class. Append the code below inside the app.js file. Just below the class scope declaration.

This generates a style object that we need for the styling the app. It’s close on how you create css style sheets. Just make sure that the props you use is supported by the component you will assign into. You can read the docs if you want to know more about the supported style properties of each components.

Dimension

Notice the Dimension class. It’s a helper class that gets the viewport size. Useful if you want to know your phone’s dimensions. We will use it for the fixed size of the form name container.

Combine Styles

If you want a View to use more than one style. You can do so by concatenating both objects inside an array using es6 syntax.

<View style={[styles.container, styles.stage]}>

This will replace any identical keys from styles.stage to styles.container

Custom Components

Formpicker

The Formpicker component from the app.js is a component that handles the selection of forms. This component will display all the forms in a modal. Once a form is selected, it will pass the form data to one of its properties. We will talk about the interactions later. For now just UI. Create a new file Formpicker.js on the same folder and write the following codes.

The Formpicker component

We imported React Native components for the layout and have the Formpicker class prepared with the component state initialized. The state holds our JotForm API key so start writing down your own key. You can get your key from JotForm My Account page.

Inside the Formpicker class, create the render method.

The render method require two views. One for the picker button and one for the modal. Now, let’s append the getButtonPickerView function inside the class to render the picker button.

When rendering a button we need a touchable component that can respond to touches. React Native have several of these components with different visual representation. iOS use TouchableHighlight or TouchableOpacity to lower the opacity of the button on tap. For Android, we will use TouchableNativeFeedback so it will use the native ripple effect. Head on to the documentation for more information about the properties.

Next, we’re going to render the modal view. It’s a simple way to present content above an enclosing view.

Modal components are invisible by default you have to change the state of the component using the visible property to make it appear. animationType property is use to make the modal slide up when opened. Note that the onRequestClose is a required property and must be included.

Now modal is ready to be rendered. We call the renderModalView function to build and show the content. Basically it will list out all available forms. This function will be a bit longer but we will put it by piece. Start by creating the renderModalView function inside the class.

Inside the function let’s render a loading message when we are requesting for forms. But we only make this request if the forms is empty.

Code inside the renderModalView method

As you can see, the loading state determines the outbound request. After the loading state and when the forms state receives a value. We render the forms in a list type manner inside a ScrollView component. The component is generic scrolling container. If you want to use a more robust and performance wise component that works pretty well with very long list. You can check the ListView component.

Do not forget to add a unique key property to any component you rendered in an iterator. The closest value you can use is the index of the array you are iterating to.

Moving on, Inside of each list item is TouchableNativeFeedback which responds to touches. When you tap a list item, it will call a method onListItemPress that process the form data as a parameter. Add this method to the class, make sure it’s not inside the renderModalView method.

Code inside the Formpicker class

This method calls the onItemSelect property of component passing the form that was selected.

Now let’s continue adding the value to be returned by the renderModalView function when everything has been set and the content has been created. This code must be inside renderModalView method.

Code inside the renderModalView method

Complete Formpicker class

Now it’s time to complete our Formpicker class. Append the following style code after the class declaration. We deploy the component styles and declaring the propTypes that this components should expect.

The STATUSBAR_HEIGHT here will help us to push down the View component so its just below the status bar. You can remove it to see what I mean. In Android, the status bar height is 25 while in iOS is 20.

If everything has been added correctly, there are no errors. The initial app render should be something like this when you run it.

Respond on Button press

We need to do something when the “Select Form” button is pressed. The modal picker should open and offer us all the forms as simple as that.

When you look at the onPress property of the button. It’s going to call the openPicker method that manage the state of the modal component. So let’s create the function and add it on the Formpicker class.

We set the modalVisible state to true to open the modal component. If forms are not available we will call a methodfetchForms to fetch our forms using the JotForm API. Once we have the data, we set all the forms we gathered to the forms state and make the loading state to false.

If we can open the modal, then we should be able to close it by just calling a certain method. Add this to the class.

To fetch all the user forms, we need to use user/forms endpoint of the JotForm API. For more available endpoints you can check the JotForm API documentation.

React Native has it’s own fetch function to load resources from a remote URL. You don’t have to import it. It can be access globally. The method returns a Promise to handle the response. You can check the docs for more information.

App Test

Everything should now be connected. From rendering the views, managing component states, responding from tap event and fetching the required data using the JotForm API. We should expect a fully working application. But to prove it otherwise we need to make a final test. Run Genymotion and reinstall the app. If everything goes smoothly, Congratulations!

Final thoughts

For code reference, visit the app github repository if you want to take a closer look on the source code.

If you want to compile the APK for distribution refer to this guide. It also includes on how to generate a signed APK if you want to submit an app to playstore.

I would also recommend to compile and test your app into a real device. You will see a huge performance boost. It will remove any lag or delays you experienced on DEV mode.

Enjoy!