How to Build a Mobile App with React Native Components

Active smartphone users might have noticed that the number of mobile applications in the AppStore and Google Play is growing daily. This report serves as evidence to this, and, despite the apparent colossal difference between the user numbers on the most popular platforms - Android and iOS - both have rather large audiences, making their developers successful. The easiest and least expensive way to create applications for two platforms at once is cross-platform development frameworks instead of a framework for building native apps.

In this article, we will discuss React Native. This is one of the most popular environments for the development of cross-platform mobile apps, to which many progressive IT companies are switching. In addition, we provided a brief manual on how to build a mobile app with React Native components.

Why React Native?

React Native, based on one of the most popular and advanced Javascript libraries - React, is a framework built by Facebook developers, designed to create mobile applications for iOS, Android, and Universal Windows Platform. React Native is known primarily for its architecture - the business logic of cross-platform software is created with JavaScript while the user interface is created with platform-native languages; however, not all developers immediately choose RN.

For example, if you decided to make your application cross-platform, you probably already reviewed your share of opinions that might potentially help you overcome the difficulties of making a choice in favor of a particular solution among a large number of suitable frameworks for these purposes.

Here is a list, though not entirely complete:

• Appcelerator Titanium;
• Xamarin;
• Phone Gap browser wrapper;
• Ionic (focuses exclusively on creating layouts and UIs);
• Ext JS;
• AngularJS;
• JQuery Mobile (obsolete), etc.

React Native was not included in this list because it is far ahead of all the mentioned development environments. Now we will explain why. The cross-platform application’s principle of operation lays in the following. The code is launched in the browser window or wrapper on the mobile device. Browser modules allow access to APIs, hardware and software capabilities of the device. Since layout drawings and page renderings (JS, HTML, CSS) is performed on the client side, it may take some time. From the user’s point of view, this results in low responsiveness (which, in turn, can be a complete fail for your application if it actively uses a touchpad or an accelerometer). This situation is further aggravated by the slow DOM rendering. React Native employs virtual DOM, a lightweight copy of it, which makes the mobile application much faster than the usual HTML5/JS application. In addition, RN uses a separate thread to start the application execution (that is, it does not block the main thread that is intended for the user interface). Sound impressive? React Native’s advantages were the major reason it was chosen for the development of such popular applications as Facebook, Instagram, 2gis, and Meduza.io.

More About React Native: Where its Uniqueness Lies?

The efficiency of applications created on the basis of React Native is strikingly different from those built with Apache Cordova (ex-PhoneGap). In particular, RN code is characterized by the consolidation of pure Javascript with JSX (which has a syntax similar to XML). What does this mean, in practice? First of all, it allows expressing native components as functions that reflect the current state of the application.

Moreover, due to the constant improvement of the old operation mechanisms and the appearance of new ones (for example, React Fiber), the level of efficiency of these applications is almost identical to their native alternatives. This is the main advantage of this framework - get a high-quality and smoothly running mobile software using web technologies.

But this is not the only one of React Native’s advantages. They also include the abundance of technologies that can be used in the process of working on the project (such as Redux, Reflux, MobX, and many others). RN is also not limited in its ability to integrate pieces of code in less traditional languages - TypeScript, ClojureScript, and CoffeeScript.

Although it is fair to say that only 5-7 years ago RN was limited to the creation of Javascript-based browser applications, now it is the most powerful tool for backends (using Node.js), desktop software (using NW) and various games based on Unity. Moreover, the extremely positive dynamics of React's evolution lead two of the biggest IT companies - Microsoft and Samsung - to announce its official support.

What Are the Less Significant Practical Advantages of the React Native App Development?

Above, we got acquainted with the features of RN, which distinguish it from other well-known frameworks for cross-platform development. Now, let us consider the less significant benefits that are nevertheless important for developers.

Ease of learning. In order to start working with React Native, you will only need knowledge of JavaScript. In addition, RN does not require specific syntax details, which is typical of many other development environments. That is why this framework is the best choice for beginners.

