Bump react-native to 0.73.1, expo to 50 (#2214)

* Bump to react-native@0.73, bump expo@next Includes bumps for all expo deps and dev dependencies. Updates react-native patch and others, and removes the babel-preset-expo patch. * Remove duplicate Splash ref * Bump more deps * Properly install expo-notifications * Bump webview dep * Bump packages according to expo fix; remove pager-view patch as it is no longer needed * Don't access expo-camera from Web * Fix crypto dep on web * Fix some type issues * Build esnext modules to support dynamic imports --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
2023-12-23 17:44:38 -06:00 · 2023-12-23 17:44:38 -06:00 · 93f5bb3b1f
parent 7d6b7d2fa6
commit 93f5bb3b1f
20 changed files with 1783 additions and 1225 deletions
--- a/app.config.js
+++ b/app.config.js
@ -110,6 +110,9 @@ module.exports = function () {
        [
          'expo-build-properties',
          {
+            ios: {
+              deploymentTarget: '13.4',
+            },
            android: {
              compileSdkVersion: 34,
              targetSdkVersion: 34,
--- a/babel.config.js
+++ b/babel.config.js
@ -42,6 +42,7 @@ module.exports = function (api) {
            platform: './src/platform',
            state: './src/state',
            view: './src/view',
+            crypto: './src/platform/crypto.ts',
          },
        },
      ],
--- a/package.json
+++ b/package.json
@ -2,6 +2,9 @@
  "name": "bsky.app",
  "version": "1.60.0",
  "private": true,
+  "engines": {
+    "node": ">=18"
+  },
  "scripts": {
    "prepare": "is-ci || husky install",
    "postinstall": "patch-package && yarn intl:compile",
@ -32,7 +35,8 @@
    "intl:build": "yarn intl:check && yarn intl:compile",
    "intl:check": "yarn intl:extract && git diff-index -G'(^[^\\*# /])|(^#\\w)|(^\\s+[^\\*#/])' HEAD || (echo '\n⚠️ i18n detected un-extracted translations\n' && exit 1)",
    "intl:extract": "lingui extract",
-    "intl:compile": "lingui compile"
+    "intl:compile": "lingui compile",
+    "nuke": "rm -rf ./node_modules && rm -rf ./ios && rm -rf ./android"
  },
  "dependencies": {
    "@atproto/api": "^0.7.4",
@ -49,14 +53,14 @@
    "@lingui/react": "^4.5.0",
    "@mattermost/react-native-paste-input": "^0.6.4",
    "@miblanchard/react-native-slider": "^2.3.1",
-    "@react-native-async-storage/async-storage": "1.18.2",
+    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-native-camera-roll/camera-roll": "^5.2.2",
    "@react-native-clipboard/clipboard": "^1.10.0",
    "@react-native-community/blur": "^4.3.0",
-    "@react-native-community/datetimepicker": "7.2.0",
-    "@react-native-masked-view/masked-view": "^0.3.1",
+    "@react-native-community/datetimepicker": "7.6.1",
+    "@react-native-masked-view/masked-view": "0.3.0",
    "@react-native-menu/menu": "^0.8.0",
-    "@react-native-picker/picker": "2.4.10",
+    "@react-native-picker/picker": "2.5.1",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
@ -65,7 +69,7 @@
    "@segment/analytics-react": "^1.0.0-rc1",
    "@segment/analytics-react-native": "^2.10.1",
    "@segment/sovran-react-native": "^0.4.5",
-    "@sentry/react-native": "5.10.0",
+    "@sentry/react-native": "5.5.0",
    "@tanstack/react-query": "^5.8.1",
    "@tiptap/core": "^2.0.0-beta.220",
    "@tiptap/extension-document": "^2.0.0-beta.220",
@ -90,24 +94,25 @@
    "email-validator": "^2.0.4",
    "emoji-mart": "^5.5.2",
    "eventemitter3": "^5.0.1",
-    "expo": "^49.0.8",
-    "expo-application": "~5.3.0",
-    "expo-build-properties": "~0.8.3",
-    "expo-camera": "13.5.1",
-    "expo-constants": "~14.4.2",
-    "expo-dev-client": "2.4.7",
-    "expo-device": "~5.4.0",
-    "expo-image": "~1.3.2",
-    "expo-image-manipulator": "~11.5.0",
-    "expo-image-picker": "~14.5.0",
-    "expo-localization": "~14.3.0",
-    "expo-media-library": "~15.4.1",
-    "expo-notifications": "~0.20.1",
-    "expo-sharing": "~11.5.0",
-    "expo-splash-screen": "~0.20.5",
-    "expo-status-bar": "~1.6.0",
-    "expo-system-ui": "~2.4.0",
-    "expo-updates": "~0.18.12",
+    "expo": "^50.0.0-preview.7",
+    "expo-application": "~5.8.1",
+    "expo-build-properties": "^0.11.0",
+    "expo-camera": "~14.0.1",
+    "expo-constants": "~15.4.2",
+    "expo-dev-client": "~3.3.4",
+    "expo-device": "~5.9.1",
+    "expo-image": "~1.10.1",
+    "expo-image-manipulator": "^11.8.0",
+    "expo-image-picker": "~14.7.1",
+    "expo-localization": "~14.8.1",
+    "expo-media-library": "~15.9.1",
+    "expo-notifications": "~0.27.2",
+    "expo-sharing": "^11.10.0",
+    "expo-splash-screen": "~0.26.1",
+    "expo-status-bar": "~1.11.1",
+    "expo-system-ui": "~2.9.2",
+    "expo-task-manager": "~11.7.0",
+    "expo-updates": "~0.24.5",
    "fast-text-encoding": "^1.0.6",
    "history": "^5.3.0",
    "js-sha256": "^0.9.0",
@ -135,33 +140,33 @@
    "react-avatar-editor": "^13.0.0",
    "react-circular-progressbar": "^2.1.0",
    "react-dom": "^18.2.0",
-    "react-native": "0.72.5",
+    "react-native": "0.73.1",
    "react-native-appstate-hook": "^1.0.6",
    "react-native-drawer-layout": "^4.0.0-alpha.3",
    "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "^2.12.1",
-    "react-native-get-random-values": "^1.8.0",
+    "react-native-gesture-handler": "~2.14.0",
+    "react-native-get-random-values": "~1.8.0",
    "react-native-haptic-feedback": "^1.14.0",
    "react-native-image-crop-picker": "^0.38.1",
    "react-native-inappbrowser-reborn": "^3.6.3",
    "react-native-ios-context-menu": "^1.15.3",
    "react-native-linear-gradient": "^2.6.2",
-    "react-native-pager-view": "6.1.4",
+    "react-native-pager-view": "6.2.2",
    "react-native-picker-select": "^8.1.0",
    "react-native-progress": "bluesky-social/react-native-progress",
    "react-native-reanimated": "^3.6.0",
    "react-native-root-siblings": "^4.1.1",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
+    "react-native-safe-area-context": "4.7.4",
+    "react-native-screens": "~3.27.0",
    "react-native-splash-screen": "^3.3.0",
-    "react-native-svg": "13.9.0",
+    "react-native-svg": "14.0.0",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-uuid": "^2.0.1",
    "react-native-version-number": "^0.3.6",
    "react-native-web": "~0.19.6",
    "react-native-web-linear-gradient": "^1.1.2",
    "react-native-web-webview": "^1.0.2",
-    "react-native-webview": "^13.6.2",
+    "react-native-webview": "^13.6.3",
    "react-native-youtube-iframe": "^2.3.0",
    "react-responsive": "^9.0.2",
    "rn-fetch-blob": "^0.12.0",
@ -178,10 +183,13 @@
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@did-plc/server": "^0.0.1",
+    "@expo/config-plugins": "7.8.0",
+    "@expo/prebuild-config": "6.7.0",
    "@lingui/cli": "^4.5.0",
    "@lingui/macro": "^4.5.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
    "@react-native-community/eslint-config": "^3.0.0",
+    "@react-native/typescript-config": "^0.74.0",
    "@testing-library/jest-native": "^5.4.1",
    "@testing-library/react-native": "^11.5.2",
    "@tsconfig/react-native": "^2.0.3",
@ -202,11 +210,12 @@
    "@types/react-test-renderer": "^17.0.1",
    "@typescript-eslint/eslint-plugin": "^5.48.2",
    "@typescript-eslint/parser": "^5.48.2",
-    "babel-jest": "^29.4.2",
+    "babel-jest": "^29.7.0",
    "babel-loader": "^9.1.2",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "babel-plugin-react-native-web": "^0.18.12",
+    "babel-preset-expo": "^10.0.0",
    "detox": "^20.13.0",
    "eslint": "^8.19.0",
    "eslint-plugin-detox": "^1.0.0",
@ -217,8 +226,8 @@
    "html-webpack-plugin": "^5.5.0",
    "husky": "^8.0.3",
    "is-ci": "^3.0.1",
-    "jest": "^29.4.3",
-    "jest-expo": "^49.0.0",
+    "jest": "^29.7.0",
+    "jest-expo": "^50.0.1",
    "jest-junit": "^15.0.0",
    "lint-staged": "^13.2.3",
    "metro-react-native-babel-preset": "^0.73.7",
@ -228,7 +237,7 @@
    "react-scripts": "^5.0.1",
    "react-test-renderer": "18.2.0",
    "ts-node": "^10.9.1",
-    "typescript": "^5.1.3",
+    "typescript": "^5.3.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
--- a/patches/babel-preset-expo+9.5.2.patch
+++ b/patches/babel-preset-expo+9.5.2.patch
@ -1,14 +0,0 @@
-diff --git a/node_modules/babel-preset-expo/index.js b/node_modules/babel-preset-expo/index.js
-index 2099ee3..2b9e092 100644
--- a/node_modules/babel-preset-expo/index.js
-+++ b/node_modules/babel-preset-expo/index.js
-@@ -105,7 +105,8 @@ module.exports = function (api, options = {}) {
-       ],
-     ],
-     plugins: [
-      getObjectRestSpreadPlugin(),
-+      // - dan: This will be disabled anyway when we upgrade Expo, but let's do it now.
-+      // getObjectRestSpreadPlugin(),
-       ...extraPlugins,
-       getAliasPlugin(),
-       [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
--- a/patches/metro+0.80.1.patch
+++ b/patches/metro+0.80.1.patch
--- a/patches/metro-runtime+0.80.1.patch
+++ b/patches/metro-runtime+0.80.1.patch
--- a/patches/metro-transform-worker+0.80.1.patch
+++ b/patches/metro-transform-worker+0.80.1.patch
@ -1,8 +1,8 @@
 diff --git a/node_modules/metro-transform-worker/src/index.js b/node_modules/metro-transform-worker/src/index.js
-index 27d4cb3..fd71f47 100644
+index cae11e7..42f251b 100644
 --- a/node_modules/metro-transform-worker/src/index.js
 +++ b/node_modules/metro-transform-worker/src/index.js
-@@ -190,6 +190,10 @@ async function transformJS(file, { config, options, projectRoot }) {
+@@ -189,6 +189,10 @@ async function transformJS(file, { config, options, projectRoot }) {
   let dependencyMapName = "";
   let dependencies;
   let wrappedAst;
@ -13,7 +13,7 @@ index 27d4cb3..fd71f47 100644
 
   // If the module to transform is a script (meaning that is not part of the
   // dependency graph and it code will just be prepended to the bundle modules),
-@@ -229,19 +233,20 @@ async function transformJS(file, { config, options, projectRoot }) {
+@@ -228,19 +232,20 @@ async function transformJS(file, { config, options, projectRoot }) {
     if (config.unstable_disableModuleWrapping === true) {
       wrappedAst = ast;
     } else {
--- a/patches/react-native+0.73.0.patch
+++ b/patches/react-native+0.73.0.patch
@ -1,7 +1,7 @@
-diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
+diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
 index 9dca6a5..090bda5 100644
--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
-+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
+--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
@@ -266,11 +266,10 @@ static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingCo
 
 - (void)textViewDidChangeSelection:(__unused UITextView *)textView
--- a/patches/react-native-pager-view+6.1.4.patch
+++ b/patches/react-native-pager-view+6.1.4.patch
@ -1,54 +0,0 @@
-diff --git a/node_modules/react-native-pager-view/ios/ReactNativePageView.m b/node_modules/react-native-pager-view/ios/ReactNativePageView.m
-index ab0fc7f..1ace752 100644
--- a/node_modules/react-native-pager-view/ios/ReactNativePageView.m
-+++ b/node_modules/react-native-pager-view/ios/ReactNativePageView.m
-@@ -1,6 +1,6 @@
- 
- #import "ReactNativePageView.h"
-#import "React/RCTLog.h"
-+#import <React/RCTLog.h>
- #import <React/RCTViewManager.h>
- 
- #import "UIViewController+CreateExtension.h"
-@@ -9,7 +9,7 @@
- #import "RCTOnPageSelected.h"
- #import <math.h>
- 
-@interface ReactNativePageView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate>
-+@interface ReactNativePageView () <UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate, UIGestureRecognizerDelegate>
- 
- @property(nonatomic, strong) UIPageViewController *reactPageViewController;
- @property(nonatomic, strong) RCTEventDispatcher *eventDispatcher;
-@@ -80,6 +80,10 @@ - (void)didMoveToWindow {
-         [self setupInitialController];
-     }
- 
-+    UIPanGestureRecognizer* panGestureRecognizer = [UIPanGestureRecognizer new];
-+    panGestureRecognizer.delegate = self;
-+    [self addGestureRecognizer: panGestureRecognizer];
-+
-     if (self.reactViewController.navigationController != nil && self.reactViewController.navigationController.interactivePopGestureRecognizer != nil) {
-         [self.scrollView.panGestureRecognizer requireGestureRecognizerToFail:self.reactViewController.navigationController.interactivePopGestureRecognizer];
-     }
-@@ -463,4 +467,21 @@ - (NSString *)determineScrollDirection:(UIScrollView *)scrollView {
- - (BOOL)isLtrLayout {
-     return [_layoutDirection isEqualToString:@"ltr"];
- }
-+
-+- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
-+    if (!_overdrag && otherGestureRecognizer == self.scrollView.panGestureRecognizer) {
-+        UIPanGestureRecognizer* p = (UIPanGestureRecognizer*) gestureRecognizer;
-+        CGPoint velocity = [p velocityInView:self];
-+        if (self.currentIndex == 0 && velocity.x > 0) {
-+            self.scrollView.panGestureRecognizer.enabled = false;
-+            return NO;
-+        } else {
-+            self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled;
-+        }
-+    } else {
-+        self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled;
-+    }
-+    
-+    return YES;
-+}
- @end
--- a/src/Splash.tsx
+++ b/src/Splash.tsx
@ -40,8 +40,6 @@ type Props = {
  isReady: boolean
 }

-SplashScreen.preventAutoHideAsync().catch(() => {})
-
 const AnimatedLogo = Animated.createAnimatedComponent(Logo)

 export function Splash(props: React.PropsWithChildren<Props>) {
--- a/src/lib/hooks/usePermissions.web.ts
+++ b/src/lib/hooks/usePermissions.web.ts
@ -0,0 +1,16 @@
+export function usePhotoLibraryPermission() {
+  const requestPhotoAccessIfNeeded = async () => {
+    // On the, we use <input type="file"> to produce a filepicker
+    // This does not need any permission granting.
+    return true
+  }
+  return {requestPhotoAccessIfNeeded}
+}
+
+export function useCameraPermission() {
+  const requestCameraAccessIfNeeded = async () => {
+    return false
+  }
+
+  return {requestCameraAccessIfNeeded}
+}
--- a/src/platform/crypto.ts
+++ b/src/platform/crypto.ts
@ -0,0 +1,7 @@
+// HACK
+// expo-modules-core tries to require('crypto') in uuid.web.js
+// and while it tries to detect web crypto before doing so, our
+// build fails when it tries to do this require. We use a babel
+// and tsconfig alias to direct it here
+// -prf
+export default crypto
--- a/src/platform/detection.ts
+++ b/src/platform/detection.ts
@ -14,5 +14,7 @@ export const isMobileWeb =
  global.window.matchMedia(isMobileWebMediaQuery)?.matches

 export const deviceLocales = dedupArray(
-  getLocales?.().map?.(locale => locale.languageCode),
-)
+  getLocales?.()
+    .map?.(locale => locale.languageCode)
+    .filter(code => typeof code === 'string'),
+) as string[]
--- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx
@ -96,6 +96,7 @@ const styles = StyleSheet.create({
  },
  trigger: {
    backgroundColor: 'transparent',
+    // @ts-ignore web only -prf
    border: 'none',
    paddingTop: 4,
    paddingLeft: 12,
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@ -221,6 +221,7 @@ const styles = StyleSheet.create({
    paddingBottom: 5,
    paddingLeft: 10,
    borderTopWidth: 1,
+    // @ts-ignore web only -prf
    cursor: 'pointer',
  },
  layout: {
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@ -364,6 +364,7 @@ const styles = StyleSheet.create({
    borderTopWidth: 1,
    paddingLeft: 10,
    paddingRight: 15,
+    // @ts-ignore web only -prf
    cursor: 'pointer',
    overflow: 'hidden',
  },
--- a/src/view/com/util/Html.tsx
+++ b/src/view/com/util/Html.tsx
@ -30,6 +30,7 @@ export function H1({children}: React.PropsWithChildren<{}>) {
  const styles = useStyles()
  const pal = usePalette('default')
  const typography = useTheme().typography['title-xl']
+  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
  return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1>
 }

@ -37,6 +38,7 @@ export function H2({children}: React.PropsWithChildren<{}>) {
  const styles = useStyles()
  const pal = usePalette('default')
  const typography = useTheme().typography['title-lg']
+  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
  return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2>
 }

@ -44,6 +46,7 @@ export function H3({children}: React.PropsWithChildren<{}>) {
  const styles = useStyles()
  const pal = usePalette('default')
  const typography = useTheme().typography.title
+  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
  return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3>
 }

@ -51,6 +54,7 @@ export function H4({children}: React.PropsWithChildren<{}>) {
  const styles = useStyles()
  const pal = usePalette('default')
  const typography = useTheme().typography['title-sm']
+  // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf
  return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4>
 }

--- a/src/view/shell/desktop/Feeds.tsx
+++ b/src/view/shell/desktop/Feeds.tsx
@ -86,6 +86,7 @@ function FeedItem({
 const styles = StyleSheet.create({
  container: {
    flex: 1,
+    // @ts-ignore web only -prf
    overflowY: 'auto',
    width: 300,
    paddingHorizontal: 12,
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,14 +1,16 @@
 {
-  "extends": "@tsconfig/react-native/tsconfig.json",
+  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx",
+    "module": "esnext",
    "types": ["node"],
    "paths": {
      "#/*": ["./src/*"],
      "lib/*": ["./src/lib/*"],
      "platform/*": ["./src/platform/*"],
      "state/*": ["./src/state/*"],
-      "view/*": ["./src/view/*"]
+      "view/*": ["./src/view/*"],
+      "crypto": ["./src/platform/crypto.ts"]
    }
  }
 }
--- a/yarn.lock
+++ b/yarn.lock