App development with React Native. Develop a native app for both iOS and Android using one code base

Mobile app development for multiple platforms usually requires that you create and maintain two separate apps which are developed in different languages. For instance, when developing an app for both iOS and Android users, one will have one app developed in Swift or Objective-C and another app developed in Java.

With React Native, however, you can develop apps for both iOS and Android using one language, Javascript! So if you have experience with Javascript, you can start developing a mobile app right now! And if you do not have experience with javascript, I would say that the learning curve for Swift/Objective-C and Java is higher than that for Javascript. Plus, you would only be learning one language instead of two.

So without further ado, let’s get started on developing an app with React Native.

Install React Native

First things first, you will need to install and configure your system for your app’s development. A complete guide on installing React Native and all necessary dependencies can be found here.

Create a project

To create a React Native project, run command

react-native init nameOfProject /*Replace nameOfProject with your app's name*/

This will initiate a React Native Project folder with necessary files to start developing your app. Locate the project folder and open it to see what’s inside.

Run your app

When you open your project folder, you will see that a number of files and folders have been generated.

Image for post
Image for post
Inside my react native project folder (ReactTut)

To run your app on iOS, you can either run it by running command react-native run-ios inside the the react-native cli interface, or by opening iOS project in XCode (In my case, this is located at ReactTut/ios/ReactTut.xcodeproj) and clicking on the run button in XCode.

To run the app on Android, run command react-native run-android inside the react-native cli interface. Make sure you have an emulator running or android device with developer’s options enabled.

Modify your app

When your run your app, you notice it is not blank.

Image for post
Image for post
App running with initial screen

This is because the cli command generates an entry screen for you to get started with. Nice! The code for that screen is located in the file App.js. You can modify the code and reload the app to observe the changes.

Looking at the code, you first see two import statements

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

These are importing built-in components from packages react and react-native as used in the code.

const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});

The above is a constant that contains a string, and has a different value depending on which platform the app is running on. If it is on iOS, the value will be Press Cmd+R to reload,\n’ + ‘Cmd+D or shake for dev menu, and if the app is running on Android, it will be Double tap R on your keyboard to reload,\n’ + ‘Shake or press menu button for dev menu.

export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}

The above is the main class that contains the stuff that show on screen. Note the render function. This function returns UI components that show on screen. The two components View and Text are all built-in components. See a complete list and guide on built-in components here.

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,
},
});

The above is a constant containing all the styles for the UI components, in a way similar to CSS styles in web apps.

The code contains many pieces that are all part of the ES2015 (ES6), as a set of improvements made to Javascript, and may not be familiar to some. Don’t be worried, you can easily pick these up.

Right now this app is not that interesting as it is only a screen showing some text as seen in the image above. So, let’s make it interesting by turning this screen into a login screen with two text inputs for username and password and a button for login.

Image for post
Image for post
Final Screen after adding new components
Image for post
Image for post
Fields with input
Image for post
Image for post
After pressing Login Button

Complete Code for the above UI

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, TextInput, Alert, Dimensions } from 'react-native';
// Get device's width
var width = Dimensions.get('window').width;
type Props = {};
export default class App extends Component<Props> {
// function to run when login button is Pressed
login = () => {
Alert.alert(
'Login',
'Login Button was Pressed :)',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
}render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>ReactTut</Text>
<View style={styles.loginBox}>
<TextInput
style={styles.input}
editable = {true}
maxLength = {40}
placeholder="User Name"
/>
<TextInput
style={styles.input}
editable = {true}
maxLength = {40}
placeholder="Password"
secureTextEntry={true}
/>
<TouchableOpacity style={styles.loginButton} onPress={this.login}>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
paddingTop: 80,
},
welcome: {
fontSize: 32,
textAlign: 'center',
margin: 20,
},
input: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
backgroundColor: '#f1f1f1',
borderRadius: 5,
borderColor: '#d8d8d8',
borderWidth: 1,
height: 40,
margin: 20,
width: width - 30
},
loginBox: {
},
loginButton: {
backgroundColor: '#2E86C1',
color: '#FFFFFF',
height: 40,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 5,
margin: 20
},
loginText: {
color: '#FFFFFF',
fontWeight: '600',
fontSize: 17
}
});

In a matter of minutes, you have a login screen UI for your app! Cool isn’t it?

From this point forward, you can start adding screens and components per your app’s requirements. The new components I added, TextInput, TouchableOpacity, Alert and Dimensions, are all built-in components and you can learn more about them from the official React Native guide here.

Few things to think about

When you decide to work on a React Native project, there are a number of things you should know and consider before you start.

  • You will still need to use Xcode and Android Studio. Yes, you write your code in Javascript, but you still need to have knowledge about the development tools needed to package and deploy your app. Plus, when you add third-party components and modules to your app, it is certain that at some point you will need to add a few lines of native code somewhere in your app or add some configurations to your app through these tools.
  • React Native performance. React Native being a fairly new technology means there still are some limitations to it such as slower performance. For apps that do not do heavy computing, this performance issue is hardly noticeable and may not be observable at all, but for apps that perfom heavy tasks such as heavy animations, performance can be an issue when developers do not deal with issues that may lead to slow performance. However, a React Native app can be fast! Check out a list of some of the apps made with React Native here. Also, check out the following articles, Performance from the official React Native page and Performance Limitations of React Native and How to Overcome Them by Tal Kol to gain more insights into the Performance of React Native apps, and what you can do to build an app with the best performance possible.
  • React Native or Swift and Java, or Hybrid? Depending on your app’s requirements, it may be suitable to develop it entirely in Swift/Objective-C and Java or entirely in React Native. If you think that only a few views may be better off developed in native code, you can also consider developing a hybrid app, with some part of it written in React Native and other parts written in native code using Swift/Objective-C and Java.
  • Your code for iOS will not be exactly the same for Android. “But I thought… it is one code base!” Yes, and a large chunk of your code will be the same, but, as you would expect, some features and requirements are applicable to one platform and not the other, or the way you implement a feature on iOS may not be the same for Android. Therefore, you will need to make minor tweaks in your code to fulfill your app’s requirements for the different platforms.

Written by

Software Developer, Entrepreneur, and Technology Enthusiast.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store