Automating the review process of your React Native Library's PRs
Tags: react, reactnative, actionshackathon, github
Published: 2020-09-16 08:54:57

In my last [blog post](https://dev.to/dani_akash_/automating-your-react-native-library-s-build-process-ml3) 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 ﹣

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wsb1h67wn2sphq6fyrfc.png)](https://github.com/react-native-toolkit/rex-state/)

The above image is from a PR of my [rex-state](https://github.com/react-native-toolkit/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](https://github.com/react-native-toolkit/rex-state/blob/master/.github/workflows/review.yml) file of my [rex-state](https://github.com/react-native-toolkit/rex-state/) library.

## Triggering the workflow

This workflow will run on all pull requests

```yml
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.
```yml
  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](https://github.com/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 ﹣

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yt8w4066hnph7y72onxu.png)

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

```yml
  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](https://docs.netlify.com/cli/get-started/) 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](https://github.com/expo/expo-github-action#test-prs-and-publish-a-review-version) on their [expo-github-action](https://github.com/expo/expo-github-action). Add the following configuration to your workflow (replace the URL in the `msg` with your application's URL)﹣

```yml
  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 ﹣
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2aqycdostgrpbbwy9j7w.png)

## 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!

```yml
  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 ﹣

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dpqby0r6lxqnrctqg9af.png)

We got a powerful review workflow now. In the [next blog post](https://dev.to/dani_akash_/automatically-publish-an-update-to-npm-when-you-create-a-release-in-github-464f), let's publish the library to NPM every time you create a new release in GitHub!