Sandip Shiwakoti

Posted on Aug 2 • Edited on Aug 4

React Native Version Bumper: One-Click Version Management for React Native and Expo Apps

Every React Native developer knows this frustration: you're ready to release an app update, but first you need to manually update versions across multiple files. One mistake - forgetting to bump the Android version code or having mismatched versions across platforms - and you're dealing with app store rejections or confused team members.

The Version Management Problem

Many React Native developers know this routine: you're ready to release an app update, but first you need to update versions across multiple files. It's not difficult, just time-consuming and easy to mess up. You typically need to:

Update the version in package.json
Update the Android version in build.gradle
Update the iOS version in Info.plist
Create a git commit and tag
Push everything to remote

This usually takes 10–15 minutes each time. And occasionally, you might forget a step or make a typo.

Introducing React Native Version Bumper

React Native Version Bumper is a new open-source VS Code extension that transforms this multi-step manual process into a single command operation. Instead of hunting through files and manually updating version numbers, developers can now manage all platform versions from one interface.

How It Works

When you bump from version 1.0.0 to 1.0.1, the extension can:

Update package.json: "version": "1.0.1"
Update Android: versionName "1.0.1" and versionCode 2
Update iOS: Version 1.0.1 and build number 2
Optionally create git commit, tag, and push to remote

The goal is to help keep your platforms in sync and save you a few minutes per release.

Why Another Tool When CLI Solutions Exist?

You might be thinking: "Don't we already have Fastlane, semantic-release, EAS CLI, and other CLI tools?" You're absolutely right - these are solid tools that handle version management well in their contexts.

But what about the 80% of time when you're actively developing? When you need quick visual feedback, want to stay in your editor, or just want to bump and test without switching apps?

CLI tools excel at automated workflows and release pipelines. This extension optimizes for a different moment - those quick iterations during active development when you need fast, visual version management without leaving your code.

Give It a Try

The extension is free and open source.

🚀 Install from VS Code Marketplace

⭐ View on GitHub

Key Features

⚡ CodeLens: One-Click Version Updates

Click the ↑ arrows above version lines for instant bumps

🔄 Bump All Platforms

Update Android, iOS, and package.json simultaneously

⚒️ Complete Git Workflow

Branch creation, commits, tags, and release automation

📊 Version Overview

Monitor all platform versions at a glance

🔀 Sync All Platforms

Synchronize versions across all platforms to match

📋 Interactive Batch Mode

Review everything before applying changes

🚀 Expo Support

Supports Expo projects: configure via app.json, app.config.js/ts with option to sync native Android/iOS files

Getting Started

The extension is designed for immediate productivity. Here's how to begin:

Install from the VS Code Marketplace
Open any React Native project
Access commands via Ctrl+Shift+P → "Version Bumper"
Choose your action (Bump All, Sync All, Version Overview, etc.)
Select bump type (Patch, Minor, or Major) if bumping
Review changes in the interactive preview
Confirm and apply - watch everything update automatically

Requirements

A React Native project with android/ and/or ios/ folders. Package.json is optional.

Available Commands

Version Bumper: Bump All - Updates versions across selected platforms without Git operations
Version Bumper: Bump All + Git - Same as above, plus creates branches, commits, tags, and pushes to remote
Version Bumper: Sync All - Synchronizes all platforms to the same version (choose source version)
Version Bumper: Sync All + Git - Sync operation with complete Git workflow
Version Bumper: Version Overview - Displays current versions for all platforms in a webview
Single-file commands - Bump Patch/Minor/Major (Current File) for individual file updates

Configuration

The extension adapts to different project structures:

Skip platforms not in use (Android, iOS, or package.json)
Customize file paths for monorepos and non-standard structures
Configure Git workflows to match team processes
Support for both standard and non-standard React Native project layouts
Auto-detection with manual override options

Recommended Configuration

For optimal experience, add these settings to your VS Code configuration:

{
  "reactNativeVersionBumper.enableCodeLens": true,
  "reactNativeVersionBumper.batchMode": true,
  "reactNativeVersionBumper.git.autoCreateBranch": false,
  "reactNativeVersionBumper.git.autoCreateTag": false,
  "reactNativeVersionBumper.git.commitMessageTemplate": "chore: bump version to {platformUpdates}",
  "reactNativeVersionBumper.git.branchNameTemplate": "release/{version}",
  "reactNativeVersionBumper.git.tagNameTemplate": "v{version}"
}

Advanced Features

Smart Commit Messages

The extension uses a commit message prefix approach for cleaner, more predictable commit messages:

How It Works:

You configure: Just the prefix (e.g., "chore: bump version to ")
System adds: Smart version suffix based on your project type
Result: Clean, contextual commit messages

Sync Operations

Sync operations use a separate configurable prefix:

Regular: chore: bump version to v1.2.0 (uses git.commitMessagePrefix)
Sync: chore: sync version to v1.2.0 (uses git.syncCommitMessagePrefix)

Template Placeholders

The extension supports powerful template placeholders for branch names and tag names:

{type}: Bump type (e.g., "patch", "minor", "major")
{version}: Latest version (from Git tag or package.json)
{date}: Current date in YYYY-MM-DD format
{androidVersion}: Android version number (e.g., "1.0.1")
{iosVersion}: iOS version number (e.g., "1.0.1")
{androidBuildNumber}: Android build number (e.g., "2")
{iosBuildNumber}: iOS build number (e.g., "3")

Release Notes Generation

The extension automatically generates release notes by:

Looking for existing templates (.github/RELEASE_TEMPLATE.md, etc.)
Appending version information if not already present
Falling back to a simple default format with changelog links

Status Bar Integration

The status bar shows the current package.json version and sync status. Click it to quickly access the Version Overview command. The status bar updates automatically when version files change, providing real-time feedback.

Technical Implementation

The extension is built with modern development practices:

TypeScript for type safety and maintainability
Comprehensive testing using VS Code's extension testing framework
Intelligent file detection that adapts to various project structures
Robust error handling with detailed feedback for troubleshooting
Semantic versioning support with customizable bump strategies
File system watchers for real-time status updates

The tool intelligently detects React Native project structures, handles edge cases like iOS variables and custom file paths, and provides clear feedback when operations succeed or encounter issues.

Open Source and Community-Driven

React Native Version Bumper is open source and welcomes community contributions. The project is hosted on GitHub with comprehensive documentation, issue tracking, and contribution guidelines.

Project Links:

Try It Today

React Native Version Bumper is available now on the VS Code Marketplace. It's free, open source, and designed specifically for the React Native development workflow. Whether you're a solo developer tired of manual version updates or part of a team seeking more consistent release processes, this extension offers immediate value with minimal setup required.

Have thoughts on React Native development tools or version management workflows? Share your experiences in the comments below.

Tags: #ReactNative #VSCode #DeveloperTools #Productivity #OpenSource #MobileDevelopment #JavaScript #TypeScript

DEV Community