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>

app.config.js

@@ -110,6 +110,9 @@ module.exports = function () {
         [
           'expo-build-properties',
           {
+            ios: {
+              deploymentTarget: '13.4',
+            },
             android: {
               compileSdkVersion: 34,
               targetSdkVersion: 34,

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',
           },
         },
       ],

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-community/datetimepicker": "7.6.1",
-    "@react-native-masked-view/masked-view": "^0.3.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": "^50.0.0-preview.7",
-    "expo-application": "~5.3.0",
+    "expo-application": "~5.8.1",
-    "expo-build-properties": "~0.8.3",
+    "expo-build-properties": "^0.11.0",
-    "expo-camera": "13.5.1",
+    "expo-camera": "~14.0.1",
-    "expo-constants": "~14.4.2",
+    "expo-constants": "~15.4.2",
-    "expo-dev-client": "2.4.7",
+    "expo-dev-client": "~3.3.4",
-    "expo-device": "~5.4.0",
+    "expo-device": "~5.9.1",
-    "expo-image": "~1.3.2",
+    "expo-image": "~1.10.1",
-    "expo-image-manipulator": "~11.5.0",
+    "expo-image-manipulator": "^11.8.0",
-    "expo-image-picker": "~14.5.0",
+    "expo-image-picker": "~14.7.1",
-    "expo-localization": "~14.3.0",
+    "expo-localization": "~14.8.1",
-    "expo-media-library": "~15.4.1",
+    "expo-media-library": "~15.9.1",
-    "expo-notifications": "~0.20.1",
+    "expo-notifications": "~0.27.2",
-    "expo-sharing": "~11.5.0",
+    "expo-sharing": "^11.10.0",
-    "expo-splash-screen": "~0.20.5",
+    "expo-splash-screen": "~0.26.1",
-    "expo-status-bar": "~1.6.0",
+    "expo-status-bar": "~1.11.1",
-    "expo-system-ui": "~2.4.0",
+    "expo-system-ui": "~2.9.2",
-    "expo-updates": "~0.18.12",
+    "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-gesture-handler": "~2.14.0",
-    "react-native-get-random-values": "^1.8.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-safe-area-context": "4.7.4",
-    "react-native-screens": "~3.22.0",
+    "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": "^29.7.0",
-    "jest-expo": "^49.0.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",

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 }],

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 {

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
+--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
-+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
++++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
 @@ -266,11 +266,10 @@ static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingCo
  
  - (void)textViewDidChangeSelection:(__unused UITextView *)textView

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

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>) {

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}
+}

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

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[]

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,

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: {

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',
   },

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>
 }
 

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,

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"]
     }
   }
 }