How to Build an App with React Native Components
React Native components offer a variety of advantages for teams building across platforms. Learn how React Native impacts development projects and how to build a sample app of your own.
What Is React Native?
React Native is basically a set of libraries, which provide access to the corresponding native APIs. This means applications built with the technology will have access to native platform features like camera, user location, etc.
Who Is Using React Native?
Given the fact that React Native is a relatively new technology, the adoption and usage are quite good.
- Facebook (iOS and Android applications, also in Ads Manager)
A more complete list of the businesses using React Native can be found here.
How React Native Works
The most surprising thing for seasoned mobile developers about React Native is that it’s actually truly native.
While it is possible to reach the look and feel of the native UI this way, every Cordova application will struggle in performance, which is especially true for graphically-heavy applications and on the Android platform as a whole. This will lead to poor user experience and frustrated clients.
Benefits of Using React Native
Many businesses require mobile applications for both of the major platforms — iOS and Android. The usual approach is to build iOS applications using one of the native languages (Swift or Objective-C) and build Android applications using Java. The main disadvantage of that approach is businesses must pay for developing and maintaining two separate applications that do the same thing.
With React Native, the application has shared a codebase. According to Facebook in their Ad Manager application, code reuse is 87%, which is a huge number.
Another great feature is, if teams need a platform-specific component, you can easily import it into the application. The Platform module detects the platform where the application is running and can be used to add specific components into the app.
Communication between application modules is done through events or through passing props. This is a powerful feature which exposes all the power of the underlying platform to React Native application.
Smaller Learning Curve
As an example, let’s consider rendering a list of items in Ionic, which uses Angular and React Native. In Ionic, development teams must use ngRepeat directive. If filtering based on a condition is needed, $filter service must be used. Developers who aren’t familiar with Angular will have a lot of questions, based only on this simple example — what is ngRepeat; how do you use $filter; what is the syntax for filtering items; what is $scope?
Better, Smoother Developer Experience
React Native enables quick prototyping and a very high initial velocity. Implementing basic features is easy, and if needed, they can be extended with native code and native views.
React Native Demo Application Tutorial
In the following tutorial, we’ll create an app, which will let users browse through a list of employees and see details about them. Users will also be able to search for an employee by name.
We’ll use data from https://randomuser.me. The app will look like the below example.
We’ll install Node.js using Homebrew. First, install Homebrew by following the instructions on its website.
After Homebrew is successfully installed, install Node.js by typing the following in the Terminal.
Next, we need to install watchman. Watchman is a file watcher module created by Facebook. React Native uses it to detect code changes in application files so the code can be rebuilt accordingly.
Next, install React Native CLI by using npm, which is the node package manager. Note: They are packaged together.
From the Terminal, navigate to your working folder and init the project by running the following command:
The CLI will create the structure of our project. Starter React native app is in index.ios.js for iOS and index.android.js for Android. However, for the rest of this tutorial, we’ll be using only iOS files. After the creation of the application is done, open Employee.xcodeproj which is in an iOS folder in XCode and run the app. The JS code will be loaded from http://localhost:8081/index.ios.bundle and React Packager together with node server will run to handle the above request.
On build complete, you should see the following screen in the simulator:
The welcome screen gives us hints about how to open developer tools and how to reload the application, both of which can be done really simply by pressing Command + Control + Z and Command + R.
Developing Our App
Let’s get started. It will be a simple employee listing application with additional search functionality. We’ll focus on the logic and will spend less time on styling the components.
The application structure has the following form:
In the API folder for the sake of simplicity, we’ll mock all the data that we need for our application.
Application building blocks (the components) are separated in containers and components folders. The idea behind this is simple, dividing application components into presentational and stateful components makes reusability much easier and enforces separation of concerns. All the components in the components folder are presentational. They impact how things look. Components in containers folder are the ones that handle data flow and mutations.
Now open index.ios.js and add the following:
AppRegistry defines the entry point to the application and provides the root component. Next, we will examine the application skeleton, the App.js container component.
The app will use Tab bar with two items in it — Employees and Search. To add this type of functionality, we’ll use TabBarIOS component, which is provided by React Native. For every tab that we need, we’ll create a TabBarIOS.Item component and pass as children our custom component which will handle the tab route(EmployeesTab and SearchTab components). Methods _employeesOnPress and _searchOnPress are passed as onPress handlers to the corresponding components, and they are responsible for handling the state for the selected tab.
Adding Tab Components
Let’s create EmployeesTab and SearchTab components. They are pretty similar and wrap the NavigatorIOS component, which creates the routes for the tabs.
Employees List View
In the Employees container component, we will create the ListView with all the employees available. On componentDidMount lifecycle hook, which is called when a component is loaded/mounted onto the UI view, we are loading the data and setting up the dataSource for the ListView. Then, the data is passed via props to the EmployeesList presentational component, which is responsible for rendering the ListView.
We use the ListView ReactNative component and pass *dataSource* and *renderRow* functions. *renderRow* is responsible for List item row appearance and behavior. We are using TouchableHighlight component, which is a wrapper for making views respond properly to touches. When a row is pressed, _rowOnPress is triggered, the opacity of the View is decreased, which allows the underlying color to show through, darkening or tinting the View. Also, a new route with (EmployeeDetails) props is pushed to the navigator object.
Now that we have completed all the routes for the Employees tab, we’ll work on the Search tab enabling the user to search Employees by name.
Create a Search.js container component and add the following:
When the user types in the search box, we are querying the API, and the returned data is displayed. Notice that we are reusing the EmployeesList component to show the results, which is a great example of React Native components’ reusability.
Finished App Screens
React Native is a relatively new technology, which already has great adoption. It increases developers’ productivity; it’s scalable and could save businesses time and money.
[Original Post Here]