[stickersmash] Upgrade to SDK 52 with changes required for app's code (…

…#529) - Upgrade the project's dependencies to use Exop SDk 52 which includes fix for `react-native-view-shot` for the SDK - Update app's layout code to use `StatusBar` component - Add `expo-splash-screen` config plugin and remove manually set `splash` object in app.json - Apply `expo-media-library` changes to use `mediaTypes: ["images"],` instead of `mediaTypes: ImagePicker.MediaTypeOptions.Images,` - Remove `babel.config.js`
expo · Nov 30, 2024 · 9d2ea5d · 9d2ea5d
1 parent edb3d9f
commit 9d2ea5d
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 54 deletions.
diff --git a/stickersmash/app.json b/stickersmash/app.json
@@ -7,11 +7,6 @@
     "icon": "./assets/images/icon.png",
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
-    "splash": {
-      "image": "./assets/images/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#25292e"
-    },
     "ios": {
       "supportsTablet": true
     },
@@ -27,7 +22,16 @@
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#25292e"
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true

diff --git a/stickersmash/app/(tabs)/index.tsx b/stickersmash/app/(tabs)/index.tsx
@@ -3,9 +3,9 @@ import * as ImagePicker from "expo-image-picker";
 import { useState, useRef } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import * as MediaLibrary from "expo-media-library";
+import { type ImageSource } from "expo-image";
 import { captureRef } from "react-native-view-shot";
 import domtoimage from "dom-to-image";
-import { type ImageSource } from "expo-image";
 
 import Button from "@/components/Button";
 import ImageViewer from "@/components/ImageViewer";
@@ -35,7 +35,7 @@ export default function Index() {
 
   const pickImageAsync = async () => {
     let result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      mediaTypes: ["images"],
       allowsEditing: true,
       quality: 1,
     });

diff --git a/stickersmash/app/_layout.tsx b/stickersmash/app/_layout.tsx
@@ -1,17 +1,14 @@
 import { Stack } from "expo-router";
-import { setStatusBarStyle } from "expo-status-bar";
-import { useEffect } from "react";
+import { StatusBar } from "expo-status-bar";
 
 export default function RootLayout() {
-  useEffect(() => {
-    setTimeout(() => {
-      setStatusBarStyle("light");
-    }, 0);
-  }, []);
-
   return (
-    <Stack>
-      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-    </Stack>
+    <>
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+      <StatusBar style="light" />
+    </>
   );
 }
diff --git a/stickersmash/babel.config.js b/stickersmash/babel.config.js
diff --git a/stickersmash/components/EmojiPicker.tsx b/stickersmash/components/EmojiPicker.tsx
@@ -1,6 +1,6 @@
 import { Modal, View, Text, Pressable, StyleSheet } from "react-native";
-import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import { PropsWithChildren } from "react";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 
 type Props = PropsWithChildren<{
   isVisible: boolean;

diff --git a/stickersmash/package.json b/stickersmash/package.json
@@ -16,39 +16,44 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/bottom-tabs": "^7.0.0",
+    "@react-navigation/native": "^7.0.0",
     "dom-to-image": "^2.6.0",
-    "expo": "~51.0.37",
-    "expo-constants": "~16.0.2",
-    "expo-font": "~12.0.9",
-    "expo-image": "~1.13.0",
-    "expo-image-picker": "~15.0.7",
-    "expo-linking": "~6.3.1",
-    "expo-media-library": "~16.0.4",
-    "expo-router": "~3.5.23",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.7",
-    "expo-web-browser": "~13.0.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
-    "react-native-view-shot": "3.8.0",
-    "react-native-web": "~0.19.10"
+    "expo": "~52.0.11",
+    "expo-blur": "~14.0.1",
+    "expo-constants": "~17.0.3",
+    "expo-font": "~13.0.1",
+    "expo-haptics": "~14.0.0",
+    "expo-image": "~2.0.2",
+    "expo-image-picker": "~16.0.3",
+    "expo-linking": "~7.0.3",
+    "expo-media-library": "~17.0.3",
+    "expo-router": "~4.0.9",
+    "expo-splash-screen": "~0.29.13",
+    "expo-status-bar": "~2.0.0",
+    "expo-symbols": "~0.2.0",
+    "expo-system-ui": "~4.0.4",
+    "expo-web-browser": "~14.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
+    "react-native-view-shot": "4.0.2",
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.25.2",
     "@types/jest": "^29.5.12",
-    "@types/react": "~18.2.45",
-    "@types/react-test-renderer": "^18.0.7",
+    "@types/react": "~18.3.12",
+    "@types/react-test-renderer": "^18.3.0",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.3",
-    "react-test-renderer": "18.2.0",
-    "typescript": "~5.3.3"
+    "jest-expo": "~52.0.2",
+    "react-test-renderer": "18.3.1",
+    "typescript": "^5.3.3"
   },
   "private": true
 }