#GitHubHack23: React Native Versioning Pipeline

Nabeel Shakeel — Sat, 13 May 2023 12:27:21 +0000

What I built

A Composite GitHub Action named react-native-version which bumps the version in package.json, android and iOS related build/config files along with generating GiHub Release by automatically uploading assets, generating changelogs, handling pre-releases, and so on.

This action can be easily become part of any react-native CI/CD pipeline. You can look at the repo react-native-sample-app to see this action working.

Follow the README to get started with this action

Category Submission:

This project is fall under Phone Friendly category

App Link

https://github.com/marketplace/actions/react-native-version

Screenshots

Action Published on Marketplace
Testing action in another repository

Description

One of the important steps in react-native CI/CD pipeline is to increment/change the version of our Android and iOS apps or else the App Store and Play Store won’t accept them during distribution.

This involves changing the version in package.json and keeping it as a source of truth. Then sync the updated version in android and iOS config files i.e. build.gradle, info.plist. Next is to commit the changes and push them back to repo. Finally, generate a GitHub release to look for new features, fixes and other changes published in that release.

react-native-version action automates all these steps and hook into any CI/CD pipeline as a step.

Link to Source Code

Checkout the source code of GitHub Action
https://github.com/nabeel-shakeel/react-native-version

Permissive License

License used is Apache-2.0

Background

I have been working with react-native for a few years and the CI/CD pipeline comes with a whole bunch of tooling and processes around it. In my projects, it took me a few weeks to set up a complete pipeline from version bump to release management, to Android/iOS build and to upload to App Center as the final step.

I decided to build this GitHub action to assemble steps involved in version bump and release management into one action. This will saves time and less pain for developers while building a 'react-native' CI/CD pipeline.

How I built it

I built this GitHub action using a Composite GitHub action approach which is an exciting way to create packaged actions. For the development of this action, I utilized the power Codespaces.

This hackathon provides me the perfect opportunity to learn about Github Codespaces, using it for development, manage the
codespaces environment and sharing it with the team along with creating a custom composite action and testing it in workflow.

The overall development process was filled with learning and challenges. It gave me a deeper understanding of GitHub Actions, Codespaces, and their potential in improving productivity and efficiency.

Additional Resources/Info

Following resources helped me to develop this action and understanding the CI/CD flow for react native app

CI Pipeline

DEV Community: Nabeel Shakeel