5+ Github Actions to Automate Your React Native Workflow
Posted on:September 14, 2023
If you are working with React Native and hosting your project on GitHub but not using GitHub Actions, you are missing out on a lot of benefits. GitHub Actions is a great tool that can help you automate your React Native workflow and save you a lot of time and effort.
I believe that having GitHub workflows is one of the best investments you can make in your project to enhance productivity and code quality. Writing these workflows can be done in just a few days or even hours. However, if you are lucky enough—which is the case as you are reading this article 😊—you can benefit from other people’s work and make your setup ready in a few minutes.
In this article, I will share with you a few GitHub Actions workflows we use for our React Native projects that you can also use.
Before we start listing the workflows, I would like to mention a small trick that we use in those workflows tha not many people know that this is possible with GitHub Actions. (Me, a few months ago 😅)
Making a workflow reusable.
Most of these workflows require common steps, such as node setup, installing dependencies, and caching. Instead of repeating those steps in every workflow, we can create a reusable workflow that can be used in other workflows.
To make it work, GitHub requires using a composite action. A composite action is an action that can be used in other workflows. It’s like a function that you can call from other workflows.
For our case, to create a composite action to set up the project, we need to create a new folder in our project called .github/actions and create a new file inside it called setup-node-pnpm-install/action.yml. This file will contain the steps that will be executed when you call this action and should specify the type as composite. Here is how it looks like:
Now, we can use this action in other workflows by calling it using the uses keyword and specifying the path to the action file. Note that you don’t need to include the action.yml; only the folder name is required.
Now that we have the setup ready, let’s begin listing the workflows.
1. Type Checking
I assume that you are using TypeScript in your project. If not, you should consider giving it a try. Believe me, it’s worth it.
This workflow will run the type check on every push to the main/master branch and on every pull request to main/master. If it’s a pull request, it will add the check to the PR as well as annotate the code with the errors using reviewdog.
2. Linting with ESLint
This workflow will run the linting on every push to the main/master branch and on every pull request to main/master. If it’s a pull request, it will add the check to the PR as well as annotate the code with waring and errors with reviewdog.
3. Expo Doctor Check
This workflow runs the expo doctor command to check if your project dependencies are aligned with the expo sdk version you are using. It can be triggered manually from the Actions tab in your project. or automatically on every push to the main/master branch and on every pull request to main/master in case the package.json or pnpm-lock.yaml files have been changed.
👀 A fun idea is to add a comment to the pull request (PR) with the output of the expo doctor command. You could even set up a workflow to run this every week and open a PR if there is a new version of the Expo SDK.
4. Unit Tests
This workflow runs the unit tests on every push to the main/master branch and on every pull request to main/master. If it’s a pull request, it will post a comment with the coverage details. as well as annotate the test results directly in Github.
⚠️ To ensure proper functionality, you need to make sure that your Jest configuration is set up to generate coverage files in the specified format. You can refer to the jest.config.js file for more information.
Here is an example of the comment that will be posted on the pull request.
5. Image Optimization
Unoptimized images can cause various issues in your app, including performance problems and increased app size. This workflow ensures that all images in your project are optimized and compressed.
The workflow runs whenever there is a push to the main/master branch containing changes to image files. It will then open a pull request with the optimized images.
6. More Workflows
I mentioned above the most common workflows we use in our projects. However, we have more workflows that you can find in our Workflow References including: