
08 Oct Develop, Deploy and Test React Native apps with Expo
What’s Expo?
Expo is a set of tools, libraries, and services which let you build native iOS and Android apps by writing JavaScript.
Expo apps are React Native apps which contain the Expo SDK. The 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.
Installation
There are two tools that you need to develop apps with Expo: a local development tool and a mobile client to open your app.
Local Development Tool: Expo CLI
1 |
npm install -g expo-cli |
If you haven't created an Expo account before, you'll be asked to create one when running the build command.
Mobile Client: Expo for iOS and Android
Develop
Creating the project
expo init
to create a project. You'll be asked to name your project. The project will be created in a new directory with that name in the current working directory. I'll call mine AwesomeProject
, and press Enter.tabs
option since that will give us a good starting point.react
, react-native
and expo
.Configure app.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "expo": { "name": "Your App Name", "icon": "./path/to/your/app-icon.png", "version": "1.0.0", "slug": "your-app-slug", "sdkVersion": "XX.0.0", "ios": { "bundleIdentifier": "com.yourcompany.yourappname" }, "android": { "package": "com.yourcompany.yourappname" } } } |
- The iOS
bundleIdentifier
and Androidpackage
fields use reverse DNS notation, but don't have to be related to a domain. Replace"com.yourcompany.yourappname"
with whatever makes sense for your app. - You're probably not surprised that
name
,icon
andversion
are required. slug
is the url name that your app's JavaScript is published to. For example:expo.io/@community/native-component-list
, wherecommunity
is my username andnative-component-list
is the slug.- The
sdkVersion
tells Expo what Expo runtime version to use, which corresponds to a React Native version. Although"XX.0.0"
is listed in the example, you already have ansdkVersion
in your app.json and should not change it except when you want to update to a new version of Expo.
Start the development server
Navigate to your project folder and type npm start
to start the local development server of Expo CLI.
1 2 |
cd AwesomeProject expo start |
On Expo Dev Tools, we can run on Android device/ emulator or iOS simulator. Here is a brief breakdown of the new browser experience:
- It’s easy to view logs from multiple devices simultaneously.
- We made switching connections and connecting to your devices easier to navigate. There are three options: localhost, LAN, and Tunnel.
- We’ll let you know if you lose your network connection.
- More clarity around issues and warnings to help you through annoying situations.
- You can still scan a QR code or send a link to your project to your phone.
- The Publish step acts as a guide to help you keep your published project pages looking sharp
Deploy
Start the build
Run expo build:android
or expo build:ios
. If you don't already have a packager running for this project, exp
will start one for you.
If you choose to build for Android


Note: If you choose the first option and later decide to upload your own keystore, we currently offer an option to clear your current Android keystore from our build servers by runningexpo build:android --clear-credentials.
This is irreversible, so only run this command if you know what you are doing! You can download a backup copy of the keystore by runningexpo fetch:android:keystore
. If you do not have a local copy of your keystore , you will be unable to publish new versions of your app to the Play Store. Your only option would be to generate a new keystore and re-upload your application as a new application. You can learn more about how code signing and keystores work in the Android documentation.
If you choose to build for iOS
exp
client create the necessary credentials for you, while still having a chance to provide your own overrides. Your Apple ID and password is used locally and never saved on Expo's servers. In this blog, I will skip the build part for iOS.


Testing
There are several ways to get the client app into a test environment.
- Install Expo Client App from a device's App Store
- This is the simplest and easiest way, and the one we recommend for all developers.
- Build Expo Client App on your computer and side-load it onto a device
- The client apps are open-source, and their readme contains instructions on how to compile them locally and install them onto devices attached to your computer by a USB cable.
- Run Expo Client App on your computer in a device Emulator/Simulator
- The client apps github repository also includes instruction on how to build and run the iOS Client App in the Xcode Device Simulator, and the Android Client App in the Android Studio Device Emulator.
- Download apk or ipa files and upload them into Kobiton Store for testing
Publish
expo publish
. No setup is required, go ahead and create a new project and publish it without any changes and you will see that it works.
Deploying to the App Store and Play Store
Testing your React Native apps on real devices
In this part, I will guide you how to use Kobiton Cloud to test your apps. A Kobiton account is required to access Kobiton system. If you do not have a Kobiton account yet, go ahead to create a free trial account and sign in. It takes just a few moments.
- Uploading Mobile Apps to Kobiton Store for Testing
- Navigate to https://portal.kobiton.com/apps and upload your apps
- The file extension can be .apk, .ipa or .zip
- The file size exceeds 500mb
- Select menu to view Automation snippet code
- Launch a manual test with your expected device
- Navigate to https://portal.kobiton.com/devices and launch your device
- Select APPS tab and install your app into the real device
- We have several ways to install an app. Another way is from your local file or from public URL.
- Modify your desiredCaps to automate your app with the expected device
- You can set your test to reference the application at the Kobiton Storage URL with the
app
capability, as shown in this example for Java. -
123456DesiredCapabilities capabilities = new DesiredCapabilities();capabilities.setCapability("app", "kobiton-store:1024");capabilities.setCapability("deviceGroup", "KOBITON");capabilities.setCapability("deviceName", "Galaxy S8+");capabilities.setCapability("platformVersion", "7.0");capabilities.setCapability("platformName", "Android");
- You can set your test to reference the application at the Kobiton Storage URL with the
No Comments