UpdateAppModalProvider.tsx

import React from 'react';
import {
	Linking,
	Modal,
	Platform,
	SafeAreaView,
	ScrollView,
	StyleSheet,
	Text,
	TouchableOpacity,
	View,
} from 'react-native';
import VersionCheck from 'react-native-version-check';

interface FeatureUpdate {
	name: string;
	description?: string;
}

interface Version {
	version: string;
	updateRequired: boolean;

	title: string;
	description?: string;
	updates: FeatureUpdate[];
}

interface VersionData {
	ios: Version;
	android: Version;
}

const BREV_VERSION_ENDPOINT = 'YOUR_LINK_HERE';
const APP_STORE_LINK = 'YOUR_LINK_HERE';
const PLAY_STORE_LINK = 'YOUR_LINK_HERE';

export const UpdateAppModalProvider: React.FC = () => {
	const [showUpdateAppModal, setShowUpdateAppModal] = React.useState<boolean>(
		false,
	);
	const [deviceVersionData, setDeviceVersionData] = React.useState<
		Version | undefined
	>(undefined);

	React.useEffect(() => {
		setShowUpdateAppModal(false);
		var request = new XMLHttpRequest();
		request.onreadystatechange = (e) => {
			if (request.readyState !== 4) {
				return;
			}

			if (request.status === 200) {
				let data = JSON.parse(request.response) as VersionData;
				if (data) {
					let osVersionData =
						Platform.OS === 'ios' ? data.ios : data.android;
					setDeviceVersionData(osVersionData);
					VersionCheck.needUpdate({
						currentVersion: VersionCheck.getCurrentVersion(),
						latestVersion: osVersionData.version,
						depth: 2,
					}).then((res) => {
						if (res.isNeeded) {
							setShowUpdateAppModal(true);
						}
					});
				}
			} else {
				console.warn('error');
			}
		};
		request.open('GET', BREV_VERSION_ENDPOINT);
		request.send();
	}, []);

	if (showUpdateAppModal && deviceVersionData) {
		return (
			<Modal presentationStyle="fullScreen">
				<SafeAreaView style={styles.container}>
					<View style={styles.contentContainer}>
						<ScrollView style={styles.scrollView}>
							<Text style={[styles.text, styles.textTitle]}>
								{deviceVersionData.title || 'New Update!'}
							</Text>
							{deviceVersionData.description && (
								<Text
									style={[
										styles.text,
										styles.textDescription,
									]}
								>
									{deviceVersionData.description}
								</Text>
							)}
							<View style={styles.featuresContainer}>
								{deviceVersionData.updates.map(
									(featureUpdate) => (
										<View style={styles.featureContainer}>
											<Text
												style={[
													styles.text,
													styles.textFeatureName,
												]}
											>
												•
											</Text>
											<View
												style={
													styles.featureTextContainer
												}
											>
												<Text
													style={[
														styles.text,
														styles.textFeatureName,
													]}
												>
													{featureUpdate.name}
												</Text>
												{featureUpdate.description && (
													<Text
														style={[
															styles.text,
															styles.textFeatureDescription,
														]}
													>
														{
															featureUpdate.description
														}
													</Text>
												)}
											</View>
										</View>
									),
								)}
							</View>
						</ScrollView>
						<TouchableOpacity
							onPress={() =>
								Linking.openURL(
									Platform.OS === 'ios'
										? APP_STORE_LINK
										: PLAY_STORE_LINK,
								)
							}
							style={styles.updateButton}
						>
							<Text style={styles.updateButtonText}>
								Update Now!
							</Text>
						</TouchableOpacity>
					</View>
				</SafeAreaView>
			</Modal>
		);
	} else {
		return null;
	}
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#5568E5',
	},
	contentContainer: {
		flex: 1,
		marginHorizontal: 20,
		marginTop: 10,
		marginBottom: 20,
	},
	scrollView: {
		flex: 1,
	},
	featuresContainer: {
		marginTop: 30,
	},
	featureContainer: {
		flexDirection: 'row',
		marginBottom: 15,
	},
	featureTextContainer: {
		marginLeft: 10,
	},

	text: {
		color: 'white',
	},
	textTitle: {
		fontSize: 30,
		fontWeight: '500',
		textAlign: 'center',
	},
	textDescription: {
		fontSize: 16,
		textAlign: 'center',
		marginTop: 5,
	},
	textFeatureName: {
		fontSize: 18,
		fontWeight: '600',
	},
	textFeatureDescription: {
		fontSize: 16,
	},
	updateButton: {
		backgroundColor: 'white',
		alignItems: 'center',
		padding: 10,
		borderRadius: 30,
	},
	updateButtonText: {
		color: '#5568E5',
		fontWeight: '600',
		fontSize: 20,
	},
});