Bypassing AppStore policies when pushing updates. Not quite significant, however, still annoying: in order to be published through the AppStore, an update must pass a two-day test review. With RN, you do not have to wait. You can create "live" updates that will instantly be uploaded to the AppStore.

Simpler UI development. If you have not had the experience of native development yet, then we’ll warn you about the possible difficulties associated with the imperative writing style inherent to Java, Objective-C or Swift. Replace the single row and the application will suddenly work incorrectly. With React Native and JS, everything is much simpler. Adhering to the declarative style of code creation (intrinsic to good old HTML), you can concentrate more on the development of the functionality itself, rather than on methods and principles of its correct implementation.

Accelerated debugging. RN uses the specific function of Hot Reload during debugging. The idea is to maintain the current state of the application while adding new versions of files that have been edited during the execution of the code. In order for these new files to go through the debugging process, no more than one second is needed, in most cases.

Simple integration with native modules. You can easily import native components into the RN-based application using the Platform module. This is a very useful feature that eliminates the need to replace native code (which, perhaps, was created earlier) with Javascript procedures.

Reduction in required labor resources. The huge advantage of React Native is that, unlike native development, there is no need to involve two separate teams for iOS and Android (and perhaps more, if you plan to support more than two mobile platforms).

Creating a Simple Application with React Native

In order to see how to use ReactJS in the native mobile app development, we will try to create a mobile app with ReactJS, with which the user can operate the list of employees of an organization, as well as their personal data. Let us start looking at this brief tutorial.

1. Install Node.js. If you already have React Native installed, you can safely skip this step. Note that these recommendations are similar to both Windows and MacOS. First, you need to install Node.js. This is done with the help of Homebrew. Node.js is downloaded and installed using the following terminal command:

brew install node

2. Install Watchman. Now, install the module for reading files: Watchman. Enter the following command into the terminal:

brew install watchman

3. Install CLI. Use the NPM package manager to install CLI with the following command:

npm install react-native-cli -g

4. Create the project structure. Move from the terminal to the project folder and enter the following:

react-native init Employee

In this way, we will create all the files needed to run the application on both platforms. Now start the file Employee.xcodeproj, which can be found in the folders XCode/iOS or XCode/Android (for simplicity, we will continue to consider building an iOS app with React Native, building the application with React Native for Android will look absolutely similar). As a result, the simulator displays the following:

When you assemble the project, you will receive a window with recommendations for further action. In particular, it will say that, to use the SDK, one must press ‘Command+Control+Z’ and reload the application with ‘Command+R’.

5. Start the development. Open the file ‘index.ios.js’ and input the following lines into it:

1
2
3
4
5

import React from 'react';
import {AppRegistry} from 'react-native';
import App from './src/containers/App';

AppRegistry.registerComponent('Employee', () => App);

Here, the ‘AppRegistry’ command indicates the entry point to the application and defines the root component.

Note that the structure of any application on React Native is as follows:

Now we need to change ‘App.js’. The application we create will use two elements: a search function and a panel with the employee list. They are within the application - tabs that are created using the ‘TabBarIOS’ component. Thus, each of the tabs will require the creation of its own ‘TabBarIOS.Item’. In addition, we will need to describe the methods ‘_employeesOnPress’ and ‘_searchOnPress’, which will handle the relevant components and be responsible for the state of the user selected tab.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

import React, {Component} from 'react';
import {
    StyleSheet,
    TabBarIOS
} from 'react-native';
import {bind} from '../utils/utils';
import EmployeesTab from './EmployeesTab';
import SearchTab from './SearchTab';
 
const employeesIcon = 'data:image/png;base64,...';
 
class App extends Component {
    
    constructor(props, context) {
        super(props, context);
        this.state = {
            selectedTab: 'employees'
        };
        bind(this)('_searchOnPress', '_employeesOnPress');
    }
    
    _employeesOnPress() {
        this.setState({
            selectedTab: 'employees'
        })
    }
    
