#GitHubHack23: React Native Versioning Pipeline
Tags: githubhack23, reactnative, cicd, opensource
Published: 2023-05-13 12:27:21

## What I built
A Composite GitHub Action named [react-native-version](https://github.com/nabeel-shakeel/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](https://github.com/nabeel-shakeel/react-native-version) to see this action working. 

Follow the [README](https://github.com/nabeel-shakeel/react-native-version) 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
![react-native-version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzbsu9paggz9hnd8cx83.png)

- Testing action in another repository
![Testing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hg5n5zi9ctvcctp4srnn.png)

### 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](https://github.com/nabeel-shakeel/react-native-version/blob/main/LICENSE)

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

- https://docs.github.com/en/actions/creating-actions/creating-a-composite-action
- https://github.com/phips28/gh-action-bump-version
- https://github.com/marvinpinto/action-automatic-releases
- https://github.com/EndBug/add-and-commit

**CI Pipeline**
- https://medium.com/@paramsingh_66174/ci-cd-pipeline-for-react-native-apps-98246237e29d
- https://www.obytes.com/blog/react-native-ci-cd-github-action
- https://bitrise.io/blog/post/react-native-devops-using-ci-cd-pipelines-to-deploy-react-native-apps