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

Sandip Shiwakoti — Sat, 02 Aug 2025 03:53:00 +0000

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

React Native Package Checker: Simplify Your New Architecture Migration

Sandip Shiwakoti — Wed, 12 Mar 2025 13:52:45 +0000

Migrating to React Native's New Architecture is a significant undertaking for any development team. One of the most time-consuming aspects? Verifying whether your project's dependencies are compatible with the new architecture. With projects often using dozens of packages, checking each one manually can take hours, if not days.

Introducing React Native Package Checker

React Native Package Checker is an open-source tool designed to eliminate this bottleneck. It allows developers to instantly check multiple packages for New Architecture compatibility, turning hours of manual work into seconds of automated analysis.
🚀 Try the live website
⭐ Check out the GitHub repository

How It Works

Simply drop your package.json file onto the website, and the it immediately analyzes all your React Native dependencies. No installation required, no complex setup - just instant insights about your packages' compatibility status.

Key Features

📦 Upload & Analyze: Simply drag and drop your package.json file to receive an instant, comprehensive compatibility analysis of your React Native dependencies. Save hours of manual research with one-click analysis.
🔍 Bulk Package Checking: Evaluate multiple packages simultaneously to determine their New Architecture compatibility status. Perfect for large-scale projects with numerous dependencies, this feature streamlines what would otherwise be a time-consuming manual process.
📊 Comprehensive Analysis: Access detailed package insights including maintenance patterns, supported platforms, TypeScript integration, overall quality score, GitHub metrics (stars, issues), direct link to Upgrade helper, and suggested alternatives. Get all the information you need in one place to make informed decisions.
🔎 Quick Search & Filters: Navigate through packages effortlessly with powerful search functionality and customizable filters. Sort by compatibility status, popularity, recent updates, or any other criteria to quickly find exactly what you're looking for.
💾 Export & Share: Generate professional reports in PDF or Excel formats with a single click. Easily share compatibility findings with your team members to facilitate smooth migration planning.

Motivation

The React Native Directory is an excellent resource, but it wasn't designed for bulk package checking. During a React Native New Architecture migration, checking packages individually became a bottleneck. React Native Package Checker fills this gap by enabling simultaneous package analysis, making migration planning more efficient.

Real-World Usage Example

Let's say you're planning to migrate a large React Native application. Here's how you'd use the tool:

Export your package.json from your project
Upload it to react-native-package-checker.vercel.app
Get instant analysis of all your packages
Export a report for your team
Use the insights to plan your migration strategy

Advantages Over Existing Tools

While tools like Expo Doctor and React Native Directory are valuable, React Native Package Checker offers unique benefits:

No Local Setup : Unlike Expo Doctor, it's a web-based tool with no installation required
Bulk Analysis : Check multiple packages simultaneously, unlike React Native Directory
Visual Reporting : Get clear, shareable visual reports instead of CLI output
Comprehensive Data : Combines compatibility data with maintenance and quality metrics

Credits

This tool wouldn't be possible without the incredible work of the React Native Directory team. React Native Package Checker builds upon their package data to provide compatibility insights. A huge thank you to the React Native community for maintaining such a valuable resource!

Conclusion

The migration to React Native's New Architecture doesn't have to be overwhelming. With React Native Package Checker, you can quickly understand your project's compatibility status and plan your migration with confidence.

[This article is part of our ongoing effort to make React Native New Architecture migration easier for the community. Share your experiences and suggestions with us on GitHub.]

DEV Community: Sandip Shiwakoti

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

The Version Management Problem

Introducing React Native Version Bumper

How It Works

Why Another Tool When CLI Solutions Exist?

Give It a Try

Key Features

⚡ CodeLens: One-Click Version Updates

🔄 Bump All Platforms

⚒️ Complete Git Workflow

📊 Version Overview

🔀 Sync All Platforms

📋 Interactive Batch Mode

🚀 Expo Support

Getting Started

Requirements

Available Commands

Configuration

Recommended Configuration

Advanced Features

Smart Commit Messages

Sync Operations

Template Placeholders

Release Notes Generation

Status Bar Integration

Technical Implementation

Open Source and Community-Driven

Try It Today

React Native Package Checker: Simplify Your New Architecture Migration

Introducing React Native Package Checker

How It Works

Key Features

Motivation

Real-World Usage Example

Advantages Over Existing Tools

Credits

Conclusion