    _searchOnPress() {
        this.setState({
            selectedTab: 'search'
        })
    }
    
    render() {
        return (
            
                
                    
                
                
                    
                
            
        )
    }
}
 
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
 
 
export default App;

Next, we need to describe ‘EmployeesTab’ and ‘SearchTab’ components, which act as wrappers for the ‘NavigatorIOS’ component that generates routes for tabs. To do this, enter the following lines:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import React from 'react';
import {
    NavigatorIOS,
    StyleSheet
} from 'react-native';
import Employees from './Employees';
 
 
const EmployeesTab = ({props}) => (
    
);
 
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});
 
export default EmployeesTab;

////

import React from 'react';
import {
    NavigatorIOS,
    StyleSheet
} from 'react-native';
import Search from './Search';
 
 
const SearchTab = ({props}) => (
    
);
 
const styles = StyleSheet.create({
    flex1: {
        flex: 1
    }
});
 
export default SearchTab;

The next step is to add the option to scroll the list of employees to the ‘Employees’ component. To do this, we will create a ‘ListView’ component, to which all our employees will be "tied." Let us see how the process of binding and transferring data about employees to the ‘EmployeesList’ presentation component is performed:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

import React, {Component, PropTypes} from 'react';
import {
    StyleSheet,
    View,
    ListView,
    TouchableHighlight,
    NavigatorIOS
} from 'react-native';
import {bind} from '../utils/utils';
import Employee from '../components/Employee';
import EmployeeDetails from '../components/EmployeeDetails';

class EmployeesList extends Component {
    
    constructor(props, context) {
        super(props, context);
        bind(this)('_renderRow', '_rowOnPress')
    }
    
    static propTypes = {
        dataSource: PropTypes.object.isRequired,
        navigator: PropTypes.object.isRequired
    };
    
    _renderRow(rowData, sectionId, rowId, highlightRow) {
        const _rowHighlightOnPress = () => {
            this._rowOnPress(rowData);
            highlightRow(sectionId, rowId)
        };
        
        return (
            
                
                    
                
            
        )
    }
    
    _rowOnPress(employee) {
        this.props.navigator.push({
            title: '${employee.name.first.toUpperCase()} ${employee.name.last.toUpperCase()}',
            component: EmployeeDetails,
            passProps: {employee}
        })
    }
    
    render() {
        return (
            
        )
    }
}

const styles = StyleSheet.create({
    flex1: {
        flex: 1
    }
});

export default EmployeesList;

This module will render the current state of the application when the user clicks on the screen. In particular, for these purposes, we will need the ‘TouchableHighlight’ method, which ensures the responsiveness of the application to user taps. Let us introduce the following code into the project:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ListView,
    NavigatorIOS
} from 'react-native';
import {bind} from '../utils/utils';
import EmployeesApi from '../api/mockEmployeesApi';
import EmployeesList from '../components/EmployeesList';

class Employees extends Component {
    
    constructor(props, context) {
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        super(props, context);
        this.state = {
            dataSource: ds.cloneWithRows([]),
            isLoading: true
        };
        bind(this)('_renderLoadingView')
    }
    
    _renderLoadingView() {
        return (
            
                Loading...
            
        )
    }
    
    componentDidMount() {
        EmployeesApi.getAllEmployees()
            .then(function (data) {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(data),
                    isLoading: false
                })
            }.bind(this));
    }
    
    render() {
        if (this.state.isLoading) {
            return this._renderLoadingView();
        }
        
        return (
            
                
            
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 40
    }
});


export default Employees;

Next, we will add the search function. Thanks to this, any user will be able to find an employee by their name. In order to implement this feature, you will need to create the ‘Search.js’ component in the ‘containers’ sub-folder and put the following code into it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

import React, {Component} from 'react';
import {
    StyleSheet,
    ListView,
    TextInput,
    View,
    NavigatorIOS
} from 'react-native';
import {bind} from '../utils/utils';
import EmployeesApi from '../api/mockEmployeesApi';
import EmployeesList from '../components/EmployeesList';

