"Make it work with modern expo go"

.vscode/settings.json

@@ -7,7 +7,7 @@
     "typescriptreact"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

app/index.tsx

@@ -37,33 +37,33 @@ function Intro(): React.ReactElement {
       <ButtonWrapper>
         <View style={{marginTop: 8}} />
         <Button
-          testID="authStack"
+          onPress={() => router.push('/sign-in')}
           style={{
             marginBottom: 8,
           }}
-          onPress={() => router.push('/sign-in')}
+          testID="authStack"
           text="Switch Navigator"
         />
         <Button
-          testID="btnStack"
+          onPress={() => router.push('/stack')}
           style={{
             marginBottom: 8,
           }}
-          onPress={() => router.push('/stack')}
+          testID="btnStack"
           text="Stack Navigator"
         />
         <Button
-          testID="btnDrawer"
-          style={{marginBottom: 8}}
           onPress={() => router.push('/drawer')}
+          style={{marginBottom: 8}}
+          testID="btnDrawer"
           text="Drawer Navigator"
         />
         <Button
-          testID="btnTabs"
+          onPress={(): void => router.push('/tabs')}
           style={{
             marginBottom: 8,
           }}
-          onPress={(): void => router.push('/tabs')}
+          testID="btnTabs"
           text="BottomTab Navigator"
         />
       </ButtonWrapper>

app/tabs/_layout.tsx

@@ -19,17 +19,17 @@ export type BottomTabNavigationProps<
   T extends keyof BottomTabParamList = 'default',
 > = BottomTabNavigationProp<BottomTabParamList, T>;
 
-const TabBarIcon = (focused: boolean): React.ReactElement => {
+function TabBarIcon(focused: boolean): React.ReactElement {
   return (
     <Image
+      source={IC_MASK}
       style={{
         width: focused ? 24 : 18,
         height: focused ? 24 : 18,
       }}
-      source={IC_MASK}
     />
   );
-};
+}
 
 function MaterialBottomTabNavigator(): ReactElement {
   return (

babel.config.js

@@ -3,7 +3,6 @@ module.exports = function (api) {
   return {
     presets: ["babel-preset-expo"],
     plugins: [
-      require.resolve("expo-router/babel"),
       "@babel/plugin-proposal-export-namespace-from",
       "react-native-reanimated/plugin",
     ],

package.json

@@ -11,37 +11,37 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@dooboo-ui/theme": "^0.12.7",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.11.0",
-    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-async-storage/async-storage": "1.23.1",
     "@react-navigation/drawer": "^6.6.2",
     "dooboo-ui": "^0.2.7",
-    "@dooboo-ui/theme": "^0.12.7",
-    "expo": "^48.0.17",
-    "expo-constants": "~14.2.1",
-    "expo-linking": "~4.0.1",
-    "expo-localization": "~14.1.1",
-    "expo-router": "^1.5.3",
-    "expo-screen-orientation": "~5.1.1",
-    "expo-splash-screen": "~0.18.2",
-    "expo-status-bar": "~1.4.4",
+    "expo": "^51.0.18",
+    "expo-constants": "~16.0.2",
+    "expo-linking": "~6.3.1",
+    "expo-localization": "~15.0.3",
+    "expo-router": "~3.5.17",
+    "expo-screen-orientation": "~7.0.5",
+    "expo-splash-screen": "~0.27.5",
+    "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.8",
-    "react-native-gesture-handler": "~2.9.0",
-    "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
-    "react-native-svg": "13.4.0",
+    "react-native": "0.74.3",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "3.31.1",
+    "react-native-svg": "15.2.0",
     "react-native-vector-icons": "^9.2.0",
-    "react-native-web": "~0.18.10",
-    "sentry-expo": "~6.1.1",
-    "typescript": "^4.9.4"
+    "react-native-web": "~0.19.10",
+    "sentry-expo": "~7.0.0",
+    "typescript": "~5.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
+    "@babel/core": "^7.24.0",
     "@dooboo/eslint-config-react-native": "^1.2.0",
-    "@types/react": "~18.0.27",
+    "@types/react": "~18.2.79",
     "@types/react-native": "~0.72.2",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "babel-plugin-transform-imports": "^2.0.0",

src/screens/DrawerScreen1.tsx

@@ -1,6 +1,5 @@
 import type {ReactElement} from 'react';
 import React from 'react';
-
 import styled from '@emotion/native';
 import {Button} from 'dooboo-ui';
 import {useNavigation} from 'expo-router';

src/screens/DrawerScreen2.tsx

@@ -1,8 +1,8 @@
+import type {ReactElement} from 'react';
+import React from 'react';
 import styled from '@emotion/native';
 import {Button} from 'dooboo-ui';
 import {useNavigation} from 'expo-router';
-import type {ReactElement} from 'react';
-import React from 'react';
 
 const Container = styled.View`
   flex: 1;

src/screens/Screen1.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import type {ReactElement} from 'react';
+import React from 'react';
 import styled from '@emotion/native';
 import {Button} from 'dooboo-ui';
 
@@ -22,7 +22,7 @@ function Page({onPress}: {onPress: () => void}): ReactElement {
   return (
     <Container>
       <StyledText testID="myText">Screen 1</StyledText>
-      <Button type="text" text="Screen 2" onPress={onPress} />
+      <Button onPress={onPress} text="Screen 2" type="text" />
     </Container>
   );
 }

src/screens/Screen2.tsx

@@ -1,7 +1,7 @@
-import styled from '@emotion/native';
-import {Button} from 'dooboo-ui';
 import type {ReactElement} from 'react';
 import React from 'react';
+import styled from '@emotion/native';
+import {Button} from 'dooboo-ui';
 
 const Container = styled.View`
   flex: 1;
@@ -21,7 +21,7 @@ function Page({onPress}: {onPress: () => void}): ReactElement {
   return (
     <Container>
       <StyledText testID="myText">Screen 2</StyledText>
-      <Button type="text" text="Screen 3" onPress={onPress} />
+      <Button onPress={onPress} text="Screen 3" type="text" />
     </Container>
   );
 }

src/screens/Screen3.tsx

@@ -1,7 +1,7 @@
-import styled from '@emotion/native';
-import {Button} from 'dooboo-ui';
 import type {ReactElement} from 'react';
 import React from 'react';
+import styled from '@emotion/native';
+import {Button} from 'dooboo-ui';
 
 const Container = styled.View`
   flex: 1;
@@ -21,7 +21,7 @@ function Page({onPress}: {onPress: () => void}): ReactElement {
   return (
     <Container>
       <StyledText testID="myText">Screen 3</StyledText>
-      <Button type="text" text="Screen 4" onPress={onPress} />
+      <Button onPress={onPress} text="Screen 4" type="text" />
     </Container>
   );
 }

src/screens/Screen4.tsx

@@ -1,7 +1,7 @@
-import styled from '@emotion/native';
-import {Button} from 'dooboo-ui';
 import type {ReactElement} from 'react';
 import React from 'react';
+import styled from '@emotion/native';
+import {Button} from 'dooboo-ui';
 
 const Container = styled.View`
   flex: 1;
@@ -21,7 +21,7 @@ function Page({onPress}: {onPress: () => void}): ReactElement {
   return (
     <Container>
       <StyledText testID="myText">Screen 4</StyledText>
-      <Button type="text" text="Screen 1" onPress={onPress} />
+      <Button onPress={onPress} text="Screen 1" type="text" />
     </Container>
   );
 }

src/uis/Drawer.tsx

@@ -6,7 +6,6 @@ import {
   // Import the creation function
   createDrawerNavigator,
 } from '@react-navigation/drawer';
-
 import {withLayoutContext} from 'expo-router';
 
 const {Navigator} = createDrawerNavigator();