Automating the review process of your React Native Library's PRs

In my last blog post we saw how to automate the build process of your React Native library.

Reviewing PRs are an important part of managing Open Source libraries. However, they might require a considerable amount of time & effort from your busy life which means, you need to be as efficient as possible.

My whole toolchain was set up around making the review process as easy as possible. This time we'll create Github Action workflows to make the review process a whole lot simpler.

Every PR raised to the library will have the following checks performed automatically

• Linting & Testing
• Code coverage report
• Deploy preview of the updated storybook docs
• Build a review version of the example mobile app with link to quickly test it
• Send all stories to chromatic to do a visual review

As soon as the PR is sent, you should be able to see the progress of the review workflow ﹣

The above image is from a PR of my rex-state library. Let's look into how we can implement this effectively.

You can find my working review workflow at .github/workflows/review.yml file of my rex-state library.

Triggering the workflow

This workflow will run on all pull requests

name: review
on: pull_request

Linting & Testing

This step is the same as what we did for our build workflow. All the other jobs will run only after Linting & Testing are complete.

  lint:
    name: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn typescript
      - run: npx yarn lint

  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macOS-latest]
        node: ['12.x']
    name: test/node ${{ matrix.node }}/${{ matrix.platform }}
    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node }}
      - run: npx yarn bootstrap
      - run: npx yarn test

Coverage report

Previously on the build step, we used Code Climate to store our test coverage reports. However, on PRs we need a way to quickly check the test coverage for the incoming code.

For this, we can use the romeovs/lcov-reporter-action which will post a nice comment on the PR with the test coverage details. You'd get a report like this following comment ﹣

Add the following configuration for receiving the coverage as a comment ﹣

  coverage:
    needs: [test, lint]
    name: coverage
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn test --coverage
      - uses: romeovs/lcov-reporter-action@v0.2.16
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}

Deploy preview of the updated storybook docs

Since I was using the Netlify Github App, I'm getting the deploy previews out of the box without any kind of additional setup. You can try the Netlify CLI if you want to manually enable deploy previews with Github Actions.

Review Version of the Example App

This is where the power of expo toolchain shines. You can use the expo-cli to publish the app in a separate channel which you can use for your review purpose.

The expo team have also provided detailed documentation on their expo-github-action. Add the following configuration to your workflow (replace the URL in the msg with your application's URL)﹣

  expo-publish:
    needs: [test, lint]
    name: Publish to Expo 🚀
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - uses: expo/expo-github-action@v5
        with:
          expo-version: 3.x
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
      - run: npx yarn bootstrap
      - run: expo publish --release-channel=pr-${{ github.event.number }}
        working-directory: example
      - uses: unsplash/comment-on-pr@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          msg: App is ready for review, you can [see it here](https://expo.io/@daniakash/rex-state-example?release-channel=pr-${{ github.event.number }}).

From now on, for every PRs you'll get a comment just like this one ﹣

Sending stories to chromatic

Finally to do a visual review if the PR has affected your stories you can send the stories to chromatic. The configuration is the same as our last one, chromatic is smart enough to figure out that the data is from a PR!

  chromatic:
    needs: [test, lint]
    name: Publish storybook to chromatic 🧪
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn chromatic
        working-directory: example
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

Once you have everything ready, Your PRs will now have detailed information on the things you'd otherwise have to check manually every time ﹣

We got a powerful review workflow now. In the next blog post, let's publish the library to NPM every time you create a new release in GitHub!