DEV Community: Roberto Junior Amarante Calderón

React Native e2e tests and Automatic Deploys (Detox + Fastlane + CircleCI)

Roberto Junior Amarante Calderón — Sat, 17 Apr 2021 01:18:17 +0000

A little bit of context (skippable)

These past weeks I've been struggling trying to set up a pipeline where for every PR pointing to our staging branch, e2e tests run automatically, and for every PR that gets merged, test flight builds, and google internal beta builds are created. My experience has been... difficult, but it doesn't mean yours should too.

tl;dr; PAIN.

What do I need for this?

1. Circle CI's performance plan.

Since we are going to use macs for building our apps. If you only need android builds, you can easily achieve this with github actions, seethis project for an example and this amazing post.

2. Apple connect account & Google play console account.

This will be needed for automatic deployments(2nd part).

3. Patience

Trust me, you'll need it. CIs can smell fear.

Let's get this started

1. Add detox into your react native project.

Please, follow this guide using JEST step by step in order to have it correctly configured in your project. Here is anexample of a .detoxrc.json.

Once you can run e2e tests locally, you're ready to go for the next step.

2. Set up CircleCI.

If you don't have CircleCI, you can learn how to add it here.
Don't worry too much about the content on the config.yml, since we are going to completely modify it. :)

At this point, you should have a folder named .circleci/ with a config.yml file.

Let's make magic using orbs!

Add this to your /app/build.gradle since we are going to use the react-native-circleci-orb.

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
      }
    }
  }
}

Feeling lucky?

React native community example of how to use this orb is the following:

version: 2.1

orbs:
  rn: react-native-community/react-native@5.1.0
# 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 that is defined above and not part of the Orb
      - checkout_code

      # Analyze the Javascript using ESLint, Flow, and Jest
      # Note: This is a job that 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 separate 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 X"
          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 X"
          build_configuration: "Release"
          scheme: "Example"
          detox_configuration: "ios.sim.release"
          requires:
            - analyse_js

But there is a catch, in my experience, it did not work. Here are the docs of every helper function on this orb.

What's next?

Welp let's go step by step and create something that works ;)

Orb

version: 2.1
orbs:
  rn: react-native-community/react-native@5.1.0

Note that we call it rn, this name can be whatever you want, and it's just used to specify when a job is coming from the orb. Ex. rn/yarn_install

Jobs

checkout_code

Check out the code and persist to the Workspace, needed in order to do stuff in the project root.

checkout_code:
  executor:
    name: rn/linux_js
    node_version: "12"
  steps:
    - checkout
    - persist_to_workspace:
        paths: .
        root: .

analyse_js

Running jest test on Linux. Note how we use an executor from our orb and define the node_version version for our project.

analyse_js:
  executor:
    name: rn/linux_js
    node_version: "12"
  steps:
    - attach_workspace:
        at: .
    - rn/yarn_install
    - run:
        command: yarn test
        name: Run Tests

Android e2e

In a perfect world, the example on the docs is all you need. But this is programming, specifically, React native that we're talking about, the example is the following:

- rn/android_build:
    build_type: debug
    name: build_android_debug
    project_path: android
    requires:
      - analyse_js
- rn/android_build:
    build_type: release
    name: build_android_release
    project_path: android
    requires:
      - analyse_js

The main issue with this approach is that rn/android_build builds the app as a normal build and not as a detox build which can lead to weird issues and false-negative e2e tests.

So... yeah, we have to re-do this step manually, but feel free to try! If it works for you, shame me on Twitter!.

Please read the comments to understand what is going on here.

