React Native Beginner’s Guide 2018: What Is React Native, How To Setup, Create A React Native App, And Fix Common Errors

By Jeff Lewis

5 min readSep 1, 2018

Notes:

Knowledge of React required

What is React Native?

React Native is a Javascript framework for building cross platform iOS and Android mobile applications. Like React, React Native was also built by a team over at Facebook and shares the component-based structure.

React Native allows the application to be written in Javascript and then the React Native Compiler will convert your Javascript code into native code for iOS and Android environments. This means the React Native application doesn’t run in a WebView nor is it a web application.

Additionally, HTML is not used for building React Native applications. Instead, React Native uses it’s own Markup Language library along with React to build iOS and Android applications.

Note: React Native applications require both React and React Native dependencies.

Why Do We Use React Native?

Cross Platform (iOS/Android).
Native.
Saves time by only developing code once.
Less Expensive by only developing code once.
Easier to develop, especially if you are familiar to React.
Open Source (Github Repository).
Many available device APIs: CameraRoll, AsyncStorage, Geolocation, ImageEditor, PushNotifications, Vibration, Share, Messages.

When Do We Use React Native?

As React is used to create Web Applications, React-Native is used to create mobile applications for iOS and Android.

Why build mobile apps with JavaScript when I can just write my mobile apps in Swift or Java? Because the JavaScript code the you write React Native only has to be written once (Not Always). Tweaks to your code may be required for your React Native code to works in both iOS and Android environments.

How Do We Install React Native?

We will need to install the Command Line Interface (CLI) for React Native, so Node.js will be required for its install. There are two install options, depending if you have Node.js already installed or haven’t yet.

Option A: Node.js Already Installed

Note: It’s recommended to use a newer version of Node.js, so if you already have it installed, run the Terminal command node -v to see which version you’re on. To update Node.js, run the Terminal command npm update npm -g.

Run the Terminal command npm install -g react-native-cli. Note: This command may have to be ran as an administrator. To run as an administrator, run the Terminal command sudo npm install -g react-native-cli.

Option B: Node.js Not Installed Yet

Download Node.js to install the React Native Command Line Interface (CLI), which can be downloaded from here.
Once Node.js has installed, run the Terminal command npm install -g react-native-cli. Note: This command may have to be ran as an administrator. To run as an administrator, run the Terminal command sudo npm install -g react-native-cli.

How Do We Setup A React Native Project?

Now that we have the React Native Command Line Interface (CLI) installed, we can create a React Native project. If you’re familar with React and how we can easily create a React project with the command create-react-app, we will be doing a similar thing for React Native.

Steps:

Note: The Terminal command react-native init projectName to start a React Native project won’t work if there are any “-” dashes between the words of the name of your project. There’s a workaround to this in Step #1.

Run the command react-native init projectName. If you need the “-” dashes to uniformly match your project folders like I wanted, use projectName and edit your project file to project-name. The same should be done for any Git related information in your package.json file.
Our React Native starter boilerplate is now ready, so we can now run or application in an iOS or Android environment.

How Do We Use Our React Native App?

Note: You may run into some errors when trying to start up the iOS or Android Simulator. In that case, please refer to the next section “Common React Native Errors And Error Fixes” or “Debugging Errors And Error Fixes.”

A. Option 1: iOS Simulator

In the root directory of your project, run the Terminal Command react-native run-ios. This make take some time to load.
We now have a fully functioning iPhone simulating iOS to test our React Native app with. We also can change the default iPhone to an iPhone 8 Plus or an iPhone X for example by navigating to Hardware -> Device.

B. Option 2: Android Simulator

Note: Java required. A popup should occur for the necessary Java package.

In the root directory of your project, run the Terminal Command react-native run-android. This make take some time to load.
We now have a fully functioning Android phone simulating Android OS to test our React Native app with. If you wanted to change the default iPhone to an iPhone 8 Plus or an iPhone X for example by navigating to Hardware -> Device.

Common React Native Errors And Error Fixes

The error No bundle URL present can occur in your Terminal, iOS Simulator, or both. Below are 3 easy fixes to fix the No bundle URL present error.

`No Bundle URL Present Error:` Terminal

No bundle URL present.Make sure you're running a packager server or have included a .jsbundle file in your application bundle.

`No Bundle URL Present Error:` iOS Simulator

Option A: Fix Error By Re-Running Simulator

Just rerun react-native run-ios. Sometimes it just throws the error on the first time running it for me.

Option B: Fix Error By Updating React Native

Open Terminal.
cd into ProjectName.
Run react-native upgrade.
Run react-native run-ios again.

Option C: Fix Error By Killing All Processes Running On Port

lsof -t -i:8081

Option D: Fix Error By Deleting iOS Build Directory

Open Terminal.
cd into ProjectName.
cd into the ios folder.
Remove the build folder with rm -r build.
Make sure run ios is not running in any other Terminal windows.
Run react-native run-ios again.

Debugging Errors And Error Fixes

Now if we don’t use HTML in our React Native application, how can we debug with a console such as the Google Chrome console? The React Native team has made it possible to debug React Native applications just as we would debug a React application in a console such as the Google Chrome console.

There two ways we can use the browser console to debug our React Native application:

Option A: Keyboard Shortcut

In your iOS Simulator, press cmd + D.
Select Debug JS Remotely. This will open a window in your internet browser where you can then view the console.

Option B: Visit URL Manually

Visit http://localhost:8081/debugger-ui/ in a browser.

You’re All Done And It’s Time To Mobilize

And that’s it! You now know how to install, setup, create a React Native application for iOS and Android, and debug common errrors.

No one’s perfect. If you’ve found any errors, want to suggest enhancements, or expand on a topic, please feel free to send me a message. I will be sure to include any enhancements or or correct any issues.