• Stars
    star
    174
  • Rank 219,104 (Top 5 %)
  • Language
  • License
    MIT License
  • Created over 5 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A CircleCI Orb to Simplify Testing your React Native App

React Native CircleCI Orb

CircleCI Orb

A CircleCI Orb to simplify testing your React Native app.

Why?

Setting up CircleCI to test your React Native app correctly is hard. You need to consider using the correct machine type, installing the correct dependencies, running the correct commands, and correctly setting up caching to speed up builds. All of this is complicated and involves a lot of trial and error.

With this Orb we provide simple reusable building blocks which you can use to do the right thing easily.

Overview

First, we recommend reading the Using Orbs guide from the CircleCI documentation to get an overview of how to use Orbs.

This Orb provides three different categories of tools to help you build and test your React Native app on CircleCI:

  • Executors: Machines which are configured for use with React Native.
  • Commands: Individual tasks which you can piece together in your own jobs to perform tasks like installing dependencies, building an APK, or running Detox tests.
  • Jobs: Groups of commands which are typically used together as a stage in a pipeline.

Setup

Firstly, as this is a 3rd Party Orb, you need to go into your organisations settings, press on "Security", and enable usage of 3rd Party Orbs.

You will also need to ensure that you have a MacOS plan enabled if you want to build and test your iOS app, or if you want to test your Android app. Open Source projects can contact CircleCI to ask them to enable it and private projects need to select a payment plan.

Documentation

You can read the full documentation here.

Android

Add this task in your /app/build.gradle

task downloadDependencies() {
  description 'Download all dependencies to the Gradle cache'
  doLast {
    configurations.findAll().each { config ->
      if (config.name.contains("minReactNative") && config.canBeResolved) {
        print config.name
        print '\n'
        config.files
      }
    }
  }
}

Example

Here is a full example of how the Orb can be used in a CircleCI workflow to build and test a React Native app:

# Orb support is from version >= 2.1
version: 2.1

# Make sure you use the latest version of the Orb!
orbs:
  rn: react-native-community/[email protected]

# Custom jobs which are not part of the Orb
jobs:
  checkout_code:
    executor: rn/linux_js
    steps:
      - checkout
      - persist_to_workspace:
          root: .
          paths: .
  analyse_js:
    executor: rn/linux_js
    steps:
      - attach_workspace:
          at: .
      - rn/yarn_install
      - run:
          name: Run ESLint
          command: yarn eslint
      - run:
          name: Flow
          command: yarn flow
      - run:
          name: Jest
          command: yarn jest

workflows:
  test:
    jobs:
      # Checkout the code and persist to the Workspace
      # Note: This is a job which is defined above and not part of the Orb
      - checkout_code

      # Analyze the Javascript using ESLint, Flow, and Jest
      # Note: This is a job which is defined above and not part of the Orb
      - analyse_js:
          requires:
            - checkout_code

      # Build the Android app in debug mode
      - rn/android_build:
          name: build_android_debug
          project_path: "android"
          build_type: debug
          requires:
            - analyse_js

      # Build and test the Android app in release mode
      # Note: We split these into seperate jobs because we can build the Android app on a Linux machine and preserve the expensive MacOS executor minutes for when it's required
      - rn/android_build:
          name: build_android_release
          project_path: "android"
          build_type: release
          requires:
            - analyse_js
      - rn/android_test:
          detox_configuration: "android.emu.release"
          requires:
            - build_android_release


      # Build the iOS app in release mode and do not run tests
      - rn/ios_build:
          name: build_ios_release
          project_path: ios/Example.xcodeproj
          device: "iPhone 11"
          build_configuration: Release
          scheme: Example
          requires:
            - analyse_js

      # Build and test the iOS app in release mode
      - rn/ios_build_and_test:
          project_path: "ios/Example.xcodeproj"
          device: "iPhone 11"
          build_configuration: "Release"
          scheme: "Example"
          detox_configuration: "ios.sim.release"
          requires:
            - analyse_js

This is what the final workflow will look like:

Example React Native CircleCI Orb Workflow

License

The Orb is released under the MIT license. For more information see LICENSE.

More Repositories

1

upgrade-helper

⚛️ A web tool to support React Native developers in upgrading their apps.
TypeScript
3,628
star
2

hooks

React Native APIs turned into React Hooks for use in functional React components
TypeScript
3,451
star
3

cli

The React Native Community CLI - command line tools to help you build RN apps
TypeScript
2,374
star
4

react-native-template-typescript

👾 Clean and minimalist React Native template for a quick start with TypeScript.
Java
1,858
star
5

discussions-and-proposals

Discussions and proposals related to the main React Native project
1,684
star
6

releases

React Native releases
JavaScript
1,501
star
7

rn-diff-purge

Easier React Native upgrades by clearly exposing changes from a version to another. 🚀 And what better way than to purge, init, then diff? Spoiler: there's no better way. 😎
Shell
1,266
star
8

jsc-android-buildscripts

Script for building JavaScriptCore for Android (for React Native but not only)
JavaScript
1,056
star
9

directory

A searchable and filterable directory of React Native libraries.
TypeScript
1,003
star
10

docker-android

Android Docker Image for React Native and common android development.
Dockerfile
473
star
11

RNNewArchitectureLibraries

A collection of sample React Native Libraries that will show you how to use the New Architecture (Fabric & TurboModules) step-by-step.
322
star
12

upgrade-support

A central community-backed place to request and give help when upgrading your app.
JavaScript
254
star
13

RNNewArchitectureApp

A collection of sample React Native Apps that will show you how to use the New Architecture (Fabric & TurboModules) step-by-step.
201
star
14

hermes-profile-transformer

TypeScript tool for converting Hermes Sampling Profiler output to Chrome Dev Tools format
TypeScript
86
star
15

boost-for-react-native

The Boost C++ library source code used to build React Native from source
C++
86
star
16

template

The React Native Community Template - getting started building RN apps for Android & iOS
JavaScript
46
star
17

eslint-plugin-react-native-globals

ESLint Environment for React Native
JavaScript
38
star
18

reproducer-react-native

A reproducer to easily recreate bugs and report problems for React Native
TypeScript
32
star
19

developer-experience-wg

Discussions-only repo for topics around React Developer Experience
18
star
20

rn-diff-lib-purge

Easier React Native library upgrades by clearly exposing changes from a version to another. 🚀 And what better way than to purge, init, then diff? Spoiler: there's no better way. 😎
Shell
3
star