@janiscommerce/app-check-updates

This package provides the functionality to detect when there is a new version of the app and notify the user

appCheckUpdates

It is checked by two means, in the first instance it is consulted in the store of the corresponding operating system, for cases where you work with apks and do not have access to the store, an api provided bi Janis will be searched, and if you have new versions, will additionally return the new version number.

Parameters

| Options | Type | Description | | ----------- | ----------------- | -------------------------------------------- | | buildNumber | (required) String | The build number of your current app version | | env | (required) String | Janis environment where we are working | | app | (required) String | Application we work on |

updateFromJanis

This function is responsible for downloading the apk of the new version using an api provided by janis and automatically installing it on the device.

Parameters

| Options | Type | Description | | ---------------- | ----------------- | -------------------------------------- | | newVersionNumber | (required) String | The new version number of the app | | env | (required) String | Janis environment where we are working | | app | (required) String | Application we work on |

Automatic Installation

Since version 3.3.0, updateFromJanis automatically triggers the APK installation after a successful download. The installation process:

1. Downloads the APK from Janis server
2. Automatically opens Android's installer
3. User only needs to tap "Install"
4. Android handles the app replacement automatically

Note: If the installation fails (e.g., due to permissions), the APK remains downloaded and the user can install it manually from their device's file manager.

Installation

The minimum required versions for using the package are react: 17.0.2 and react-native: 0.67.5.

npm install @janiscommerce/app-check-updates

Peer Dependencies

This package requires the following peer dependencies to be installed manually in your application:

1. sp-react-native-in-app-updates

npm install [email protected]

2. react-native-fs

npm install react-native-fs

Android Configuration

This package includes a native Android module for automatic APK installation. The native module is automatically included when you install the package - no additional dependencies required!

To enable automatic APK installation, you need to configure the following in your Android app:

1. Add Permission (Required)

⚠️ Important: Your application must declare the installation permission in its android/app/src/main/AndroidManifest.xml. This permission is not included in the package to allow apps to configure it conditionally (e.g., using product flavors):

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Required for automatic APK installation (Android 8.0+) -->
    <!-- This MUST be declared in your app's manifest -->
    <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />

    <application>
        <!-- ... -->
    </application>
</manifest>

Note: If you're using Android product flavors, you can conditionally include this permission per flavor in your flavor-specific manifest files.

2. Configure FileProvider

Add the FileProvider inside the <application> tag in android/app/src/main/AndroidManifest.xml:

<application>
    <!-- Other configurations -->

    <!-- FileProvider for APK installation (Android 7.0+) -->
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="${applicationId}.fileprovider"
        android:exported="false"
        android:grantUriPermissions="true">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/file_paths" />
    </provider>
</application>

3. Create File Paths Configuration

Create the file android/app/src/main/res/xml/file_paths.xml:

<?xml version="1.0" encoding="utf-8"?>
<paths>
    <external-path name="external_files" path="." />
    <external-path name="downloads" path="Download" />
</paths>

4. Rebuild Your App

After configuration, rebuild your Android app:

cd android && ./gradlew clean && cd ..
npm run android

Important Notes:

• This package includes its own native Android module - no external APK installer libraries needed!
• The REQUEST_INSTALL_PACKAGES permission must be declared in your app's manifest - it is not automatically included by this package. This allows you to configure it conditionally per build flavor.
• The InstallReceiver component is automatically merged from this package's AndroidManifest to handle post-installation cleanup.
• On Android 8.0 (API level 26) and higher, users must explicitly grant permission to install apps from unknown sources. The system will prompt the user automatically when the installation is triggered.
• The FileProvider configuration is required for Android 7.0+ to securely share the APK file with the system installer.

Usage Examples

Basic Update Check

import React, {useEffect} from 'react';
import {View, Text} from 'react-native';
import {appCheckUpdates, updateFromJanis} from '@janiscommerce/app-check-updates';

const App = () => {
	useEffect(async () => {
		const {hasCheckedUpdate, shouldUpdateFromJanis, newVersionNumber} = await appCheckUpdates({
			buildNumber: '2350',
			env: 'janisqa',
			app: 'picking',
		});
		if (shouldUpdateFromJanis) {
			await updateFromJanis({
				env: 'janisqa',
				app: 'picking',
				newVersionNumber: newVersionNumber,
			});
		}
	}, []);

	return (
		<View>
			<Text>app check updates</Text>
		</View>
	);
};

ReactDOM.render(<App />, document.querySelector('#app'));

Detecting App Updates and Showing "What's New"

import React, {useEffect, useState} from 'react';
import {View, Text, Modal, Button} from 'react-native';
import {checkIfJustUpdated} from '@janiscommerce/app-check-updates';

const App = () => {
	const [showWhatsNew, setShowWhatsNew] = useState(false);

	useEffect(async () => {
		// Check if app was just updated
		const wasUpdated = await checkIfJustUpdated();

		if (wasUpdated) {
			// Show "What's New" dialog
			setShowWhatsNew(true);
			// The old APK file has been automatically cleaned up
		}
	}, []);

	return (
		<View>
			<Text>My App</Text>

			<Modal visible={showWhatsNew} onRequestClose={() => setShowWhatsNew(false)}>
				<View>
					<Text>What's New in this Version!</Text>
					<Text>• Feature 1</Text>
					<Text>• Feature 2</Text>
					<Button title="Close" onPress={() => setShowWhatsNew(false)} />
				</View>
			</Modal>
		</View>
	);
};

export default App;

Complete Update Flow with Post-Install Detection

import React, {useEffect, useState} from 'react';
import {View, Text, Alert} from 'react-native';
import {
	appCheckUpdates,
	updateFromJanis,
	checkIfJustUpdated,
} from '@janiscommerce/app-check-updates';

const App = () => {
	const [isChecking, setIsChecking] = useState(true);

	useEffect(async () => {
		// First, check if we just came back from an update
		const wasUpdated = await checkIfJustUpdated();

		if (wasUpdated) {
			Alert.alert(
				'Update Complete!',
				'Your app has been successfully updated to the latest version.',
				[{text: 'OK'}]
			);
		}

		// Then check for new updates
		const {shouldUpdateFromJanis, newVersionNumber} = await appCheckUpdates({
			buildNumber: '2350',
			env: 'janisqa',
			app: 'picking',
		});

		if (shouldUpdateFromJanis) {
			Alert.alert(
				'Update Available',
				`A new version (${newVersionNumber}) is available. Do you want to update now?`,
				[
					{text: 'Later', style: 'cancel'},
					{
						text: 'Update',
						onPress: async () => {
							await updateFromJanis({
								env: 'janisqa',
								app: 'picking',
								newVersionNumber,
							});
							// After this, the app will close and install
							// When it reopens, checkIfJustUpdated() will return true
						},
					},
				]
			);
		}

		setIsChecking(false);
	}, []);

	if (isChecking) {
		return <Text>Checking for updates...</Text>;
	}

	return (
		<View>
			<Text>My App</Text>
		</View>
	);
};

export default App;