expo upgrade to SDK 51

package.json

@@ -10,42 +10,43 @@
     "lint": "eslint . --ext .ts,.tsx --quiet"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "1.17.11",
-    "@react-native-masked-view/masked-view": "0.2.8",
-    "@react-navigation/drawer": "5.12.5",
-    "@react-navigation/native": "5.9.4",
-    "@react-navigation/stack": "5.14.5",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-masked-view/masked-view": "0.3.1",
+    "@react-navigation/drawer": "6.7.2",
+    "@react-navigation/elements": "^1.3.31",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/stack": "6.4.1",
     "dayjs": "1.10.5",
-    "expo": "^48.0.16",
-    "expo-blur": "~12.2.2",
-    "expo-constants": "~14.2.1",
-    "expo-haptics": "~12.2.1",
-    "expo-linear-gradient": "~12.1.2",
-    "expo-localization": "~14.1.1",
-    "expo-modules-core": "~1.2.7",
-    "expo-splash-screen": "^0.18.2",
-    "expo-status-bar": "~1.4.4",
+    "expo": "^51.0.0",
+    "expo-blur": "~13.0.2",
+    "expo-constants": "~16.0.2",
+    "expo-haptics": "~13.0.1",
+    "expo-linear-gradient": "~13.0.2",
+    "expo-localization": "~15.0.3",
+    "expo-modules-core": "~1.12.26",
+    "expo-splash-screen": "~0.27.6",
+    "expo-status-bar": "~1.12.1",
     "i18n-js": "3.8.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.8",
-     "react-native-gesture-handler": "~2.9.0",
+    "react-native": "0.74.5",
+    "react-native-gesture-handler": "~2.16.1",
     "react-native-keyboard-aware-scroll-view": "0.9.4",
-    "react-native-pager-view": "6.1.2",
-    "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
-    "react-native-web": "~0.18.10"
+    "react-native-pager-view": "6.3.0",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.0",
     "@react-native-community/eslint-config": "2.0.0",
     "@types/i18n-js": "3.8.1",
-    "@types/react": "~18.0.27",
+    "@types/react": "~18.2.79",
     "@types/react-native": "0.67.6",
     "eslint": "7.28.0",
-    "jest-expo": "45.0.0",
-    "typescript": "^4.9.4"
+    "jest-expo": "^51.0.0",
+    "typescript": "~5.3.3"
   },
   "private": true,
   "jest": {

src/hooks/useScreenOptions.tsx

@@ -35,7 +35,7 @@ export default () => {
     ),
     headerLeft: () => (
       <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
-        <Image source={icons.menu} radius={0} color={colors.icon} />
+        <Image source={icons.menu} radius={0} color={colors.icon} marginRight={20} marginLeft={10} />
       </Button>
     ),
     headerRight: () => (
@@ -98,7 +98,7 @@ export default () => {
       headerLeft: () => (
         <Button
           onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
-          <Image source={icons.menu} radius={0} color={colors.white} />
+          <Image source={icons.menu} radius={0} color={colors.white} marginRight={20} marginLeft={10} />
         </Button>
       ),
     },
@@ -114,7 +114,7 @@ export default () => {
       headerLeft: () => (
         <Button
           onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
-          <Image source={icons.menu} radius={0} color={colors.white} />
+          <Image source={icons.menu} radius={0} color={colors.white} marginRight={20} marginLeft={10} />
         </Button>
       ),
     },

src/navigation/Menu.tsx

@@ -1,11 +1,10 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Alert, Animated, Linking, StyleSheet} from 'react-native';
+import {Alert, Animated, Linking, StyleSheet, Dimensions} from 'react-native';
 
 import {
-  useIsDrawerOpen,
+  useDrawerStatus,
   createDrawerNavigator,
   DrawerContentComponentProps,
-  DrawerContentOptions,
   DrawerContentScrollView,
 } from '@react-navigation/drawer';
 
@@ -18,7 +17,7 @@ const Drawer = createDrawerNavigator();
 /* drawer menu screens navigation */
 const ScreensStack = () => {
   const {colors} = useTheme();
-  const isDrawerOpen = useIsDrawerOpen();
+  const isDrawerOpen = useDrawerStatus();
   const animation = useRef(new Animated.Value(0)).current;
 
   const scale = animation.interpolate({
@@ -31,16 +30,27 @@ const ScreensStack = () => {
     outputRange: [0, 16],
   });
 
+  // Get the screen width
+  const { width: screenWidth } = Dimensions.get('window');
+
+  const translateX = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, (screenWidth * 0.6)],
+  });
+
   const animatedStyle = {
     borderRadius: borderRadius,
-    transform: [{scale: scale}],
+    transform: [
+      {scale: scale},
+      { translateX: translateX }, // Sliding effect
+    ],
   };
 
   useEffect(() => {
     Animated.timing(animation, {
       duration: 200,
       useNativeDriver: true,
-      toValue: isDrawerOpen ? 1 : 0,
+      toValue: isDrawerOpen === 'open' ? 1 : 0,
     }).start();
   }, [isDrawerOpen, animation]);
 
@@ -52,7 +62,7 @@ const ScreensStack = () => {
           flex: 1,
           overflow: 'hidden',
           borderColor: colors.card,
-          borderWidth: isDrawerOpen ? 1 : 0,
+          borderWidth: isDrawerOpen === 'open' ? 1 : 0,
         },
       ])}>
       {/*  */}
@@ -63,7 +73,7 @@ const ScreensStack = () => {
 
 /* custom drawer menu */
 const DrawerContent = (
-  props: DrawerContentComponentProps<DrawerContentOptions>,
+  props: DrawerContentComponentProps,
 ) => {
   const {navigation} = props;
   const {t} = useTranslation();
@@ -219,16 +229,25 @@ export default () => {
     <Block gradient={gradients.light}>
       <Drawer.Navigator
         drawerType="slide"
-        overlayColor="transparent"
-        sceneContainerStyle={{backgroundColor: 'transparent'}}
         drawerContent={(props) => <DrawerContent {...props} />}
-        drawerStyle={{
-          flex: 1,
-          width: '60%',
-          borderRightWidth: 0,
-          backgroundColor: 'transparent',
+        screenOptions={{
+          overlayColor: 'transparent',
+          swipeEnabled: false,
+          drawerStyle: {
+            flex: 1,
+            width: '60%',
+            borderRightWidth: 0,
+            backgroundColor: 'transparent',
+          },
+          sceneContainerStyle: {
+            backgroundColor: 'transparent',
+          },
         }}>
-        <Drawer.Screen name="Screens" component={ScreensStack} />
+        <Drawer.Screen
+          name="Screens"
+          component={ScreensStack}
+          options={{ headerShown: false }}
+        />
       </Drawer.Navigator>
     </Block>
   );

src/screens/Components.tsx

@@ -2,7 +2,7 @@ import React, {useLayoutEffect, useState} from 'react';
 import {FlatList, TouchableOpacity} from 'react-native';
 
 import {useNavigation} from '@react-navigation/core';
-import {useHeaderHeight} from '@react-navigation/stack';
+import {useHeaderHeight} from '@react-navigation/elements';
 
 import {useTheme} from '../hooks/';
 import {Block, Button, Input, Image, Switch, Modal, Text} from '../components/';