Upgrade to Expo 49 (#809)

* lerna v49 * Upgrade package versions * Fix webview type issue * Add self published `@youssefhenna/react-native-reanimated2` for BottomSheet component * Fix type issue with Image component * Fix type issue with ProgressBar component * Fix some tests * Fixed maps broken tests * Fix final test * Use v2 of reanimated everywhere + update navigation * Replace BottomSheet with `@gorhom/bottom-sheet` * Reupgrade `react-native-reanimated` * Mapped snap points for usage with `@gorhom/bottom-sheet` * Fix deprecations in example app * Move away from `expo-yarn-workspaces` * Prepare ci to work on '49' branch * Packages to v49 * Upgrade jest-expo + fix tests * Add comment
draftbit · Oct 31, 2023 · b07029d · b07029d
1 parent a5b3462
commit b07029d
Show file tree

Hide file tree

Showing 23 changed files with 1,206 additions and 5,254 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - master
-      - 48
+      - 49
   pull_request:
     types: [assigned, opened, synchronize, reopened]
 
@@ -64,8 +64,8 @@ jobs:
             --yes \
             --no-verify-access
 
-      - name: Release packages (48)
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/48'
+      - name: Release packages (49)
+        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/49'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.JIGSAW_AUTH_TOKEN }}
         run: |

diff --git a/example/App.js b/example/App.js
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,5 @@
+import "react-native-get-random-values";
+import { registerRootComponent } from "expo";
+import App from "./src/App";
+
+registerRootComponent(App);
diff --git a/example/metro.config.js b/example/metro.config.js
@@ -1,3 +1,23 @@
-const { createMetroConfiguration } = require("expo-yarn-workspaces");
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
 
-module.exports = createMetroConfiguration(__dirname);
+// Follows https://docs.expo.dev/guides/monorepos/
+
+// Find the project and workspace directories
+const projectRoot = __dirname;
+// This can be replaced with `find-yarn-workspace-root`
+const workspaceRoot = path.resolve(projectRoot, "..");
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [workspaceRoot];
+// 2. Let Metro know where to resolve packages and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, "node_modules"),
+  path.resolve(workspaceRoot, "node_modules"),
+];
+// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+config.resolver.disableHierarchicalLookup = true;
+
+module.exports = config;
diff --git a/example/package.json b/example/package.json
@@ -1,47 +1,45 @@
 {
   "name": "@draftbit/example",
   "description": "Example app for @draftbit/ui",
-  "version": "48.6.2",
+  "version": "49.0.0",
   "private": true,
-  "main": "__generated__/AppEntry.js",
   "scripts": {
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
     "start": "expo start",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "postinstall": "expo-yarn-workspaces postinstall",
     "example": "yarn --cwd example",
     "clean:modules": "rimraf node_modules"
   },
   "dependencies": {
-    "@draftbit/maps": "48.6.2",
-    "@draftbit/ui": "48.6.2",
+    "@draftbit/maps": "49.0.0",
+    "@draftbit/ui": "49.0.0",
     "@expo/dev-server": "0.1.123",
-    "@expo/webpack-config": "^18.0.1",
-    "@react-navigation/drawer": "^5.12.9",
-    "@react-navigation/native": "^5.9.8",
-    "@shopify/flash-list": "1.4.0",
-    "expo": "^48.0.0",
-    "expo-app-loading": "~2.1.1",
-    "expo-asset": "~8.9.1",
-    "expo-constants": "~14.2.1",
-    "expo-font": "~11.1.1",
-    "expo-splash-screen": "~0.18.2",
-    "expo-status-bar": "~1.4.4",
+    "@expo/webpack-config": "^19.0.0",
+    "@react-navigation/drawer": "^6.6.3",
+    "@react-navigation/native": "^6.1.7",
+    "@shopify/flash-list": "1.4.3",
+    "expo": "^49.0.0",
+    "expo-asset": "~8.10.1",
+    "expo-constants": "~14.4.2",
+    "expo-font": "~11.4.0",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.7",
-    "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-web": "~0.18.11"
+    "react-native": "0.72.5",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-get-random-values": "~1.9.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "~18.0.27",
+    "@types/react": "~18.2.14",
     "@types/react-native": "~0.70.6",
     "babel-loader": "8.1.0",
     "sharp-cli": "2.1.0"

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -196,7 +196,7 @@ const AnimatedSplashScreen: React.FC<
             StyleSheet.absoluteFill,
             {
               backgroundColor:
-                Constants?.manifest?.splash?.backgroundColor ||
+                Constants?.expoConfig?.splash?.backgroundColor ||
                 "rgba(90, 69, 255, 1)",
               opacity: animation,
             },
@@ -206,7 +206,8 @@ const AnimatedSplashScreen: React.FC<
             style={{
               width: "100%",
               height: "100%",
-              resizeMode: Constants?.manifest?.splash?.resizeMode || "contain",
+              resizeMode:
+                Constants?.expoConfig?.splash?.resizeMode || "contain",
               transform: [
                 {
                   scale: animation,
@@ -258,8 +259,9 @@ function Examples() {
     <NavigationContainer>
       <Drawer.Navigator
         initialRouteName="Layout"
-        drawerContentOptions={{
-          activeTintColor: "rgba(90, 69, 255, 1)",
+        screenOptions={{
+          drawerActiveTintColor: "rgba(90, 69, 255, 1)",
+          headerShown: false,
         }}
       >
         {Object.entries(ROUTES).map(([key, Screen]) => {

diff --git a/example/webpack.config.js b/example/webpack.config.js
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "48.6.2",
+  "version": "49.0.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": ["packages/*", "example"],

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "postinstall": "yarn-deduplicate && expo-yarn-workspaces check-workspace-dependencies && patch-package",
+    "postinstall": "yarn-deduplicate && patch-package",
     "example": "yarn --cwd example",
     "bootstrap": "lerna bootstrap",
     "crosslink": "lerna link",
@@ -35,7 +35,7 @@
     "packages/*"
   ],
   "resolutions": {
-    "react-native-gesture-handler": "~2.9.0"
+    "react-native-gesture-handler": "~2.12.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.5",
@@ -51,11 +51,10 @@
     "dotenv": "^9.0.2",
     "eslint": "^8.18.0",
     "eslint-plugin-prettier": "^4.2.0",
-    "expo-yarn-workspaces": "^2.0.0",
     "husky": ">=6",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "jest-expo": "^48.0.2",
+    "jest-expo": "^49.0.0",
     "json-server": "^0.16.3",
     "lerna": "^5.6.2",
     "lint-staged": ">=13",

diff --git a/packages/core/jest-setup.js b/packages/core/jest-setup.js
@@ -1,6 +1,5 @@
 import "@shopify/flash-list/jestSetup";
-import { setUpTests as setupReaanimatedTests } from "react-native-reanimated/lib/reanimated2/jestUtils";
-
+import { setUpTests as setupReaanimatedTests } from "react-native-reanimated/src/reanimated2/jestUtils";
 setupReaanimatedTests();
 
 // Fixes reanimated jest bug: https://github.com/software-mansion/react-native-reanimated/issues/3125

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "48.6.2",
+  "version": "49.0.0",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -41,17 +41,18 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "48.3.0",
+    "@draftbit/types": "49.0.0",
     "@expo/vector-icons": "^13.0.0",
+    "@gorhom/bottom-sheet": "^5.0.0-alpha.4",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.4.2",
-    "@react-native-picker/picker": "2.4.8",
-    "@shopify/flash-list": "1.4.0",
+    "@react-native-picker/picker": "2.4.10",
+    "@shopify/flash-list": "1.4.3",
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
-    "expo-av": "~13.2.1",
+    "expo-av": "~13.4.1",
     "lodash.isequal": "^4.5.0",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
@@ -60,13 +61,13 @@
     "react-native-confirmation-code-field": "^7.3.1",
     "react-native-deck-swiper": "^2.0.12",
     "react-native-dropdown-picker": "^5.4.7-beta.1",
-    "react-native-gesture-handler": "~2.9.0",
+    "react-native-gesture-handler": "~2.12.0",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal-datetime-picker": "^13.0.0",
-    "react-native-pager-view": "6.1.2",
-    "react-native-reanimated": "~2.14.4",
+    "react-native-pager-view": "6.2.0",
+    "react-native-reanimated": "~3.3.0",
     "react-native-shadow-2": "^7.0.7",
-    "react-native-svg": "13.4.0",
+    "react-native-svg": "13.9.0",
     "react-native-swipe-list-view": "^3.2.9",
     "react-native-tab-view": "^3.4.0",
     "react-native-typography": "^1.4.1",

diff --git a/packages/core/src/__tests__/components/Picker.test.tsx b/packages/core/src/__tests__/components/Picker.test.tsx
@@ -5,6 +5,8 @@ import Provider from "../../Provider";
 import DefaultTheme from "../../styles/DefaultTheme";
 import { act } from "react-test-renderer";
 
+jest.useFakeTimers();
+
 jest.mock("@react-native-picker/picker", () => {
   const React = require("react");
   const { View } = require("react-native");