react-native-update-check-modal

A simple, plug-and-play update modal for React Native apps.

This package helps you notify users when a new version of your app is available, with support for optional and mandatory updates.

Features

• Automatic version check on app load
• Supports optional and force updates
• Lightweight and easy to integrate
• Opens App Store or Play Store directly
• Fully customizable colors and text

Installation

npm install react-native-update-check-modal

or

yarn add react-native-update-check-modal

Usage

Basic usage

import React from 'react';
import { View } from 'react-native';
import UpdateChecker from 'react-native-update-check-modal';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <UpdateChecker />
    </View>
  );
}

Custom colors

<UpdateChecker
  colors={{
    overlay: 'rgba(0, 0, 0, 0.5)',
    background: '#FFFFFF',
    border: '#DDDDDD',
    text: '#000000',
    subText: '#666666',
    primary: '#FF5722',
    primaryText: '#FFFFFF',
    laterBorder: '#CCCCCC',
  }}
/>

You only need to pass the colors you want to change. The rest will use the defaults.

Custom text

<UpdateChecker
  texts={{
    title: 'New version available!',
    forceTitle: 'Please update now',
    description: 'We have a new update for you.',
    forceDescription: 'This update is required to continue.',
    updateButton: 'Update now',
    laterButton: 'Later',
  }}
/>

Custom colors and text together

<UpdateChecker
  colors={{ primary: '#FF5722', background: '#FFFFFF', text: '#000000' }}
  texts={{ title: 'New update!', updateButton: 'Get it now' }}
/>

Default values

Colors:

| Key | Default | |-----|---------| | overlay | rgba(0, 0, 0, 0.7) | | background | #1A1A2E | | border | #2A2A4A | | text | #FFFFFF | | subText | #D1D1E0 | | primary | #4F46E5 | | primaryText | #FFFFFF | | laterBorder | #4A4A6A |

Texts:

| Key | Default | |-----|---------| | title | Update available | | forceTitle | Update required | | description | A new version is available. You can update now or close and continue. | | forceDescription | Your build is too old. You need to update to continue using the app. | | updateButton | Update | | laterButton | Not now |

Force update logic

The component determines whether an update is mandatory using a simple version comparison:

if (latestVersion - currentVersion > 0.1) {
  setMendatory(true);
}

Behavior

• Optional update: user can dismiss the modal
• Mandatory update: user cannot dismiss the modal

How it works

• Checks if a newer version is available on the App Store or Play Store
• If an update is available, the modal is shown automatically
• Tapping "Update" opens the store page directly

Platform support

• Android
• iOS

Notes

• Make sure your app version is correctly defined in:
  • android/app/build.gradle
  • ios/Info.plist

Contributing

Contributions are welcome. Please open an issue or submit a pull request.

License

MIT