How to start with React Native

In this article, I’ll tell you what you need to bootstrap a React Native app.

So what is React Native?

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. (…)

* from React Native

React Native allows you to create Android and iOS applications with the same code base, that behave nearly the same using all the resources of React with a little tweak.

Setting Up Your Development Environment

The installation process that is described on the React Native site is well documented and easy to follow, but here is the short version. I use a MacBook Pro as my development machine so the commands will be for macOS.

Installation process

1. Install Xcode and Android Studio
2. Install node and watchman

[Code snippet — Medium embed: step2.shell]

3. Install Java SDK

[Code snippet — Medium embed: step3.shell]

4. Install Xcode command line tools

[Code snippet — Medium embed: step4.shell]

Open Xcode, then choose the Preferences… menu.
Go to Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

5. Install CocoaPods

[Code snippet — Medium embed: step5.shell]

6. Install react-native-debugger

[Code snippet — Medium embed: step6.shell]

And you are ready to go.

Now what you need to do is bootstrap your application.

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js. (…)

* from React Native

[Code snippet — Medium embed: react-native-init.shell]

After you create your app you can choose to run the app on iOS or Android.

To open the app on iOS just run this command, it will open the iOS simulator and install the app.

[Code snippet — Medium embed: react-native-run-ios.shell]

To open the app on Android you will need to create a virtual device on Android Studio, open the virtual device and run the following command.

[Code snippet — Medium embed: react-native-run-android.shell]

And there you go, the app is running!

Debugging

To use react-native-debugger you need to enable remote JS debugging on the simulator option:

• On iOS press CMD + D and click on Debug JS Remotely.
• On Android press CMD + P .

A nice feature of React Native is Hot Reloading, which allows you to see the code changes in real time without having to restart the app.

To enable this option, open the simulator options and click on Enable Hot Reloading.

At this point you have your React Native environment set and ready to start coding some apps.

Recommended links

• React Native
• React Native Community
• Awesome React Native
• VSCode React Native

I’m a software developer from Portugal, currently working at Runtime Revolution as a front-end and mobile developer.