upgraded to expo sdk 45

App.js

@@ -1,25 +1,46 @@
 import * as React from 'react';
 import { StatusBar } from 'react-native';
-import AppLoading from 'expo-app-loading';
+import * as SplashScreen from 'expo-splash-screen';
 import { func } from './src/constants';
 
-// root navigation stack
+// root stack navigation
 import RootStack from './src/navigation/RootStack';
 
 const App = () => {
   const [isLoading, setIsLoading] = React.useState(true);
 
-  // pre-loading assets/fonts?
+  React.useEffect(() => {
+    async function prepare() {
+      try {
+        // keeps the splash screen visible while assets are cached
+        await SplashScreen.preventAutoHideAsync();
+
+        // pre-load/cache assets: images, fonts, and videos
+        await func.loadAssetsAsync();
+      } catch (e) {
+        // console.warn(e);
+      } finally {
+        // loading is complete
+        setIsLoading(false);
+      }
+    }
+
+    prepare();
+  }, []);
+
+  React.useEffect(() => {
+    // when loading is complete
+    if (isLoading === false) {
+      // hide splash function
+      const hideSplash = async () => SplashScreen.hideAsync();
+
+      // hide splash screen to show app
+      hideSplash();
+    }
+  }, [isLoading]);
+
   if (isLoading) {
-    return (
-      <AppLoading
-        onError={() => {
-          // console.warn
-        }}
-        onFinish={() => setIsLoading(false)}
-        startAsync={func.loadAssetsAsync}
-      />
-    );
+    return null;
   }
 
   return (

README.md

@@ -4,7 +4,7 @@
 
 ## Features
 
-- Expo SDK 44
+- Expo SDK 45
 - iOS and Android
 - React Navigation v6
 - PropTypes
@@ -42,6 +42,7 @@ yarn add @babel/core eslint-config-airbnb eslint-config-prettier eslint-plugin-i
 
 ## Release Notes
 
+- upgraded to [Expo SDK 45](https://blog.expo.dev/expo-sdk-45-f4e332954a68)
 - upgraded to [Expo SDK 44](https://blog.expo.dev/expo-sdk-44-4c4b8306584a)
 - upgraded to [Expo SDK 43](https://blog.expo.dev/expo-sdk-43-aa9b3c7d5541)
 - upgraded to [React Navigation v6](https://reactnavigation.org/docs/getting-started)

package.json

@@ -23,28 +23,28 @@
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/drawer": "^6.4.1",
     "@react-navigation/native": "^6.0.10",
-    "@react-navigation/stack": "^6.2.1",
-    "expo": "^44.0.0",
-    "expo-app-loading": "~1.3.0",
-    "expo-asset": "~8.4.4",
-    "expo-barcode-scanner": "~11.2.0",
-    "expo-constants": "~13.0.0",
-    "expo-font": "~10.0.4",
-    "expo-location": "~14.0.1",
+    "@react-navigation/native-stack": "^6.6.2",
+    "expo": "^45.0.0",
+    "expo-asset": "~8.5.0",
+    "expo-barcode-scanner": "~11.3.0",
+    "expo-constants": "~13.1.1",
+    "expo-font": "~10.1.0",
+    "expo-location": "~14.2.2",
+    "expo-splash-screen": "~0.15.1",
     "prop-types": "^15.7.2",
-    "react": "17.0.1",
-    "react-native": "0.64.3",
-    "react-native-gesture-handler": "~2.1.0",
-    "react-native-maps": "0.29.4",
-    "react-native-reanimated": "~2.3.1",
-    "react-native-safe-area-context": "3.3.2",
-    "react-native-screens": "~3.10.1",
-    "react-native-svg": "12.1.1"
+    "react": "17.0.2",
+    "react-native": "0.68.1",
+    "react-native-gesture-handler": "~2.2.0",
+    "react-native-maps": "0.30.1",
+    "react-native-reanimated": "~2.8.0",
+    "react-native-safe-area-context": "4.2.4",
+    "react-native-screens": "~3.11.1",
+    "react-native-svg": "12.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "babel-eslint": "^10.1.0",
-    "babel-preset-expo": "9.0.1",
+    "babel-preset-expo": "~9.1.0",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",

src/navigation/RootStack.js

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import {
-  CardStyleInterpolators,
-  createStackNavigator
-} from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 // drawer stack
 import DrawerStack from './DrawerStack';
@@ -13,14 +10,13 @@ import ModalHelp from '../screens/ModalHelp';
 import ModalQRCode from '../screens/ModalQRCode';
 import ModalTutorialBike from '../screens/ModalTutorialBike';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export default () => (
   <NavigationContainer>
     <Stack.Navigator
       screenOptions={{
-        cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
-        presentation: 'modal'
+        presentation: 'fullScreenModal'
       }}
     >
       <Stack.Screen