reactnative-forceupdate

A lightweight React Native package for enforcing app version updates. Ensure users always have the latest enhancements and fixes without dependencies.

Features

• Enforce app version updates for Android and iOS
• Ensure users have the latest enhancements and fixes
• Lightweight and native implementation
• No external dependencies
• 100% test coverage
• Made with Typescript
• Customizable forceupdate modal on forceupdate dashboard
• Callbacks for handling modal events
• Support for multiple languages
• Support for multiple platforms
• A completed SaaS to manage your versions

Creating an account

To use this package, you need to create an account on ForceUpdate and create a project. You will get an API key that you will use to check if the app is updated.

There is a free plan that you can use to test the package!

Installation

Install the package using:

npm

npm install reactnative-forceupdate

or

yarn

yarn add reactnative-forceupdate

Usage

Import the package

import { ForceUpdate } from 'reactnative-forceupdate';

Wrap your app with the ForceUpdate component. It will check if the app is updated and show a modal if it's not.

<ForceUpdate
  api_key="6bbc51d23e5938d512a62a83c230dfdef89ab7a2c75bdc1f0f42909d5e04feb5"
  language={'en'}
  platform={'ANDROID'}
  version={'1.0.2'}
>
  <View>
    <FakeProvider>
      <Text>My App</Text>
    </FakeProvider>
  </View>
</ForceUpdate>

API Reference

These properties are required when instantiating the ForceUpdate component.

| Parameter | Explanation | | --------- | ------------------------------------------------------------------------------- | | Platform | It should be either 'ANDROID' or 'IOS' | | Version | The actual version of your app | | Api_key | The API key of your project. You can get it on your forceupdate.app dashboard | | Language | The language of the message. The same defined on your forceupdate.app dashboard |

Optional props (Customization)

These are the optional props that you can use to customize the modal.

| Parameter | Explanation | Context | Default value | | ----------------- | ---------------------------------------------------- | ------------- | ------------- | | showAppBackground | Show the app background behind the forceupdate modal | true or false | true |

Optional props (Callbacks)

These are the optional props that you can use to handle the modal events.

| Parameter | Explanation | Context | | ---------------------- | -------------------------------------------------- | -------------------------------------------------------------------------- | | onDismiss | Callback when the user dismisses the modal | only appliable when force_update is false | | onForceUpdate | Callback when the user clicks on the update button | only appliable when force_update is true | | onUpdate | Callback when the user clicks on the update button | only appliable when force_update is false and needs_update is true | | onVersionCheck | Callback when the version check starts | always | | onVersionCheckError | Callback when the version check fails | always when error | | onVersionCheckSuccess | Callback when the version check succeeds | always when success | | onVersionCheckStart | Callback when the version check starts | always | | onVersionCheckEnd | Callback when the version check ends | always | | onVersionCheckComplete | Callback when the version check completes | always | | onLoadingStart | Callback when the loading starts | always | | onLoadingEnd | Callback when the loading ends | always |

API response

You do not manipulate the API response, but it's important to understand the properties that you can use to customize the modal on forceupdate.app dashboard.

| Parameter | Explanation | Context | | ------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | needs_update | If the app needs an update | Defined on your version on forceupdate.app | | force_update | If the app needs a force update | Defined on your version on forceupdate.app | | title | The title of the modal | The title that will be shown to the user when modal appear | | message | The message that will be shown to the user | The message that will be shown to the user when modal appear | | store_url | The url of the app store | The url that the user will be redirected when clicking on the update button. It consider the platform that the user is using, this property is defined on when you call <ForceUpdate ... platform={'ANDROID'} /> | | dismiss_button_text | The text of the dismiss button | The text of the dismiss button, defined on your version on forceupdate.app | | update_button_text | The text of the update button | The text of the update button, defined on your version on forceupdate.app |

Examples

Expo

import Constants from 'expo-constants';
import { Platform } from 'react-native';

// ...

const version = Constants.manifest.version;
const platform = Platform.OS === 'ios' ? 'IOS' : 'ANDROID';
const language = 'en'; // or get it from any library like I18n
const apiKey =
  '6bbc51d23e5938d512a62a83c230dfdef89ab7a2c75bdc1f0f42909d5e04feb5';

return (
  <ForceUpdate
    api_key={apiKey}
    language={language}
    platform={platform}
    version={version}
  >
    <YourApp />
  </ForceUpdate>
);

React Native

If you are using react-native without expo, you can get the version using the react-native-device-info package.

import DeviceInfo from 'react-native-device-info';

And then use it like this:

import { Platform } from 'react-native';
// ...
const version = DeviceInfo.getVersion();
const language = 'en'; // or get it from any library like I18n
const platform = Platform.OS === 'ios' ? 'IOS' : 'ANDROID';
const apiKey =
  'd723422430af5a6081a95be021dc7437bb5c74ec0648ef818e4d148f928e7043';

return (
  <ForceUpdate
    api_key={apiKey}
    language={language}
    platform={platform}
    version={version}
  >
    <YourApp />
  </ForceUpdate>
);

Api key

The API key is a unique identifier for your app. You can get it by creating an account on ForceUpdate and create a project to get one.

Made with create-react-native-library