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)

Prop	Description	Type
icon	Top icon.	Image
mainTitle	Main overlay title.	String
description	Main overlay description.	String
buttonTitle	Allows to customize the 'Update' button title.	String
isWhatsNewRequired	Indicates whether the What's New section is shown.	Boolean
whatsNewDescription	Sets custom content for the What's New section (overwrites automated fetch of the content).	String
primaryColor	Sets custom background color for the buttons.	String
backgroundColor	Sets custom background color.	String
titleFontFamily	Sets custom font family for the main title.	String
descriptionFontFamily	Sets custom font family for the description.	String
buttonTitleFontFamily	Sets custom font family for the button titles.	String
titleFontSize	Sets custom font size for the main title.	Number
descriptionFontSize	Sets custom font size for the description.	Number
buttonTitleFontSize	Sets custom font size for the button titles.	Number

Automated version update properties (required)

Prop	Description	Type
currentVersion	Requires the application's current version.	String
iosStoreLink	Requires a link to the currently published application in the App Store.	String
androidStoreLink	Requires a link to the currently published application in Google Play.	String

Manual version update properties

Prop	Description	Type
updateAvailable	Indicates whether the overlay should be shown or hidden. Required	Boolean
isMandatoryUpdate	Defines whether the update is mandatory or non-mandatory. Required	Boolean
whatsNewDescription	Manually ets the content for what is new in the update. Available only if isWhatsNewRequired = true.	String
onDismissButtonPress	Dismisses the overlay. Required	Function
currentVersion	Requires the application's current version. Required only if isWhatsNewRequired = true and fetching automatically.	String
iosStoreLink	Requires a link to the currently published application in the App Store. Required	String
androidStoreLink	Requires a link to the currently published application in Google Play. Required	String

License

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