It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device.
A Mac is required in order to build your app for iOS devices.
Register for a Apple developer account if you don't have one yet.
Connect your device to your Mac using a USB to Lightning cable. Navigate to the
ios folder in your project, then open the
.xcodeproj file within it using Xcode.
Select your app in the Project Navigator and look for the "General" tab. Go to "Signing" and make sure your Apple developer account is selected.
Open the "Product" menu from Xcode's menubar, then go to "Destination". Look for and select your device from the list. Xcode will then register your device for development.
If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar. You can now press the Build and run button or select "Run" from the "Product" menu. Your app will launch on your device shortly.
If you run into any issues, please take a look at Apple's Launching Your App on a Device docs.
Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development.
To enable USB debugging on your device, you will first need to enable the "Developer options" menu by going to Settings → About phone and then tapping the
Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable "USB debugging".
Let's now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.
Next, check the manufacturer code by using
lsusb (on mac, you must first install lsusb).
lsusb should output something like this:
These lines represent the USB devices currently connected to your machine.
You want the line that represents your phone. If you're in doubt, try unplugging your phone and running the command again:
You'll see that after removing the phone, the line which has the phone model ("Motorola PCS" in this case) disappeared from the list. This is the line that we care about.
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS
From the above line, you want to grab the first four digits from the device ID:
In this case, it's
22b8. That's the identifier for Motorola.
You'll need to input this into your udev rules in order to get up and running:
Make sure that you replace
22b8 with the identifier you get in the above command.
Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running
device in the right column means the device is connected. You must have only one device connected at a time.
Type the following in your command prompt to install and launch your app on the device:
If you get a "bridge configuration isn't available" error, see Using adb reverse.
You can also use the
React Native CLIto generate and run a
react-native run-android --variant=release).
If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.
You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.
You can use this method if your device is running Android 5.0 (Lollipop), it has USB debugging enabled, and it is connected via USB to your development machine.
Run the following in a command prompt:
You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.
You can find the IP address in System Preferences → Network.
Open the command prompt and type
ipconfig to find your machine's IP address (more info).
Open a terminal and type
/sbin/ifconfig to find your machine's IP address.
You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account.
Building an app for distribution in the App Store requires using the
Release scheme in Xcode. To do this, go to Product → Scheme → Edit Scheme (cmd + <), make sure you're in the Run tab from the side, and set the Build Configuration dropdown to
Apps built for
You can also use the
React Native CLIto perform this operation using the option
--configurationwith the value
react-native run-ios --configuration Release).
Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.
App Transport Security is a security feature, added in iOS 9, that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server.
ATS is disabled by default in projects generated using the React Native CLI in order to make development easier. You should re-enable ATS prior to building your app for production by removing the
NSAllowsArbitraryLoads entry from your
Info.plist file in the
To learn more about how to configure ATS on your own Xcode projects, see this post on ATS.
You can edit the content above on GitHub and send us a pull request!