DEV Community

Nabeel Shakeel
Nabeel Shakeel

Posted on • Edited on

1 1 1 1 1

#GitHubHack23: React Native Versioning Pipeline

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
    react-native-version

  • Testing action in another repository
    Testing

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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️