From 9d2ea5d45750eef3ffe198867502a11a5736fc54 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Sat, 30 Nov 2024 16:45:31 +0530 Subject: [PATCH] [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` --- stickersmash/app.json | 16 ++++--- stickersmash/app/(tabs)/index.tsx | 4 +- stickersmash/app/_layout.tsx | 19 ++++---- stickersmash/babel.config.js | 6 --- stickersmash/components/EmojiPicker.tsx | 2 +- stickersmash/package.json | 61 +++++++++++++------------ 6 files changed, 54 insertions(+), 54 deletions(-) delete mode 100644 stickersmash/babel.config.js diff --git a/stickersmash/app.json b/stickersmash/app.json index c0a82260..91b63cd4 100644 --- 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 index 58a17df6..7e98b510 100644 --- 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 index aecd665c..03dc7304 100644 --- 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 ( - - - + <> + + + + + + ); } diff --git a/stickersmash/babel.config.js b/stickersmash/babel.config.js deleted file mode 100644 index 9d89e131..00000000 --- a/stickersmash/babel.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = function (api) { - api.cache(true); - return { - presets: ['babel-preset-expo'], - }; -}; diff --git a/stickersmash/components/EmojiPicker.tsx b/stickersmash/components/EmojiPicker.tsx index 8a091e57..575b8e69 100644 --- 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 index 570107e5..58d8163a 100644 --- 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 }