Now you can build React Native apps on any platform including OS X, Windows, and Linux without having to install Xcode or Android Studio. All thanks to Expo and Create React Native App!

What is Expo

Expo is a platform on top of React Native that lets web developers build truly native apps that work on both iOS and Android by writing them once in just JavaScript.

Expo SDK

Expo SDK is a native-and-JS library which provides access to the device’s system functionality (things like the camera, contacts, local storage, and other hardware). That means you don’t need to use Xcode or Android Studio, or write any native code, and it also makes your pure-JS project very portable because it can run in any native environment containing the Expo SDK.

Expo mobile app

Expo mobile app lets you preview projects built on Expo. You can test your projects as you code, and share them with anyone if you’d like.

• Install Expo app on your phone.

What is Create React Native App

Create React Native App lets you create React Native apps with no build configuration. It uses Expo SDK, which means you can run your apps directly on your phone with Expo mobile app.

• To install it execute the following in your Terminal app:

npm install -g create-react-native-app

How does this all work together

1. First, you create a new app with Create React Native App.
2. Then, you launch Expo mobile app on your phone and scan a special QR code outputted by Create React Native App to run the app on your phone.
3. You start coding, and the app automatically refreshes every time you make changes.

Setting up development environment

The only thing that we’re going to need to set up to get started with Create React Native App and build mobile apps on any platform is Node.js. Yes, that’s right. No Xcode or Android Studio, no SDKs or anything like that.

Whether you have OS X, Windows or Linux there is only one simple step:

• Go to https://nodejs.org, download and install Node.js version for your platform.

After you done open your Terminal app and execute the following to make sure Node.js was installed:

node -v

This command should output Node version that you just installed.

Installing Create React Native App

• To install Create React Native App execute the following in your Terminal app:

npm install -g create-react-native-app

That will install Create React Native App globally.

Let’s try it out

That’s all sounds great, right? Let’s try it out and create a new mobile app!

• Open up your Terminal and execute:

create-react-native-app MyAmazingApp

Now sit back and relax while it’s downloading and installing a bunch of packages. Once it’s done you, should see this.

Now, let’s follow the suggestion and execute these two commands to switch to the newly created directory and launch the development server:

cd MyAmazingApp;
npm start;

Once the development server is up and running, you’ll see this. That’s a QR code you need to scan with Expo mobile app to run the app on your phone.

Get you phone and make sure it’s on the same WiFi network as your computer. Launch Expo app and on the main screen tap Scan QR Code. Then point your phone’s camera at the QR code in the terminal.

Expo will connect to the development server, pull JavaScript bundle and run the app. Isn’t that amazing?

Try editing App.js file, and you’ll see your changes being made right away on your phone.

To access the Developer Menu shake your phone. This menu has a few functions useful for debugging.

Running on a simulator

If you wish to run you apps on either iOS or Android simulators, you can still do so. But in this case, you will have to install either Xcode for the iOS Simulator or Android Studio with SDKs and a Virtual Device for Android.

Launch your app on the iOS Simulator by executing:

npm run ios

Or on an Android Virtual Device by executing:

npm run android

Wrapping up

Hopefully, you’ve learned a lot and will be able to use that knowledge when building your apps! Subscribe to get notified about new tutorials. And if you have any questions or ideas for new tutorials, just leave a comment below the post.