feat: add new version available dialog

apps/mobile/src/components/AppLoader/index.js

@@ -1,5 +1,5 @@
 import React, {useEffect, useRef, useState} from 'react';
-import {Appearance, Platform, SafeAreaView, View} from 'react-native';
+import {Appearance, Linking, Platform, SafeAreaView, View} from 'react-native';
 import Animated, {Easing} from 'react-native-reanimated';
 import AnimatedProgress from 'react-native-reanimated-progress-bar';
 import {useTracked} from '../../provider';
@@ -21,7 +21,7 @@ import {
   ToastEvent
 } from '../../services/EventManager';
 import PremiumService from '../../services/PremiumService';
-import {editing} from '../../utils';
+import {editing, STORE_LINK} from '../../utils';
 import {COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT} from '../../utils/Colors';
 import {db} from '../../utils/database';
 import {
@@ -40,6 +40,9 @@ import Seperator from '../Seperator';
 import SplashScreen from '../SplashScreen';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
+import {checkVersion} from 'react-native-check-version';
+import {Placeholder, SvgToPngView} from '../ListPlaceholders';
+import {Update} from '../Update';
 
 let passwordValue = null;
 let didVerifyUser = false;
@@ -93,6 +96,8 @@ const AppLoader = ({onLoad}) => {
           return;
         }
 
+        if (await checkAppUpdateAvailable()) return;
+
         let settingsStore = useSettingStore.getState();
         if (await Backup.checkBackupRequired(settingsStore.settings.reminder)) {
           await Backup.checkAndRun();
@@ -113,6 +118,23 @@ const AppLoader = ({onLoad}) => {
     }
   }, [_loading]);
 
+  const checkAppUpdateAvailable = async () => {
+    try {
+      const version = await checkVersion();
+      if (!version.needsUpdate) return false;
+
+      presentSheet({
+        noIcon: true,
+        noProgess: true,
+        component:(ref) => <Update version={version} fwdRef={ref} />
+      });
+
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+
   const restoreEditorState = async () => {
     let appState = await MMKV.getItem('appState');
     if (appState) {
@@ -321,9 +343,17 @@ const AppLoader = ({onLoad}) => {
               flexDirection: 'row',
               width: 100
             }}>
-            <AnimatedProgress style={{
-              backgroundColor:Appearance.getColorScheme() === 'dark' ? COLOR_SCHEME_DARK.nav : COLOR_SCHEME_LIGHT.nav
-            }} fill={colors.accent} current={4} total={4} />
+            <AnimatedProgress
+              style={{
+                backgroundColor:
+                  Appearance.getColorScheme() === 'dark'
+                    ? COLOR_SCHEME_DARK.nav
+                    : COLOR_SCHEME_LIGHT.nav
+              }}
+              fill={colors.accent}
+              current={4}
+              total={4}
+            />
           </View>
         )}
       </Animated.View>

apps/mobile/src/views/Settings/index.js

@@ -13,7 +13,7 @@ import {
   ToastEvent
 } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import {InteractionManager} from '../../utils';
+import {InteractionManager, STORE_LINK} from '../../utils';
 import { APP_VERSION } from "../../../version";
 import {db} from '../../utils/database';
 import {eScrollEvent, eUpdateSearchState} from '../../utils/Events';
@@ -278,11 +278,7 @@ export const Settings = ({navigation}) => {
                   }`}
                   onPress={async () => {
                     try {
-                      await Linking.openURL(
-                        Platform.OS === 'ios'
-                          ? 'https://bit.ly/notesnook-ios'
-                          : 'https://bit.ly/notesnook-and'
-                      );
+                      await Linking.openURL(STORE_LINK);
                     } catch (e) {}
                   }}
                 />