android_e2e_test:
  # Using a mac (:
  executor:
    name: rn/macos
  steps:
    - attach_workspace:
        at: .
    - rn/setup_macos_executor:
        homebrew_cache: true
        node_version: "12"
    - rn/yarn_install:
        # basically because of this https://github.com/react-native-community/react-native-circleci-orb/issues/66
        cache: false
    - run:
        # For my app and react native in general java8 is needed. The default version on this executor was default to java10 for some reason, so this kinda solve that issue.
        # just installing java, android sdk, and needed tools.
        command: >
          java -version

          brew tap adoptopenjdk/openjdk

          brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

          java -version

          export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)

          mkdir -p ~/.android && touch ~/.android/repositories.cfg

          java -version

          yes | sdkmanager "platform-tools" "tools" >/dev/null

          yes | sdkmanager "platforms;android-29"
          "system-images;android-29;default;x86_64" >/dev/null

          yes | sdkmanager "emulator" --channel=3 >/dev/null

          yes | sdkmanager "build-tools;29.0.2" >/dev/null

          yes | sdkmanager --licenses >/dev/null

          yes | sdkmanager --list
        name: Install Android Emulator
        shell: /bin/bash -e
    - run:
        command: |
          adb start-server
          adb devices
          adb kill-server
          ls -la ~/.android
        name: ADB Start Stop
    - run:
        # Note we are using a pixel_xl as the test device, feel free to change it for one better fits your app
        command: |
          export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)
          avdmanager create avd --force --name Pixel_2_API_29 --package "system-images;android-29;default;x86_64" --tag default --device pixel_xl
        name: Create Android Emulator
    - run:
        background: true
        command: |
          export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)
          $ANDROID_HOME/emulator/emulator @Pixel_2_API_29 -version
          $ANDROID_HOME/emulator/emulator @Pixel_2_API_29 -cores 2 -gpu auto
          -accel on -memory 2048 -no-audio -no-snapshot -no-boot-anim
          -no-window -logcat *:W | grep -i
          'ReactNative\|com.reactnativecommunity'
        name: Start Android Emulator (background)
    - run:
        command: >
          # export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)

          export BOOT=""

          echo "Waiting for AVD to finish booting"

          export PATH=$(dirname $(dirname $(command -v
          android)))/platform-tools:$PATH

          until [[ "$BOOT" =~ "1" ]]; do
            sleep 5
            export BOOT=$(adb -e shell getprop sys.boot_completed 2>&1)
          done

          sleep 15

          adb shell settings put global window_animation_scale 0

          adb shell settings put global transition_animation_scale 0

          adb shell settings put global animator_duration_scale 0

          echo "Android Virtual Device is now ready."
        name: Wait for AVD to be ready
        no_output_timeout: 5m
    # Creates the detox build using the orb job
    - rn/detox_build:
        configuration: "android.emu.release"
    # Tests the app, you can use rn/detox_test, but I wanted to take screenshots when test fails so I can have a better idea of why did they fail.
    - run:
        command: >-
          detox test -c android.emu.release -l warn --headless
          --take-screenshots failing --artifacts-location /tmp/detox_artifacts
        name: Detox Test
    # Save the screenshots as artifacts, you can see then in the artifact tab for the job in CircleCI
    - store_artifacts:
        path: /tmp/detox_artifacts

Note that all of this can be achieved using the rn/linux_android executor.

iOS e2e

In a perfect world, the example on the docs is all you need. And it was for me... until it wasn't. Try the following, if that works for you, shame me on Twitter!.

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

Fortunately, ios is better than android. Yeah, I said it... At least development wise. In order to recreate the ios_build_and_test all we need is:

# Build and test the iOS app in release mode
ios_e2e_test:
  executor: rn/macos
  steps:
    - checkout
    - attach_workspace:
        at: .
    - rn/setup_macos_executor:
        homebrew_cache: true
        node_version: "12"
    - rn/ios_simulator_start:
        device: "iPhone 11"
    - rn/yarn_install:
        # basically because of this https://github.com/react-native-community/react-native-circleci-orb/issues/66
        cache: false
    - rn/pod_install:
        pod_install_directory: ios
    # Yep, it doesn't really matter if you don't run detox build for ios, it works like a charm. But if you prefer, you can replace this step with a custom one.
    - rn/ios_build:
        build_configuration: "Release"
        cache: false
        derived_data_path: "ios/build"
        device: "iPhone 11"
        project_path: "ios/example.xcworkspace"
        project_type: workspace
        scheme: "example"
    - run:
        command: >-
          detox test -c ios.sim.release -l warn --headless --take-screenshots
          failing --artifacts-location /tmp/detox_artifacts
        name: Detox Test
    - store_artifacts:
        path: /tmp/detox_artifacts

Congratulations! You have e2e tests running in your app! Give yourself a pat in the back and go get a drink, because Fastlane is coming.

The hardest thing is doing the configurations for your project. Feel free to ask in the comments, but fastlane documentation should be enough to get you ready for the next steps.

Checkout these if you need a place to start:

Fastlane android

This is easier than what you already did. :) All we need is to install Fastlane on Linux and run our Fastlane lane.

fastlane_android_internal:
  executor: rn/linux_android
  steps:
    - attach_workspace:
        at: .
    - rn/yarn_install
    - run:
        command: gem install bundler
        name: Install bundler
    - run:
        command: gem install fastlane
        name: Install Fastlane
    # Note that my lane is name upload_to_googleplay replaced for yours
    - run:
        # can be fancier and use working_directory
        command: cd android && fastlane upload_to_googleplay
        name: Upload to google play via Fastlane

Fastlane ios

I'm pretty sure adding Fastlane to ios was not an easy task. So... Congratulations Shinji! These are basically the same steps but for ios.

# submit app to apple connect testflight
fastlane_ios_testflight:
  executor:
    name: rn/macos
  steps:
    - attach_workspace:
        at: .
    - rn/yarn_install:
        cache: false
    - run:
        working_directory: ios
        command: pod install
    - run:
        command: gem install bundler
        name: Install bundler
    - run:
        command: gem install fastlane
        name: Install Fastlane
    - run:
        working_directory: ios
        command: fastlane beta
        name: Upload to Testflight via Fastlane

