Using React Native to create an iOS App (Updated: May 2020)

Photo by Przemyslaw Marczynski on Unsplash

If you are looking for a quick guide on how to start developing iOS apps with React Native, you are in the right place, this is not a programming article, but a step by step on how to prepare your computer to start developing and building a simple app with navigation between screens where you can build on top.

Preparing the Development Environment

Disclaimer: We are going to build an iOS application therefore this article and the commands presented are based on macOS.

Installing node and watchman

React Native uses watchman to detect when you’ve made changes to the code and then automatically build and push the update to your device/simulator without you needing to build it again manually.

brew install node 
brew install watchman

Installing Xcode

Open the App Store, look for Xcode, and click install. Depending on your internet speed connection, this can take a while because the size of the latest version is 8.1Gb.

‎Xcode

Installing an iOS Simulator in Xcode

To install a simulator, open Xcode > Preferences… and select the Components tab. Select a simulator with the corresponding version of iOS you wish to use.

Installing CocoaPods

CocoaPods is a dependency manager for Swift and Objective-C like NPM for Nodejs. Since RN creates a native application it needs this dependency manager to link the node packages used in the project.

sudo gem install cocoapods

Creating the Application

To create the application run the following command in a terminal, make sure you have installed Node >= 8.10 and npm >= 5.6

npx react-native init YourProjectName

Running the Application

After the previous step finishes, you can run the application right away using the next command

cd YourProjectName && npx react-native run-ios

If everything goes well, the iOS simulator will start together with Metro (The JavaScript bundler for React Native) and this is what you will see.

Adding Navigation to the Application

Now that the application is running, it is time to add navigation between screens. To achieve this, let’s take advantage of the react-navigation package.

First thing is to install the following dependencies

npm install @react-navigation/native @react-navigation/stack
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Installing the CocoaPods dependencies

Add the previously installed packages as CocoaPods dependencies

npx pod-install ios

Coding

Adding react-navigation

Add the next line at the very top of the index.js file in the root folder, it needs to be the first line or it won’t work

import 'react-native-gesture-handler';

The file now should look like this

Almost every time you install a new CocoaPod dependency, the application needs to be re-built, if you don’t do it, you will get the next error when adding the previous line and saving the file

TypeError: null is not an object (evaluating ‘_RNGestureHandlerModule.default.Direction’)

Fix it by re-building the application with the same command used earlier

npx react-native run-ios

Creating the Screens

In order to navigate, the application needs at least two screens, for this example, we are calling them Home and Details. Create the following folder structure in your project

Put the next code inside the index.js and Home.js files of the Home folder

index.js

Home.js

For the Details folder files, put the same code replacing all the Home occurrences for Details

Preparing the Screens for navigation

To make the screens created in the previous step available to be navigated, add the next code to the App.js file

The first screen you put inside the Navigator will be the first to be shown when running the application, in this case, Home

At this point, the application should look like this, you can see now a header with the title specified in the options of the screen. (line 16 of Home.js)

Navigating between Screens

All of the screens added to the Navigator now will receive an object called navigation among its props, this object has a function called navigate which is going to be used to navigate to the Details screen.

Add a button to the Home screen and use the navigate function which receives as parameter the name of the screen to which navigate, this name is specified when adding the screens to the Navigator, in this case, Details

navigation.navigate('Details')

The Home.js file should look like this now

And the application like this

When the Go to Details button is clicked, the Details screen appears, you can see it also has a header with the title and a Back button together with the name of the previous screen that is added automatically, click on it and you will go back to the Home screen.

React-navigation offers other types of navigation like Drawer (Side Menu) Navigation and Tabs Navigation. Check the docs here. You can also customize the header of each screen, add buttons, change the text of the back button, change the title, etc. Check the options here.

What’s Next?

• Run your app in a real device.
• Get your app ready to publish it in the App Store.