Migrate expo to SDK 49 (#5)

https://blog.expo.dev/expo-sdk-49-c6d398cdf740

Having issue in web
- expo/expo#23412
- software-mansion/react-native-reanimated#4665

## Issue

Upgrading expo metro as suggested in
expo/router#864 (comment) causes
problem when running app in `iOS` (not yet tested in android). It
freezes in `SplashScreen`. So we need to becareful in merging this `PR`.
Currently, it is only working in `web` and freezes in `iOS`.

.github/workflows/ci.yml

@@ -16,22 +16,24 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18.x
-          cache: yarn
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
 
       - name: Install modules
-        run: YARN_CHECKSUM_BEHAVIOR=update yarn --immutable
+        run: bun install --immutable
 
       - name: Check linting
-        run: yarn lint:all
+        run: bun lint:all
 
       - name: Build typescript
-        run: yarn tsc
+        run: bun tsc
 
       - name: Remove dist
         run: rm -rf ./dist
 
       - name: Test
-        run: yarn test --coverage --silent
+        run: bun run test --coverage --silent
 
       # - name: Upload coverage to Codecov
       #   uses: codecov/codecov-action@v1

.github/workflows/deploy.yml

@@ -9,17 +9,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
       - uses: expo/expo-github-action@v8
         with:
           expo-version: latest
           eas-version: latest
           token: ${{ secrets.EXPO_TOKEN }}
 
       - name: Install modules
-        run: yarn install --immutable
+        run: bun install --immutable
 
       - name: Build web
-        run: yarn build:web
+        run: bun build:web
         env:
           ROOT_URL: ${{ secrets.ROOT_URL }}
           onesignalAppId: ${{ secrets.onesignalAppId}}

.husky/pre-commit

@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn lint:ci
-yarn lint:i18n
+bun lint:ci
+bun lint:i18n

.vscode/settings.json

@@ -37,6 +37,7 @@
     "**/.factorypath": true,
   },
   "cSpell.words": [
+    "onesignal",
     "Pressable",
     "Pretendard"
   ]

README.md

