use expo-app-update & v116

denniske · Oct 30, 2024 · 1292542 · 1292542
1 parent 345f9d3
commit 1292542
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 73 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@
 
 /android
 /ios
+/widget
 /index.js
 
 play-store-service-account.json

diff --git a/.yarn/cache/expo-app-update-npm-51.0.6-92ee9bf775-254e181a9f.zip b/.yarn/cache/expo-app-update-npm-51.0.6-92ee9bf775-254e181a9f.zip
diff --git a/app/src/app/_layout.tsx b/app/src/app/_layout.tsx
@@ -44,13 +44,21 @@ import { useColorScheme as useTailwindColorScheme } from 'nativewind';
 import { useCallback, useEffect, useState } from 'react';
 import { BackHandler, LogBox, Platform, StatusBar, View, useColorScheme, AppState, AppStateStatus } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { PaperProvider, MD2DarkTheme as PaperDarkTheme, MD2LightTheme as PaperDefaultTheme } from 'react-native-paper';
+import {
+    PaperProvider,
+    MD2DarkTheme as PaperDarkTheme,
+    MD2LightTheme as PaperDefaultTheme,
+    Portal,
+} from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { Provider as ReduxProvider } from 'react-redux';
 import '../../../global.css';
 import { useAppColorScheme, useDeviceContext } from 'twrnc';
 import { appConfig } from '@nex/dataset';
