react-native-app-update-helper v1.0.5

React Native App Update Helper

A customizable package designed to efficiently manage app update notifications across iOS and Android platforms. It automates app version fetching from PlayStore/AppStore to prompt users for optional and mandatory updates. Plus, you can add an optional "What's New" overlay to keep users informed about the latest features and changes.

Motivation

🚀 Getting users to updated apps across multiple platforms can be tricky. That’s why we built React Native App Update Helper package.

Our goal is simple: happy users, happy developers!

Inspired by the need for a seamless, cross-platform solution, this package helps you manage updates effortlessly while keeping everyone in the loop with the latest features and improvements.

Key Features

🎯 Auto Update Overlay

• Instant Results: Just provide the PlayStore/AppStore links and current version, and the package will automatically fetch the latest version and prompt users to update when needed.

🛠️ Go Manual

• Full Control: Take charge of the update overlay logic, so you decide exactly when and how users are prompted to update.

🔍 What's New

• Feature Highlights: Easily showcase the latest features, improvements, and bug fixes with a dedicated "What's New" section.

📱 Platform Support

• iOS & Android: Ensure a consistent and smooth update experience across all devices.

🚀 Easy Setup

• Get Started Quickly: Simple installation and setup instructions to have you up and running in no time.
• Smooth Integration: Seamlessly integrate with your existing React Native app.

🎨 Highly Customizable

• Branding: Tailor the overlays to match your app's look and feel.
• Flexibility: Adjust colors, fonts, and layout to suit your style.

Installation

Install the package.

npm install react-native-app-update-helper

Install the dependences.

npm i @react-native-async-storage/async-storage

Requires React Native 0.60+

Remember to install the pod with:

npm pod install

✨ Note: The package supports only semantic type of versioning.

Usage

Begin by importing the package into your screen to start using it.

import {AutoUpdateOverlay, ManualUpdateOverlay} from 'react-native-app-update-helper';

Automated Update

Start with the simplest setup: this configuration provides automated logic for running the update overlay with a clean, default style.

 <AutoUpdateOverlay
    currentVersion={APP_VERSION}
    iosStoreLink={iosLink}
    androidStoreLink={androidLink}
/>

Add Your Flavor: Customize your overlay by tweaking the main title, description, colors, button title, and icon to perfectly match your app’s style.

 <AutoUpdateOverlay
    icon={custom_icon}
    mainTitle="CUSTOM NOTE"
    description="Custom description!"
    buttonTitle="CUSTOM BUTTON"
    primaryColor="#ABC123"
    backgroundColor="#EEE777"
    titleFontFamily="Mulish-Bold"
    descriptionFontFamily="Mulish-Regular"
    buttonTitleFontFamily="Mulish-SemiBold"
    titleFontSize={18}
    descriptionFontSize={14}
    buttonTitleFontSize={16}
    currentVersion={APP_VERSION}
    iosStoreLink={iosLink}
    androidStoreLink={androidLink}
/>

What's New Section: Choose whether to display the "What's New" section and personalize its content to fit your app’s updates.

✨ Note: If you don’t provide a custom description, it will be automatically pulled from the store’s "What's New" section.

 <AutoUpdateOverlay
    currentVersion={APP_VERSION}
    iosStoreLink={iosLink}
    androidStoreLink={androidLink}
    isWhatsNewRequired //true by default
    whatsNewDescription={'We have updated Our App!'}
/>

Manual Update

For complete control over the update process, switch to the Manual Update Overlay and manage the setup yourself.

 <ManualUpdateOverlay
    updateAvailable={true}
    isMandatoryUpdate={true}
    onDismissButtonPress={() => dismissUpdateOverlay(false)}
    iosStoreLink={iosLink}
    androidStoreLink={androidLink}
  />

Add Your Flavor: Customize your overlay by tweaking the main title, description, colors, button title, and icon to perfectly match your app’s vibe.

 <ManualUpdateOverlay
    icon={custom_icon}
    mainTitle="CUSTOM NOTE"
    description="Custom description!"
    buttonTitle="CUSTOM BUTTON"
    primaryColor="#ABC123"
    backgroundColor="#EEE777"
    titleFontFamily="Mulish-Bold"
    descriptionFontFamily="Mulish-Regular"
    buttonTitleFontFamily="Mulish-SemiBold"
    titleFontSize={18}
    descriptionFontSize={14}
    buttonTitleFontSize={16}
    updateAvailable={true}
    isMandatoryUpdate={true}
    onDismissButtonPress={() => dismissUpdateOverlay(false)}
    iosStoreLink={iosLink}
    androidStoreLink={androidLink}
  />

What's New Section: Choose whether to display the "What's New" section and personalize its content to fit your app’s updates.

✨ Note: To automatically fetch the description from the store’s "What's New" section, make sure to provide the current version. If not, you can manually set the content yourself.

 <ManualUpdateOverlay
    updateAvailable={true}
    isMandatoryUpdate={true}
    onDismissButtonPress={() => dismissUpdateOverlay(false)}
    isWhatsNewRequired //true by default
    whatsNewDescription={'We have updated Our App!'} // not required if fetching content automatically
    currentVersion={APP_VERSION} //required if isWhatsNewRequired is set to true
    iosStoreLink={iosLink}
    androidStoreLink={androidLink}
  />

Properties

Common properties (optional)

Automated version update properties (required)

Manual version update properties

License

This project is licensed under the MIT License - see the LICENSE file for details.