@@ -23,4 +23,5 @@ You can create app even more easily with the cli tool [dooboo-cli](https://githu
 
 ## Quick News
 
-- In default, [dooboo-ui](https://github.com/dooboolab/dooboo-ui) ui framework is preinstalled in the project. Hope you like it 🧡.
+- In default, [dooboo-ui](https://github.com/dooboolab/dooboo-ui), a ui framework for [Expo](https://expo.io) is preinstalled in the project. Hope you like it 🧡.
+- Default package manager is set to [bun](https://bun.sh) which is fastest in 2023.

app.config.ts

@@ -2,12 +2,28 @@ import 'dotenv/config';
 
 import type {ConfigContext, ExpoConfig} from '@expo/config';
 import withAndroidLocalizedName from '@mmomtchev/expo-android-localized-app-name';
+import dotenv from 'dotenv';
+import {expand} from 'dotenv-expand';
+import path from 'path';
 
 import {version} from './package.json';
 
+// https://github.com/expo/expo/issues/23727#issuecomment-1651609858
+if (process.env.STAGE) {
+  expand(
+    dotenv.config({
+      path: path.join(
+        __dirname,
+        ['./.env', process.env.STAGE].filter(Boolean).join('.'),
+      ),
+      override: true,
+    }),
+  );
+}
+
 const DEEP_LINK_URL = '[firebaseAppId].web.app';
 
-const buildNumber = 63;
+const buildNumber = 1;
 
 export default ({config}: ConfigContext): ExpoConfig => ({
   ...config,
@@ -22,6 +38,7 @@ export default ({config}: ConfigContext): ExpoConfig => ({
   plugins: [
     // @ts-ignore
     withAndroidLocalizedName,
+    'expo-router',
     'sentry-expo',
     'expo-tracking-transparency',
     '@react-native-firebase/app',

babel.config.js

@@ -3,9 +3,9 @@ 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",
+      '@emotion',
+      'expo-router/babel',
+      'react-native-reanimated/plugin',
     ],
   };
 };

metro.config.js

@@ -1,4 +1,7 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
 const {getDefaultConfig} = require('expo/metro-config');
 
-module.exports = getDefaultConfig(__dirname);
+const config = getDefaultConfig(__dirname);
+
+config.resolver.sourceExts.push('cjs', 'mjs');
+
+module.exports = config;

package.json

@@ -1,109 +1,121 @@
 {
   "name": "dooboo-starter",
   "version": "0.0.1",
-  "main": "index",
+  "main": "expo-router/entry",
   "scripts": {
     "start": "expo start",
-    "start:prod": "dotenv -e .env.prod -- expo start",
+    "start:prod": "STAGE=prod expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
     "lint": "eslint --ext .ts,.tsx,.js,.jsx src app test",
     "lint:i18n": "eslint --fix --ext .json --format node_modules/eslint-plugin-i18n-json/formatter.js assets/langs/",
-    "lint:all": "yarn lint && yarn lint:i18n",
+    "fix:deps": "expo install --fix",
+    "lint:all": "bun lint && bun lint:i18n",
+    "build:web": "expo export --platform web",
     "test": "jest --runInBand"
   },
   "dependencies": {
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@expo/match-media": "^0.4.0",
     "@expo/react-native-action-sheet": "^4.0.1",
-    "@expo/webpack-config": "^18.1.0",
-    "@react-native-async-storage/async-storage": "1.17.11",
-    "@react-native-community/datetimepicker": "6.7.3",
-    "@react-native-firebase/analytics": "^18.1.0",
-    "@react-native-firebase/app": "^18.1.0",
-    "@react-native-firebase/dynamic-links": "^18.1.0",
-    "@react-navigation/material-top-tabs": "^6.6.3",
-    "@sentry/react-native": "4.15.2",
-    "@shopify/flash-list": "1.4.0",
+    "@expo/vector-icons": "^13.0.0",
+    "@expo/webpack-config": "^19.0.0",
+    "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-community/datetimepicker": "7.2.0",
+    "@react-native-firebase/analytics": "^18.5.0",
+    "@react-native-firebase/app": "^18.5.0",
+    "@react-native-firebase/dynamic-links": "^18.5.0",
+    "@react-navigation/material-top-tabs": "^6.6.4",
+    "@react-navigation/native": "^6.1.8",
+    "@sentry/react-native": "5.5.0",
+    "@shopify/flash-list": "1.4.3",
     "date-fns": "^2.30.0",
-    "dooboo-ui": "^0.2.17",
-    "expo": "~48.0.19",
-    "expo-apple-authentication": "~6.0.1",
-    "expo-application": "~5.1.1",
-    "expo-auth-session": "~4.0.3",
-    "expo-constants": "~14.2.1",
-    "expo-device": "~5.2.1",
-    "expo-font": "~11.1.1",
-    "expo-image": "~1.0.1",
-    "expo-image-picker": "~14.1.1",
-    "expo-linear-gradient": "~12.1.2",
-    "expo-linking": "~4.0.1",
-    "expo-localization": "~14.1.1",
-    "expo-notifications": "^0.18.1",
-    "expo-router": "^1.5.3",
-    "expo-screen-orientation": "~5.1.1",
-    "expo-sharing": "~11.2.2",
-    "expo-splash-screen": "~0.18.2",
-    "expo-status-bar": "~1.4.4",
-    "expo-system-ui": "~2.2.1",
-    "expo-tracking-transparency": "~3.0.3",
-    "expo-updates": "~0.16.4",
-    "i18n-js": "^4.2.3",
-    "lottie-react-native": "5.1.4",
-    "onesignal-expo-plugin": "^1.3.2",
+    "dooboo-ui": "^0.2.21",
+    "expo": "~49.0.13",
+    "expo-apple-authentication": "~6.1.2",
+    "expo-application": "~5.3.0",
+    "expo-auth-session": "~5.0.2",
+    "expo-constants": "~14.4.2",
+    "expo-device": "~5.4.0",
+    "expo-font": "~11.4.0",
+    "expo-image": "~1.3.4",
+    "expo-image-picker": "~14.3.2",
+    "expo-linear-gradient": "~12.3.0",
+    "expo-linking": "~5.0.2",
+    "expo-localization": "~14.3.0",
+    "expo-notifications": "~0.20.1",
+    "expo-router": "^2.0.8",
+    "expo-screen-orientation": "~6.0.5",
+    "expo-sharing": "~11.5.0",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
+    "expo-system-ui": "~2.4.0",
+    "expo-tracking-transparency": "~3.1.0",
+    "expo-updates": "~0.18.15",
+    "expo-web-browser": "~12.3.2",
+    "i18n-js": "4.3.2",
+    "lottie-react-native": "5.1.6",
+    "onesignal-expo-plugin": "^2.0.1",
     "react": "18.2.0",
-    "react-native": "0.71.8",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.5",
     "react-native-error-boundary": "^1.2.3",
-    "react-native-gesture-handler": "~2.9.0",
+    "react-native-gesture-handler": "~2.12.0",
     "react-native-modal": "^13.0.1",
-    "react-native-onesignal": "^4.5.1",
-    "react-native-pager-view": "6.1.2",
+    "react-native-onesignal": "^5.0.1",
+    "react-native-pager-view": "6.2.0",
     "react-native-parsed-text": "^0.0.22",
-    "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-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-svg": "13.9.0",
     "react-native-tab-view": "^3.5.2",
-    "react-native-vector-icons": "^9.2.0",
-    "react-native-web": "~0.18.10",
+    "react-native-web": "~0.19.9",
     "react-native-web-lottie": "^1.4.4",
-    "react-native-webview": "11.26.0",
+    "react-native-webview": "13.2.2",
     "recoil": "^0.7.7",
-    "sentry-expo": "~6.2.2"
+    "sentry-expo": "~7.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@commitlint/cli": "^17.6.6",
-    "@commitlint/config-conventional": "^17.6.6",
+    "@babel/core": "^7.23.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@commitlint/cli": "^17.7.2",
+    "@commitlint/config-conventional": "^17.7.0",
     "@dooboo/eslint-config-react-native": "^1.4.2",
+    "@emotion/babel-plugin": "^11.11.0",
     "@mmomtchev/expo-android-localized-app-name": "^1.0.1",
-    "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^12.1.2",
-    "@types/i18n-js": "^3.8.4",
-    "@types/jest": "^29.5.2",
-    "@types/react": "~18.0.27",
-    "@types/react-native-vector-icons": "^6.4.13",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.3.0",
+    "@types/i18n-js": "^3.8.5",
+    "@types/jest": "^29.5.5",
+    "@types/react": "~18.2.25",
     "@types/recoil": "^0.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "babel-jest": "^29.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "babel-jest": "^29.7.0",
     "commitlint-plugin-function-rules": "^2.0.2",
-    "dotenv-cli": "^7.2.1",
-    "eslint": "^8.43.0",
+    "dotenv-cli": "^7.3.0",
+    "eslint": "^8.50.0",
     "eslint-plugin-i18n-json": "^4.0.0",
-    "eslint-plugin-jest": "^27.2.2",
-    "jest": "^29.5.0",
-    "jest-expo": "^48.0.2",
+    "eslint-plugin-jest": "^27.4.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "jest": "^29.7.0",
+    "jest-expo": "~49.0.0",
     "jest-fetch-mock": "^3.0.3",
-    "prettier": "^2.8.8",
-    "react-dom": "18.2.0",
-    "ts-jest": "^29.1.0",
+    "prettier": "^3.0.3",
+    "react-test-renderer": "18.2.0",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4"
+    "typescript": "^5.2.2"
+  },
+  "overrides": {
+    "react-refresh": "~0.14.0"
+  },
+  "resolutions": {
+    "react-refresh": "~0.14.0"
   },
   "private": true,
-  "license": "UNLICENSED",
-  "packageManager": "[email protected]"
+  "license": "UNLICENSED"
 }

tsconfig.json

@@ -7,7 +7,10 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "jsx": "react-jsx",
-    "lib": ["es2017", "dom"],
+    "lib": [
+      "es2017",
+      "dom"
+    ],
     "module": "es2015",
     "moduleResolution": "node",
     "resolveJsonModule": true,
@@ -44,7 +47,7 @@
           ]
         }
       }
-    ],
+    ]
   },
   "include": [
     "app/**/*.ts",
@@ -54,7 +57,9 @@
     "**/*.test.tsx",
     "**/*.spec.ts"
   ],
-  "exclude": ["node_modules"],
+  "exclude": [
+    "node_modules"
+  ],
   "jest": {
     "globals": {
       "ts-jest": {