So... tips for Fastlane.

Fastlane Docs.
2fa for apple connect.
CircleCI Docs.
Use date for build numbers. (There are other ways to get incremental build numbers, if you want to try them, Can't recommend any since I haven't used any for the ci).
- android: in the build.gradle (int)(date.getTime() / 10000)
- ios: in fastlane/Fastfile build_number: DateTime.now.strftime("%Y%m%d%H%M")

One more thing

In order to make everything work, we need to create a workflow where we define the order of the steps.

So... here's a proposal:

workflows:
  # name of the workflow
  main:
    jobs:
      - checkout_code
      # Do jest tests
      - analyse_js:
          requires:
            - checkout_code
      # Build and test the android app in release mode
      - android_e2e_test:
          requires:
            - analyse_js
      # Build and test the iOS app in release mode
      - ios_e2e_test:
          requires:
            - analyse_js
      # Release apps to stores for testing
      - fastlane_android_internal:
          # We only want to deploy to google play when things get merged into the main branch
          filters:
            branches:
              only:
                - main
          # Note that e2e need to pass in order to release
          requires:
            - android_e2e_test
      - fastlane_ios_testflight:
          # We only want to deploy to google play when things get merged into the main branch
          filters:
            branches:
              only:
                - main
          # Note that e2e need to pass in order to release
          requires:
            - ios_e2e_test

If react native, detox, CircleCI and Fastlane decided you can rest today, you should see something like this in your pipeline.

Sharing custom views in react native

Roberto Junior Amarante Calderón — Tue, 18 Feb 2020 14:32:32 +0000

As a react native developer, every day I find interesting features on apps I use frequently, but most of the time I'm just thinking about how could it be done and never try it; that’s going to change today.  

Sharing on react native is relatively easy, with options like:
Linking (to open apps like maps) or Share (to copy text to apps like Telegram). Today I’ll be talking about react-native-share, a simple but powerful library.

To make things a little bit more complicated. Let’s make a snapshot example where a thumbnail of the component is created and you can share it.   This post will focus on configuration and sharing custom views using react-native-view-shot.

Btw, I'm using react-native: 0.61.5.

Adding dependencies
Integrating dependencies

Adding dependencies

yarn add react-native-share react-native-view-shot
cd ios && pod install && cd ../

Integrating dependencies

To make things easier, I made a simple design with react-native-papper.

        <Card>
          <Card.Title
            title="This is an example"
            subtitle={this.state.subtitle}
            left={props => <Avatar.Icon {...props} icon="folder" />}
          />
          <Card.Content>
            <Title>Nicer title</Title>
            <Paragraph>I like trains</Paragraph>
          </Card.Content>
          <Card.Cover source={{uri: 'https://picsum.photos/700'}} />
          <Card.Actions>
            <Button onPress={this.takeSnapshot}>Take Snapshot</Button>
          </Card.Actions>
        </Card>

To create a snapshot of the component, we need to wrap the views with the ViewShot component.

import ViewShot from 'react-native-view-shot';
...

      <ViewShot>
        <Card>
          ...
        </Card>
      </ViewShot>

We need to keep the reference of the view as a member of the class, to make a snapshot manually:

card = React.createRef<ViewShot>();
...
      <ViewShot ref={this.card}>
        ...
        <Button onPress={this.takeSnapshot}>Take Snapshot</Button>
        ...
      </ViewShot>

With the reference, we can take snapshots on demand by using captureRef.

import ViewShot, {captureRef} from 'react-native-view-shot';

takeSnapshot = async () => {
  if (this.card.current) {
    const snapshot = await captureRef(this.card, {
      result: 'data-uri',
    });
    this.setState({
      snapshot,
    });
  }
};

data-uri means that the result of the snapshot will be encoded as base64 and returned as a raw string but including the Data URI schema.

We can display the snapshot using the react-native Image component:

      <Image
        source={{uri: snapshot}}
        resizeMode={'contain'}
        style={styles.snapshot}
      />

Finally, we can share the custom component.

import Share from 'react-native-share';
...

shareSnapshot = () => {
  const {snapshot} = this.state;
  if (snapshot) {
    Share.open({
      url: snapshot,
    })
      .then((res: any) => {
        console.log(res);
      })
      .catch((err: any) => {
        err && console.log(err);
      });
  }
};

...

<Button
  disabled={!this.state.snapshot}
  icon="share"
  mode="contained"
  onPress={this.shareSnapshot}>
  {"Share"}
</Button>

And voila!

Tapping the Share button will open a native Share Dialog, where the user can select the app that will receive the snapshot or cancel the sharing, because of this, you need to handle both results, successful .then and failure .catch, or you can use async/await + try/catch as well.

Post/1/sharing views #1

Kyonru posted on Feb 18, 2020

How to share custom views in react native.

View on GitHub