chore(moblie): bump to expo@52 (#40)

* chore(moblie): bump to expo@52 * fix(mobile): default export warning
dribble-njr · Dec 8, 2024 · e0bd4ce · e0bd4ce
1 parent 0f880d2
commit e0bd4ce
Show file tree

Hide file tree

Showing 16 changed files with 1,532 additions and 1,679 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Imperial Kitchen
 
+[![runs with Expo Go](https://img.shields.io/badge/Runs%20with%20Expo%20Go-000.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.dev/client)
+
 [中文版](README_ZH.md)
 
 A food ordering app for family kitchen.

diff --git a/README_ZH.md b/README_ZH.md
@@ -1,5 +1,7 @@
 # 御膳房
 
+[![runs with Expo Go](https://img.shields.io/badge/Runs%20with%20Expo%20Go-000.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.dev/client)
+
 [English Version](README.md)
 
 一个家庭厨房的点餐应用。

diff --git a/apps/mobile/.env b/apps/mobile/.env
@@ -1,3 +1,4 @@
 # https://docs.expo.dev/guides/environment-variables/#how-variables-are-loaded
 # Expo variables need to add EXPO_PUBLIC prefix
-EXPO_USE_METRO_WORKSPACE_ROOT=1
+# Enable by default
+# EXPO_USE_METRO_WORKSPACE_ROOT=1
diff --git a/apps/mobile/app/(guide)/_layout.tsx b/apps/mobile/app/(guide)/_layout.tsx
@@ -4,7 +4,7 @@ import { Stack } from 'expo-router';
 export default function GuideLayout() {
   return (
     <Stack
-      initialRouteName="Guide"
+      initialRouteName="guide"
       screenOptions={{
         animation: 'slide_from_right',
         header: (props) => <StackHeader navProps={props} children={undefined} />

diff --git a/apps/mobile/app/modules/dishes/components/CreateRecipeGuide.tsx b/apps/mobile/app/modules/dishes/components/CreateRecipeGuide.tsx
@@ -1,7 +1,7 @@
 import { router } from 'expo-router';
 import { StyleSheet, Text, View } from 'react-native';
 
-export const CreateRecipeGuide = () => {
+export default function CreateRecipeGuide() {
   return (
     <View style={styles.container}>
       <View style={styles.header}>
@@ -27,7 +27,7 @@ export const CreateRecipeGuide = () => {
       </View>
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {

diff --git a/apps/mobile/app/modules/dishes/components/FoodListLayout.tsx b/apps/mobile/app/modules/dishes/components/FoodListLayout.tsx
@@ -10,13 +10,13 @@ const Header = ({ title }: { title: string }) => {
   );
 };
 
-export const FoodListLayout = ({ type }: { type: FoodType }) => {
+export default function FoodListLayout({ type }: { type: FoodType }) {
   return (
     <View className="flex-1 bg-[#f9f9f9]">
       <Header title={FoodType2Slogan[type]} />
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   header: {

diff --git a/apps/mobile/app/modules/dishes/components/RecipeDifficultyRadioSelector.tsx b/apps/mobile/app/modules/dishes/components/RecipeDifficultyRadioSelector.tsx
@@ -68,13 +68,13 @@ const DifficultyItem = ({
   );
 };
 
-export const RecipeDifficultyRadioSelector = ({
+export default function RecipeDifficultyRadioSelector({
   form,
   setForm
 }: {
   form: CreateRecipeDTO;
   setForm: Dispatch<SetStateAction<CreateRecipeDTO>>;
-}) => {
+}) {
   const { difficulty } = form;
 
   const handleSelect = useCallback((selectedDifficulty: typeof difficulty) => {
@@ -93,7 +93,7 @@ export const RecipeDifficultyRadioSelector = ({
       ))}
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {

diff --git a/apps/mobile/app/modules/dishes/components/RecipeNameInputBox.tsx b/apps/mobile/app/modules/dishes/components/RecipeNameInputBox.tsx
@@ -12,13 +12,13 @@ const SPRING_CONFIG = {
   mass: 0.5
 } as const;
 
-export const RecipeNameInputBox = ({
+export default function RecipeNameInputBox({
   form,
   setForm
 }: {
   form: CreateRecipeDTO;
   setForm: Dispatch<SetStateAction<CreateRecipeDTO>>;
-}) => {
+}) {
   const inputRef = useRef(null);
   const [isFocused, setIsFocused] = useState(false);
   const spinValue = useSharedValue(0);
@@ -65,4 +65,4 @@ export const RecipeNameInputBox = ({
       </Animated.View>
     </View>
   );
-};
+}
diff --git a/apps/mobile/app/modules/dishes/components/RecipeTagsBox.tsx b/apps/mobile/app/modules/dishes/components/RecipeTagsBox.tsx
@@ -1,8 +1,8 @@
 import { CreateRecipeDTO, TagVO } from '@imperial-kitchen/types';
 import { Dispatch, SetStateAction } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { TagItem } from './TagItem';
-import { TagSelectModal } from './TagSelectModal';
+import TagItem from './TagItem';
+import TagSelectModal from './TagSelectModal';
 
 const AddTagButton = ({ onPress }: { onPress: () => void }) => {
   return (
@@ -12,13 +12,13 @@ const AddTagButton = ({ onPress }: { onPress: () => void }) => {
   );
 };
 
-export const RecipeTagsBox = ({
+export default function RecipeTagsBox({
   form,
   setForm
 }: {
   form: CreateRecipeDTO;
   setForm: Dispatch<SetStateAction<CreateRecipeDTO>>;
-}) => {
+}) {
   const { tags } = form;
   const onItemDelete = (tag: TagVO) => {
     setForm({ ...form, tags: tags.filter((t) => t.id !== tag.id) });
@@ -38,7 +38,7 @@ export const RecipeTagsBox = ({
       />
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   addTagButton: {

diff --git a/apps/mobile/app/modules/dishes/components/SideBar.tsx b/apps/mobile/app/modules/dishes/components/SideBar.tsx
@@ -85,15 +85,15 @@ const ToggleMenuButton = ({ showMenu, setShowMenu }: { showMenu: boolean; setSho
   );
 };
 
-export const SideBar = ({
+export default function SideBar({
   configs,
   selectedKey,
   onSelect
 }: {
   configs: SidebarConfig[];
   selectedKey: string;
   onSelect: (key: SidebarItemType) => void;
-}) => {
+}) {
   const [showMenu, setShowMenu] = useState(true);
   const opacity = useSharedValue(1);
 
@@ -144,7 +144,7 @@ export const SideBar = ({
       </View>
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {

diff --git a/apps/mobile/app/modules/dishes/components/TagItem.tsx b/apps/mobile/app/modules/dishes/components/TagItem.tsx
@@ -2,7 +2,7 @@ import CloseIcon from '@/assets/icons/close-icon.svg';
 import { TagVO } from '@imperial-kitchen/types';
 import { Chip } from 'react-native-paper';
 
-export const TagItem = ({
+export default function TagItem({
   tag,
   onClose,
   onPress,
@@ -12,7 +12,7 @@ export const TagItem = ({
   onClose?: () => void;
   onPress?: () => void;
   active?: boolean;
-}) => {
+}) {
   const _onClose = active ? onClose : undefined;
   return (
     <Chip
@@ -29,4 +29,4 @@ export const TagItem = ({
       {tag.name}
     </Chip>
   );
-};
+}
diff --git a/apps/mobile/app/modules/dishes/components/TagSelectModal.tsx b/apps/mobile/app/modules/dishes/components/TagSelectModal.tsx
@@ -4,9 +4,9 @@ import { TagVO } from '@imperial-kitchen/types';
 import { ReactNode, useCallback, useState } from 'react';
 import { View } from 'react-native';
 import { Modal, Portal } from 'react-native-paper';
-import { TagItem } from './TagItem';
+import TagItem from './TagItem';
 
-export const TagSelectModal = ({
+export default function TagSelectModal({
   trigger,
   activeTags,
   onSelect,
@@ -16,7 +16,7 @@ export const TagSelectModal = ({
   activeTags: TagVO[];
   onSelect: (tag: TagVO) => void;
   onItemDelete: (tag: TagVO) => void;
-}) => {
+}) {
   const [visible, setVisible] = useState(false);
 
   const showModal = () => setVisible(true);
@@ -79,4 +79,4 @@ export const TagSelectModal = ({
       {trigger(showModal)}
     </>
   );
-};
+}
diff --git a/apps/mobile/app/modules/dishes/index.tsx b/apps/mobile/app/modules/dishes/index.tsx
@@ -6,9 +6,9 @@ import { ThemedView } from '@/components/ThemedView';
 import { CreateRecipe, SidebarConfig, SidebarItemType } from '@/types';
 import { FoodType } from '@imperial-kitchen/types';
 import { useState } from 'react';
-import { CreateRecipeGuide } from './components/CreateRecipeGuide';
-import { FoodListLayout } from './components/FoodListLayout';
-import { SideBar } from './components/SideBar';
+import SideBar from './components/SideBar';
+import CreateRecipeGuide from './components/CreateRecipeGuide';
+import FoodListLayout from './components/FoodListLayout';
 
 const SidebarConfigs: SidebarConfig[] = [
   {

diff --git a/apps/mobile/app/modules/dishes/pages/recipe.tsx b/apps/mobile/app/modules/dishes/pages/recipe.tsx
@@ -1,9 +1,9 @@
 import { CreateRecipeDTO } from '@imperial-kitchen/types';
 import { Dispatch, ReactNode, SetStateAction, useState } from 'react';
 import { Button, StyleSheet, Text, View } from 'react-native';
-import { RecipeDifficultyRadioSelector } from '../components/RecipeDifficultyRadioSelector';
-import { RecipeNameInputBox } from '../components/RecipeNameInputBox';
-import { RecipeTagsBox } from '../components/RecipeTagsBox';
+import RecipeNameInputBox from '../components/RecipeNameInputBox';
+import RecipeDifficultyRadioSelector from '../components/RecipeDifficultyRadioSelector';
+import RecipeTagsBox from '../components/RecipeTagsBox';
 
 const CardItem = ({ title, children }: { title: string; children: ReactNode }) => {
   return (

diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -16,45 +16,45 @@
     "preset": "jest-expo"
   },
   "dependencies": {
-    "@expo/vector-icons": "^14.0.0",
+    "@expo/vector-icons": "^14.0.2",
     "@imperial-kitchen/types": "1.0.0",
     "@react-navigation/native": "^6.0.2",
     "axios": "^1.7.2",
-    "expo": "~51.0.0",
-    "expo-constants": "~16.0.1",
-    "expo-font": "~12.0.4",
-    "expo-linking": "~6.3.1",
-    "expo-localization": "^15.0.3",
-    "expo-router": "~3.5.10",
-    "expo-secure-store": "^13.0.1",
-    "expo-splash-screen": "~0.27.4",
-    "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.4",
-    "expo-web-browser": "~13.0.3",
+    "expo": "52.0.17",
+    "expo-constants": "~17.0.3",
+    "expo-font": "~13.0.1",
+    "expo-linking": "~7.0.3",
+    "expo-localization": "^16.0.0",
+    "expo-router": "~4.0.11",
+    "expo-secure-store": "^14.0.0",
+    "expo-splash-screen": "~0.29.16",
+    "expo-status-bar": "~2.0.0",
+    "expo-system-ui": "~4.0.5",
+    "expo-web-browser": "~14.0.1",
     "formik": "^2.4.6",
     "i18next": "^23.15.1",
     "nativewind": "^4.1.21",
     "react-i18next": "^15.0.2",
-    "react-native": "0.74.1",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native": "0.76.3",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-paper": "^5.12.5",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "^4.14.0",
-    "react-native-screens": "3.31.1",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
     "react-native-sse": "^1.2.1",
-    "react-native-svg": "15.2.0",
+    "react-native-svg": "15.8.0",
     "react-native-vector-icons": "^10.2.0",
-    "react-native-web": "~0.19.10",
+    "react-native-web": "~0.19.13",
     "tailwindcss": "^3.4.14",
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.25.2",
     "@types/jest": "^29.5.12",
-    "@types/react": "~18.2.45",
+    "@types/react": "~18.3.12",
     "@types/react-test-renderer": "^18.0.7",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.1",
+    "jest-expo": "~52.0.2",
     "react-native-svg-transformer": "^1.5.0",
     "react-test-renderer": "18.2.0",
     "typescript": "~5.3.3"