+import UpdateSnackbar from '@app/view/components/snackbar/update-snackbar';
+import ChangelogSnackbar from '@app/view/components/snackbar/changelog-snackbar';
+import ErrorSnackbar from '@app/view/components/snackbar/error-snackbar';
 
 function onAppStateChange(status: AppStateStatus) {
     if (Platform.OS !== 'web') {
@@ -349,6 +357,13 @@ function AppWrapper() {
                                                 backgroundColor="transparent"
                                                 translucent
                                             />
+
+                                            <Portal>
+                                                {Platform.OS !== 'web' && <UpdateSnackbar />}
+                                                {(Platform.OS !== 'web' || isElectron()) && <ChangelogSnackbar />}
+                                                <ErrorSnackbar />
+                                            </Portal>
+
                                             <Tabs
                                                 tabBar={(props) => <TabBar {...props} />}
                                                 screenOptions={{

diff --git a/app/src/changelog.ts b/app/src/changelog.ts
@@ -174,6 +174,12 @@ export const changelog4: IChangelog = {
 };
 
 export const changelog: IChangelog = {
+    '116.0.0': [
+        {
+            type: 'minor',
+            title: 'Check for update in play store / app store on startup and show a message if an update is available',
+        },
+    ],
     '115.0.0': [
         {
             type: 'bugfix',

diff --git a/app/src/service/update.ts b/app/src/service/update.ts
@@ -1,8 +1,8 @@
 import Constants from 'expo-constants';
-import {Platform} from "react-native";
-import {sleep} from "@nex/data";
-import {checkForUpdateAsync, fetchUpdateAsync, UpdateCheckResult} from "expo-updates";
-import {lt} from "semver";
+import { sleep } from '@nex/data';
+import { checkForUpdateAsync, fetchUpdateAsync } from 'expo-updates';
+import { doAppUpdate, getAppUpdateInfo, UpdateAvailability } from 'expo-app-update';
+import { Platform } from 'react-native';
 
 const packageName = Constants.expoConfig?.android?.package;
 
@@ -29,42 +29,31 @@ export async function doFetchUpdateAsync() {
     return await fetchUpdateAsync();
 }
 
+function androidVersionCodeToSemver(versionCode: number) {
+    const major = parseInt(versionCode.toString().slice(0, -4));
+    const minor = parseInt(versionCode.toString().slice(-4, -2));
+    const patch = parseInt(versionCode.toString().slice(-2));
+    return `${major}.${minor}.${patch}`;
+}
+
+export async function doStoreUpdate() {
+    await doAppUpdate();
+}
+
 export async function doCheckForStoreUpdate() {
     if (Constants.expoConfig == null) return null;
-    switch (Platform.OS) {
-        case 'android': {
-            const updateUrl = `https://play.google.com/store/apps/details?id=${packageName}&hl=en`;
-            const response = await fetch(updateUrl);
-            const result = await response.text();
-            const match = result.match(/Current Version.+?>([\d.]+)<\/span>/);
-            if (match) {
-                const version = match[1].trim();
-                return {
-                    isAvailable: lt(Constants.expoConfig.version!, version),
-                    version,
-                    storeUrl: updateUrl,
-                    url: updateUrl,
-                };
-            }
-            return null;
-        }
-        case 'ios': {
-            const updateUrl = `https://itunes.apple.com/lookup?bundleId=${packageName}`;
-            const response = await fetch(updateUrl);
-            const result = await response.json();
-            if (result.resultCount) {
-                const version = result.results[0].version;
-                const appId = result.results[0].trackId;
-                const storeUrl = `itms-apps://apps.apple.com/app/id${appId}`;
-                const url = `https://apps.apple.com/app/id${appId}`;
-                return {
-                    isAvailable: lt(Constants.expoConfig.version!, version),
-                    version,
-                    storeUrl,
-                    url,
-                };
-            }
-            return null;
-        }
+    try {
+        const appUpdateInfo = await getAppUpdateInfo();
+        console.log('appUpdateInfo', appUpdateInfo);
+
+        return {
+            isAvailable: appUpdateInfo.updateAvailable,
+            version: Platform.OS === 'android' ?
+                androidVersionCodeToSemver(appUpdateInfo.android!.availableVersionCode)
+                : appUpdateInfo.ios?.version,
+        };
+    } catch (e) {
+        console.log('doCheckForStoreUpdate', 'error', e);
+        return null;
     }
 }
diff --git a/app/src/view/components/snackbar/changelog-snackbar.tsx b/app/src/view/components/snackbar/changelog-snackbar.tsx
@@ -10,6 +10,7 @@ import {getTranslation} from '../../../helper/translate';
 import {useEffect, useState} from "react";
 import {getElectronVersion, isElectron} from "../../../helper/electron";
 import { sleep } from '@nex/data';
+import { router } from 'expo-router';
 
 
 export default function ChangelogSnackbar() {
@@ -28,11 +29,7 @@ export default function ChangelogSnackbar() {
     const visible = currentVersion != null && (changelogLastVersionRead == null || compareBuild(changelogLastVersionRead, currentVersion) === lessThan);
 
     const openChangelog = () => {
-        const navigation = getRootNavigation();
-        navigation.reset({
-            index: 0,
-            routes: [{name: 'Changelog', params: {changelogLastVersionRead}}],
-        });
+        router.push('/changelog');
         close();
     };
 

diff --git a/app/src/view/components/snackbar/update-snackbar.tsx b/app/src/view/components/snackbar/update-snackbar.tsx
@@ -1,15 +1,25 @@
 import * as React from 'react';
-import {useEffect} from 'react';
-import {Linking, Platform, StyleSheet} from 'react-native';
-import Snackbar from "../snackbar";
+import { useEffect } from 'react';
+import { Linking, Platform, StyleSheet } from 'react-native';
+import Snackbar from '../snackbar';
 import {
-    setUpdateAvailable, setUpdateManifest, setUpdateState, setUpdateStoreManifest, useMutate, useSelector
-} from "../../../redux/reducer";
-import {reloadAsync} from "expo-updates";
-import {doCheckForStoreUpdate, doCheckForUpdateAsync, doFetchUpdateAsync} from "../../../service/update";
-import {lt} from "semver";
-import Constants from "expo-constants";
-import {getTranslation} from '../../../helper/translate';
+    setUpdateAvailable,
+    setUpdateManifest,
+    setUpdateState,
+    setUpdateStoreManifest,
+    useMutate,
+    useSelector,
+} from '../../../redux/reducer';
+import { reloadAsync } from 'expo-updates';
+import {
+    doCheckForStoreUpdate,
+    doCheckForUpdateAsync,
+    doFetchUpdateAsync,
+    doStoreUpdate,
+} from '../../../service/update';
+import Constants from 'expo-constants';
+import { getTranslation } from '../../../helper/translate';
+import { openAppInStore } from 'expo-app-update';
 
 
 export default function UpdateSnackbar() {
@@ -29,7 +39,8 @@ export default function UpdateSnackbar() {
                 mutate(setUpdateManifest(update.manifest!));
                 return;
             }
-        } catch (e) { }
+        } catch (e) {
+        }
 
         const storeUpdate = await doCheckForStoreUpdate();
         if (storeUpdate?.isAvailable) {
@@ -50,14 +61,6 @@ export default function UpdateSnackbar() {
         mutate(setUpdateState('downloaded'));
     };
 
-    const openStore = async () => {
-        if (await Linking.canOpenURL(updateStoreManifest.storeUrl)) {
-            await Linking.openURL(updateStoreManifest.storeUrl);
-            return;
-        }
-        await Linking.openURL(updateStoreManifest.url);
-    };
-
     const restart = async () => {
         await reloadAsync();
     };
@@ -84,12 +87,25 @@ export default function UpdateSnackbar() {
             break;
         case 'storeUpdateAvailable':
             const store = getTranslation(`updatesnackbar.store.${Platform.OS}` as any);
-            message = getTranslation('updatesnackbar.update.updateavailableinstore', { version: `v${updateStoreManifest.version}`, store });
+            message = getTranslation('updatesnackbar.update.updateavailableinstore', {
+                version: `v${updateStoreManifest.version}`,
+                store,
+            });
             actions = [
-                {
-                    label: getTranslation('updatesnackbar.action.open'),
-                    onPress: openStore,
-                },
+                ...(
+                    Platform.OS === 'android' ?
+                        [
+                            {
+                                label: 'Load',
+                                onPress: doStoreUpdate,
+                            },
+                        ] : [
+                            {
+                                label: 'Open',
+                                onPress: openAppInStore,
+                            },
+                        ]
+                ),
                 {
                     label: 'X',
                     onPress: close,
@@ -125,6 +141,4 @@ export default function UpdateSnackbar() {
     );
 }
 
-const styles = StyleSheet.create({
-
-});
+const styles = StyleSheet.create({});
diff --git a/app2.config.ts b/app2.config.ts
@@ -19,7 +19,7 @@ const sentryConfigPlugin = [
     }
 ];
 
-const version = '115.0.0';
+const version = '116.0.0';
 const versionParts = version.split('.');
 
 const runtimeVersion = versionParts[0] + '.' + versionParts[1] + '.0';

diff --git a/notes.txt b/notes.txt
@@ -1,4 +1,34 @@
 
+
+expo-app-update
+
+npm pack
+yarn add ../expo-app-update/expo-app-update-51.0.1.tgz
+
+run example:
+
+npm run build
+cd example
+npx expo run:android --device SM_G935F
+npx expo run:ios --device 00008130-001839181061401C
+
+open in native editor:
+
+cd example
+xed ios
+
+cd example/android
+studio
+
+
+
+
+
+
+
+
+
+
 Todo:
 - animated unit images
 

diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "date-fns": "^2.14.0",
     "dotenv": "10.0.0",
     "expo": "~51.0.38",
+    "expo-app-update": "^51.0.6",
     "expo-application": "~5.9.1",
     "expo-av": "~14.0.7",
     "expo-build-properties": "~0.12.5",

diff --git a/yarn.lock b/yarn.lock
@@ -6615,6 +6615,7 @@ __metadata:
     eslint-config-universe: ^12.0.0
     eslint-plugin-react-native: ^4.1.0
     expo: ~51.0.38
+    expo-app-update: ^51.0.6
     expo-application: ~5.9.1
     expo-av: ~14.0.7
     expo-build-properties: ~0.12.5
@@ -10320,6 +10321,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-app-update@npm:^51.0.6":
+  version: 51.0.6
+  resolution: "expo-app-update@npm:51.0.6"
+  peerDependencies:
+    expo: "*"
+    react: "*"
+    react-native: "*"
+  checksum: 254e181a9fbccfa50fb57a09d5e98b0c4a06548793a3ec98ff39d8399766ae6d53f6e380784efd6fd09873bfc2fce7f219d458b7ebd090ecb2a5c4d8b3508288
+  languageName: node
+  linkType: hard
+
 "expo-application@npm:~5.9.0, expo-application@npm:~5.9.1":
   version: 5.9.1
   resolution: "expo-application@npm:5.9.1"