# React Native Setup With and Without Expo

This page is a summary of the setup sets for React Native both with and without Expo. See reference here (opens new window). This page does NOT include the setup instructions for the Android or iOS environments on Windows or MacOS.

# With Expo

When building React Native Apps with Expo we are relying on it to give us a smoother and simpler development experience. It will change how we install and what we install as project dependencies. There is less to do to set up your development environment but it does mean more work to do to prepare for the production build.

The Expo docs (opens new window) also provides a lot of useful information.

One really cool thing about Expo is that you can build (with Javascript) your mobile app on Windows and then still be testing your app on your iOS device through the Expo Go client app.

Install Expo Globally

To use Expo to create a project we need to install it globally on our computer.

yarn global add expo-cli

Create your Project

we can now use Expo to create the folder and set up the development environment to use Metro for testing and hot reloading.

expo init MyProject
cd MyProject
yarn start

1
2
3

This will create a project folder called MyProject filled with everything you need to get started, including a very simple base project.

yarn start will start the Metro development server.

Install Expo Go on Devices

There is an app called Expo Go that you need to install to test your app on your phone. This app will scan a QR code to load and launch your app. Expo Go will also keep your phone connected to your code as long as you are on the same Network and have the dev server running.

Run the App

With the Metro server running you will see a webpage launched that has a QR code.

Open the Expo Go client app on your phone and you will see a button to scan the QR code from the webpage and it will display a message showing the JavaScript Bundling taking place. Once the bundling has taken place then the app will start running.

Or you can launch a specific version of the app. These commands will launch the dev server AND try to launch the app on a running simulator. You should have the simulator running first, for best results.

yarn android
yarn ios

1
2

Limitations

If you want to test your app on a Simulator or Emulator then you will need to use the React Native CLI set up and have your Android and iOS development environments set up, just like you did with Cordova.

If you want to exit from Expo and get back to the React Native CLI later on, you can run the yarn eject script to de-couple Expo. This CANNOT be undone, so be sure.

# Without Expo

The bare bones install and development without Expo and Expo Go is done with the React Native CLI.

It does require that you have your Android and iOS development environments already set up to be able to build, deploy and run the apps on an actual device, simulator, or emulator.

For Android this means having the JDK, the Android SDK versions and tools, Android Studio and at least one AVD with Android version 29+. You will need the Environment variable for ANDROID_HOME plus the PATH for Android build tools set up too.

For iOS this means having XCode with the command line tools and the simulators downloaded.

Node and Watchman

You should already have node installed but you might not have the watchman tool used by React Native for hot reloading on MacOS.

brew install watchman

We are using HomeBrew to install watchman.

XCode Command Line Tools

These should already be enabled from your work with Cordova. However, to enable them you can go to Preferences > Locations and Make sure that Command Line Tools has a version selected.

sudo gem install cocoapods

You will also need to have cocoapods installed to be able to build iOS apps with React Native.

iOS Extra Step

Any time you add another dependency via npm or yarn, you need to tell iOS to add the native packages too. Go to your ios folder inside your project and run the pod install command.

cd ios
pod install

1
2

React Native CLI

We can run react-native from the command line just like we use create-react-app to set up and manage our React Native projects.

npx react-native init MyProject

The init command will create the folder MyProject and fill it with all the needed project files.

Start the Metro Bundler

Metro is the JavaScript bundler that will bundle your projects into a single JavaScript file that will be used by your app along with the native controls and code.

npx react-native start

This needs to be done in its own terminal window that will be left running.

Build and Launch app

To build and run your iOS app:

npx react-native run-ios

This command will launch your app on an iOS simulator by default. To select which simulator, have it running before running the run-ios command.

To run on a physical iOS device, connect the device to your MacBook with the USB cable. Open your project in XCode, select the project as your main target and go to the "General" tab and then "Signing". Select your team in the dropdown list.

iOS

Hit Cmd+R to reload the app in the simulator. Shake (Option+Cmd+Z) to open the Dev menu in the simulator.

Shake the device to show the developer menu and tap on Reload.

To build and run your Android app:

npx react-native run-android

For a physical Android device with development mode enabled, use the USB to connect, install and launch. In the Terminal to test if your device is connected, run adb devices and see if the device appears in the list.

For an emulator, use the AVD manager to create and launch the emulator before running your app.

Android

Press the R key twice or Select Reload from the developer menu (Cmd+M) to refresh your app on the emulator.

Shake the physical device and hit Reload in the developer menu.