Created
April 18, 2021 00:14
-
-
Save BrianLi101/a62b5287b1ba4ce1986a94beac1a852c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, | |
| }, | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment