Build on iOS and Android platforms
Short Summary
Building React Native project is basically the same as building for the target platform with a little twist. When you add a new app on Bitrise.io you will see the project scanner will detect iOS and Android projects. This is because the structure React Native uses is the same as in a simple iOS or Android project. And now:
The twist
React Nativeās CLI tool has a bundle command, which will create bundle from your JS files. (index.android.js & index.ios.js). When you init a new project with react-native init you will get an iOS and an Android project base as well. These project bases are a fully build-able āframeworksā for both platform, and will display and run your project bundled in and if it is injected to your Xcode or gradle project. React Native has splitted bundle handling into two ways:
- Debug build (online app): a framework app will be built with an url pointing to your bundle. This way you need to build Xcode or gradle projects only once then install it on a device, and the rest of the testing is to bundle your project to where your appās url points. (You can easily save a lot of time with your tests this way actually)
- Release build (offline app): In the projects it is automated when you build with release configuration, the bundle will be automatically included in the built app. So you wonāt need the bundle over an url, it comes with the app.
So when you need a debug build, and still an offline app you will need to bundle your React Native project, and copy the bundle into the Xcode or gradle project.
Thanks to this little twist, weāll need to add steps to the generated Xcode, or Android workflow. On both platform you will need to add:
- Install React Native step (can be right after git clone step)
This step will install react-native (required to run bundle command in build processes) - Run npm command step (before xcode or gradle build steps)
Typeinstallin command input. Before runningnpm installmake sure it will run in your React Native projectās root directory. (You can useChange working directorystep in case your project is not in the root of your git repo, or you can set Workdir input to your project)
An example bitrise.yml of building a release iOS app:
---
format_version: 1.3.1
default_step_lib_source: https://github.com/bitrise-io/bitrise-steplib.git
workflows:
ios_release:
steps:
- activate-ssh-key@3.1.1:
run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
- git-clone@3.4.2: {}
- install-react-native@0.9.1: {}
- npm@0.9.0:
inputs:
- workdir: "$PROJECT_DIR"
- command: install
- certificate-and-profile-installer@1.8.4: {}
- xcode-archive@2.0.5:
inputs:
- export_method: development
- workdir: "$PROJECT_DIR/ios"
- project_path: "./SampleAppsReactNativeAndroid.xcodeproj"
- scheme: SampleAppsReactNativeAndroid
- configuration: Release
- is_export_xcarchive_zip: 'yes'
- deploy-to-bitrise-io@1.2.9: {}
before_run:
after_run:
app:
envs:
- opts:
is_expand: true
PROJECT_DIR: "$BITRISE_SOURCE_DIR"
Bundle
This wonāt be a headache. Bundle with React Native can be set up using only couple of steps after git clone:
- Install React Native step
- Run npm command step -
command: install -workdir: your projectās root directory - React Native Bundle step
An example bitrise.yml to get an android bundle:
---
format_version: 1.3.1
default_step_lib_source: https://github.com/bitrise-io/bitrise-steplib.git
workflows:
primary:
steps:
- activate-ssh-key@3.1.1:
run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
- git-clone@3.4.2: {}
- install-react-native@0.9.1: {}
- npm@0.1.1:
inputs:
- command: install
- workdir: '$BITRISE_SOURCE_DIR'
- react-native-bundle@1.0.3:
inputs:
- platform: android
- out: "$BITRISE_DEPLOY_DIR/index.android.bundle"
- dev: 'false'
- assetRoots: "$BITRISE_SOURCE_DIR/android/app/src/main/res/"
This would be a great feature, if you can upload the bundle with ftp or any 3rd party sharing service, and point your iOS and Android appās url to the uploaded bundle. This way you wonāt need to build the apps every time still you can see your React project in the framework apps. Great! 
Test
There are multiple ways you can test your project, the following lines are explaining React Nativeās most common, built-in method. This is jest. When you react-native init a new project, you will get a project including packages.json, including npm task test.
So basically you will need to run an npm command
testin your projectās root directory to start the built-in test method.
To do this, you will need some preparation steps after your git clone step:
- Install React Native step
- Run npm command step -
command: install -workdir: your projectās root directory - Run npm command step -
command: test -workdir: your projectās root directory
Here is an example bitrise.yml of running built-in jest test:
---
format_version: 1.3.1
default_step_lib_source: https://github.com/bitrise-io/bitrise-steplib.git
workflows:
test:
steps:
- activate-ssh-key@3.1.1:
run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
- git-clone@3.4.2: {}
- install-react-native@0.9.1: {}
- npm@0.9.0:
inputs:
- workdir: "$PROJECT_DIR"
- command: install
- npm@0.9.0:
inputs:
- workdir: "$PROJECT_DIR"
- command: test
before_run:
after_run:
app:
envs:
- opts:
is_expand: true
PROJECT_DIR: "$BITRISE_SOURCE_DIR"
Feel free to ask any questions 
Yep, and if you have an experience with React Native projects already, please share it with other users! 
