clarity needed around how to force an update server side / github raw gist / json sample

[pe-johndpope]

UPDATE:
my use case is - I want to specifiy a minimum supported version server side configurable.
it's not necessarily the latest version - just a version that users must at least be on.

I have this end point (it's a little bit slow to update - because of expiring cache/ but it's raw json)
https://gist.githubusercontent.com/pe-johndpope/0acaf8fa67fd90e8b6bca2a7451a1e4a/raw/test.json

my app is version 7.61 - server says min version is 7.70 - so I must update.
or 7.50 server side - so no update needed.

I could show a page within the app - or open link to app in respective store.

PROBLEM IS
setNeedsUpdate(true);
it seems like I need to perform more steps to test the sem version - which defeats purpose of using this library.

  VersionCheck.getLatestVersion({
    // forceUpdate: true,
    provider: () => fetch('https://gist.githubusercontent.com/pe-johndpope/0acaf8fa67fd90e8b6bca2a7451a1e4a/raw/test.json')
      .then(r =>  r.json())
      .then(({ version }) => version),   // You can get latest version from your own api.
      
  }).then(latestVersion => {
    console.log("👺  we need to upgrade to latest Version:", latestVersion);
    setNeedsUpdate(true);
  });

});
the provider fails with typescript / not sure why.

it's mostly working - but if you could spell out example would be great.

[pe-johndpope]

so here's some bare bones stuff - but it's broken.
I have app version 7.61 as my app version - and version 7.60 in the gist - but it still wants to update app.

  VersionCheck.getLatestVersion({
    forceUpdate: true,
    provider: () => fetch('https://gist.githubusercontent.com/pe-johndpope/0acaf8fa67fd90e8b6bca2a7451a1e4a/raw/test.json')
      .then(r => r.json())
      .then(({ version }) => version),   // You can get latest version from your own api.
  }).then(version => {
    console.log("👺  we need to upgrade to latestVersion:", version);
    setNeedsUpdate(true);
  });

UpdateApp.tsx
// needs to add

/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
import React, {useCallback} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Button,
    TouchableWithoutFeedback,
    Linking,
    Alert,
    Platform,
} from 'react-native';
import VersionCheck from 'react-native-version-check';
import DeviceInfo from 'react-native-device-info';

const {height, width} = Dimensions.get('window');
import {State} from '../../../types'
export default function UpdateApp({navigation}:any) {
    const email = 'mailto:info@pooledenergy.com.au';
    const tel = 'tel:1300364703';
    let link = "";
    const version = DeviceInfo.getVersion();
    const handleEmailPress = useCallback(async () => {
        const supported = await Linking.canOpenURL(email);
        if (supported) {
            await Linking.openURL(email);
        } else {
            Alert.alert(`Don't know how to open this URL: ${email}`);
        }
    }, [email]);
    const handleTelPress = useCallback(async () => {
        const supported = await Linking.canOpenURL(tel);
        if (supported) {
            await Linking.openURL(tel);
        } else {
            Alert.alert(`Don't know how to open this URL: ${tel}`);
        }
    }, [tel]);

    const handleAppStore = useCallback(async () => {
     
        if (Platform.OS === 'ios') {
            link = 'itms-apps://apps.apple.com/au/app/pooled-energy-customer-app/id970259713';
        }else{
            link = 'market://details?id=com.pooledenergy.customerapp';
        }
       

        const supported = await Linking.canOpenURL(link);
        if (supported) {
            console.log("link is supported...");
            await Linking.openURL(link);
        } else {
            console.log("link isn't opening WTF..");
            Alert.alert(`Don't know how to open this URL: ${link}`);
        }
    }, [link]);


    function textForStore(){
        if (Platform.OS === 'ios') {
            return "Apple Appstore"
        }else{
            return "Google MarketPlace"
        }
       
    }
    return (
        <View style={styles.container}>
         <View style={styles.row}>
                <TouchableOpacity >
                    <Text>This version of app is no longer supported and must be updated. We apologize for inconvenience.</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.row}>
                <TouchableOpacity onPress={handleTelPress}>
                    <Text>Pooled Energy: 1300 364 703</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.row}>
                <TouchableOpacity  onPress={handleEmailPress}>
                    <Text>Email: info@pooledenergy.com.au</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.row}>
                <TouchableOpacity  onPress={handleAppStore}>
                    <Text>{textForStore()}</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.row}>
                <TouchableOpacity  >
                <Text style={ styles.versionText }>v. {version}</Text>
                </TouchableOpacity>
            </View>

            
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: 'center',
        marginTop: Platform.OS === 'ios' ? 20 : 0,
        height: 500,
    },
    row: {
        width: width,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 50,
        paddingHorizontal: 20,
        backgroundColor: '#fff',
        borderBottomColor: 'rgba(189, 195, 199, 0.5)',
        borderBottomWidth: 1,
    },
    title: {
        width: width,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 50,
        paddingHorizontal: 20,
    },
});

[pe-johndpope]

this seems wrong / as the first call is really just a stand alone axios call to get the version.

 const version = DeviceInfo.getVersion();
  VersionCheck.getLatestVersion({
    // forceUpdate: true,
    provider: () => fetch('https://gist.githubusercontent.com/pe-johndpope/0acaf8fa67fd90e8b6bca2a7451a1e4a/raw/test.json')
      .then(r =>  r.json())
      .then(({ version }) => version),   // You can get latest version from your own api.
      
  }).then(latestVersion => {
    
    VersionCheck.needUpdate({
      depth: 1,
      currentVersion: version,
      latestVersion: latestVersion,
    }).then(res => {
      if (res.isNeeded){
        console.log("👺  we need to upgrade to latest Version:", latestVersion);
        setNeedsUpdate(true);
      }
    });
  });

[mp3por]

What does forceUpdate do ?

[johndpope]

I believe intention is - app is unusable until updated. Useful when you want to make an api call obsolete retrospectively.