class Search extends Component {
    
    constructor(props, context) {
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        super(props, context);
        this.state = {
            text: 'Search by name',
            dataSource: ds.cloneWithRows([])
        };
        
        bind(this)('_searchInputOnChange', '_getAllEmployeesAndUpdateData')
    }
    
    componentDidMount() {
        this._getAllEmployeesAndUpdateData();
    }
    
    _getAllEmployeesAndUpdateData() {
        EmployeesApi.getAllEmployees()
            .then(function (data) {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(data),
                    isLoading: false
                })
            }.bind(this));
    }
    
    _searchInputOnChange(text) {
        if (text.length < 1) {
            this._getAllEmployeesAndUpdateData();
            this.setState({
                text
            });
        }
        
        EmployeesApi.searchEmployeeByName(text)
            .then(function (res) {
                this.setState({
                    text,
                    dataSource: this.state.dataSource.cloneWithRows(res)
                })
            }.bind(this))
    }
    
    render() {
        return (
            
                
                
            
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 40
    },
    searchInput: {
        height: 44,
        margin: 10,
        marginTop: 30,
        padding: 10,
        borderWidth: 1,
        borderColor: '#CCCCCC'
    }
});


export default Search;

Thus, with each user request, the connection to the API will be established, which will display the requested information (in this case - a particular employee’s personal card).

And, we are done! Now let us review the screenshots that show what a ready application might look like:

Cost to Develop a Mobile App with React Native Components: How Much Man-hours Will Each Stage of Development Require?

The overwhelming majority of investors believe that, if the cost of developing a native application is a certain amount (let us denominate it N), then the cross-platform cost will be at least twice as cheap. Our experience in developing mobile software with cross-platform frameworks evidence that this statement can be wrong for applications with complex business logic, as well as for those that actively use mobile device capabilities (camera, contact book, GPS, image editors, etc.). In this case, the cost of cross-platform development will be about 0.9*N. The reason for this rather high coefficient is the specificity of the development for the Android platform: many Android smartphone manufacturers create their own versions of this platform, the nuances of which may not be taken into account in cross-platform frameworks. With React Native, the situation is radically different. As already noted above, the interface of software created with the help of RN is completely native for each of the platforms, so developers will not need to spend their time checking it across different OEM variants. Nevertheless, regardless of the chosen framework, when the budget allocated for software development is estimated in tens of thousands of dollars, even such a seemingly insignificant difference can become a decisive argument for investors in favor of cross-platform. What is the approximate price of the project? Let us find out how high a price it can fetch, in man-hours. React Native app development stages of the cross-platform mobile application can include:

• Engineering. Planning is an integral part of the software creation process. It involves choosing the appropriate tools and methods for implementation of the intended functionality, as well as the distribution of responsibilities and tasks. Typically, this phase takes at least 80 man-hours.
• Coding. Attention must be paid not only to the application’s logic but also to the design of its user interface. To make a mobile app with ReactJS, developers need at least 1,000 man-hours.
• Testing. No successful software can do without alpha and beta testing. Depending on specifics, testers will need at least 80 man-hours.
• Technical support. To ensure that the application does not lose its relevance over time, you will need to regularly supply updates (or, at the very least, solve the problems and eliminate defects found after its release). For these purposes, a remote team would be enough. On average, a separate update would take anywhere from 60 to 120 man-hours.

Depending on app complexity and taking into account hourly rates of developers from ex-USSR countries, the typical React Native app development can cost anywhere between $38,000 and $100,000.

If building a mobile app with React Native is a complex task for you, contact us today!

Applikey Solutions is a development team that, for years, has been working on various software solutions for mobile platforms and web. Among our achievements are already more than 100 successfully implemented projects. Therefore, if you have an idea for a startup, but you do not know how to embody it into the mobile software format - hire our company for our development services! Contact our experts today to discuss the details of cooperation (we also have experience in remote collaboration).