Upgrade to Expo 49 (#1331)

* update to expo 49

* update expo-camera to fix console erorrs

* run doctor again

* fix ts errors

* patch @sentry/react-native

Getting `cannot read property 'ignoreLogs' of undefined` in this file.
Ironically, this may be a cyclical imports problem. LogBox isn't enabled
in production, so this patch should only affect dev/test.

* fix type error

* reinstall newer reanimated

* pin expo-dev-client to fix reanimated dev-build issue

* fix type errors, fix bad conflict res

* Fix to notifications badge z-index on desktop

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

package.json

@@ -29,7 +29,7 @@
     "@braintree/sanitize-url": "^6.0.2",
     "@emoji-mart/react": "^1.1.1",
     "@expo/html-elements": "^0.4.2",
-    "@expo/webpack-config": "^18.0.1",
+    "@expo/webpack-config": "^19.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
@@ -37,11 +37,11 @@
     "@gorhom/bottom-sheet": "^4.4.7",
     "@mattermost/react-native-paste-input": "^0.6.4",
     "@miblanchard/react-native-slider": "^2.3.1",
-    "@react-native-async-storage/async-storage": "^1.17.6",
+    "@react-native-async-storage/async-storage": "1.18.2",
     "@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": "6.7.3",
+    "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-menu/menu": "^0.8.0",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/drawer": "^6.6.2",
@@ -51,7 +51,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": "4.13.0",
+    "@sentry/react-native": "5.5.0",
     "@tiptap/core": "^2.0.0-beta.220",
     "@tiptap/extension-document": "^2.0.0-beta.220",
     "@tiptap/extension-hard-break": "^2.0.3",
@@ -71,24 +71,24 @@
     "email-validator": "^2.0.4",
     "emoji-mart": "^5.5.2",
     "eventemitter3": "^5.0.1",
-    "expo": "~48.0.18",
-    "expo-application": "~5.1.1",
-    "expo-build-properties": "~0.5.1",
-    "expo-camera": "~13.2.1",
-    "expo-constants": "~14.2.1",
-    "expo-dev-client": "~2.1.1",
-    "expo-device": "~5.2.1",
-    "expo-image": "^1.2.3",
-    "expo-image-manipulator": "^11.1.1",
-    "expo-image-picker": "^14.1.1",
-    "expo-localization": "~14.1.1",
-    "expo-media-library": "~15.2.3",
-    "expo-notifications": "~0.18.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-updates": "~0.16.4",
+    "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.3.0",
+    "expo-image-picker": "~14.3.2",
+    "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",
     "fast-text-encoding": "^1.0.6",
     "graphemer": "^1.4.0",
     "history": "^5.3.0",
@@ -113,7 +113,7 @@
     "react-avatar-editor": "^13.0.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.71.8",
+    "react-native": "0.72.4",
     "react-native-appstate-hook": "^1.0.6",
     "react-native-draggable-flatlist": "^4.0.1",
     "react-native-drawer-layout": "^3.2.0",
@@ -129,18 +129,18 @@
     "react-native-progress": "bluesky-social/react-native-progress",
     "react-native-reanimated": "^3.4.2",
     "react-native-root-siblings": "^4.1.1",
-    "react-native-safe-area-context": "^4.4.1",
-    "react-native-screens": "^3.20.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
     "react-native-splash-screen": "^3.3.0",
-    "react-native-svg": "13.4.0",
+    "react-native-svg": "13.9.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.18.11",
+    "react-native-web": "~0.19.6",
     "react-native-web-linear-gradient": "^1.1.2",
     "react-responsive": "^9.0.2",
     "rn-fetch-blob": "^0.12.0",
-    "sentry-expo": "~6.1.0",
+    "sentry-expo": "~7.0.0",
     "tippy.js": "^6.3.7",
     "tlds": "^1.234.0",
     "zeego": "^1.6.2",
@@ -169,7 +169,6 @@
     "@types/lodash.set": "^4.3.7",
     "@types/lodash.shuffle": "^4.2.7",
     "@types/react-avatar-editor": "^13.0.0",
-    "@types/react-native": "^0.67.3",
     "@types/react-responsive": "^8.0.5",
     "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
@@ -187,7 +186,7 @@
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
     "jest": "^29.4.3",
-    "jest-expo": "^48.0.2",
+    "jest-expo": "^49.0.0",
     "jest-junit": "^15.0.0",
     "lint-staged": "^13.2.3",
     "metro-react-native-babel-preset": "^0.73.7",
@@ -197,7 +196,7 @@
     "react-scripts": "^5.0.1",
     "react-test-renderer": "18.2.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.4.4",
+    "typescript": "^5.1.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",

patches/@sentry+react-native+5.5.0.patch

@@ -0,0 +1,14 @@
+diff --git a/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js b/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
+index 7e0b4cd..3fd7406 100644
+--- a/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
++++ b/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
+@@ -3,6 +3,8 @@ import { LogBox } from 'react-native';
+  * This is a workaround for using fetch on RN, this is a known issue in react-native and only generates a warning.
+  */
+ export function ignoreRequireCycleLogs() {
+-    LogBox.ignoreLogs(['Require cycle:']);
++    try {
++        LogBox.ignoreLogs(['Require cycle:']);
++    } catch (e) {}
+ }
+ //# sourceMappingURL=ignorerequirecyclelogs.js.map

patches/react-native+0.72.4.patch

@@ -1,16 +1,7 @@
 diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
-index 1c8f8e0..090bda5 100644
+index 9dca6a5..090bda5 100644
 --- a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
 +++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
-@@ -256,7 +256,7 @@ static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingCo
- 
- - (void)textViewDidChange:(__unused UITextView *)textView
- {
--  if (_ignoreNextTextInputCall) {
-+  if (_ignoreNextTextInputCall && [_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
-     _ignoreNextTextInputCall = NO;
-     return;
-   }
 @@ -266,11 +266,10 @@ static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingCo
  
  - (void)textViewDidChangeSelection:(__unused UITextView *)textView

src/lib/sentry.ts

@@ -13,6 +13,7 @@ Sentry.init({
   enableInExpoDevelopment: false, // if true, Sentry will try to send events/errors in development mode.
   debug: false, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
   environment: __DEV__ ? 'development' : 'production', // Set the environment
+  // @ts-ignore exists but not in types, see https://docs.sentry.io/platforms/react-native/configuration/options/#enableAutoPerformanceTracking
   enableAutoPerformanceTracking: true, // Enable auto performance tracking
   tracesSampleRate: 0.5, // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring. // TODO: this might be too much in production
   _experiments: {

src/view/com/auth/SplashScreen.web.tsx

@@ -90,6 +90,7 @@ const styles = StyleSheet.create({
   containerInner: {
     height: '100%',
     justifyContent: 'center',
+    // @ts-ignore web only
     paddingBottom: '20vh',
     paddingHorizontal: 20,
   },

src/view/com/modals/DeleteAccount.tsx

@@ -242,6 +242,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
+    // @ts-ignore only rendered on web
     maxWidth: '400px',
   },
   description: {

src/view/com/modals/Modal.web.tsx

@@ -145,7 +145,9 @@ const styles = StyleSheet.create({
   },
   container: {
     width: 500,
+    // @ts-ignore web only
     maxWidth: '100vw',
+    // @ts-ignore web only
     maxHeight: '100vh',
     paddingVertical: 20,
     paddingHorizontal: 24,

src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx

@@ -54,6 +54,7 @@ export function Component({}: {}) {
       style={[
         pal.view,
         styles.container,
+        // @ts-ignore vh is web only
         isMobile
           ? {
               paddingTop: 20,

src/view/com/modals/lang-settings/PostLanguagesSettings.tsx

@@ -55,6 +55,7 @@ export const Component = observer(() => {
       style={[
         pal.view,
         styles.container,
+        // @ts-ignore vh is on web only
         isMobile
           ? {
               paddingTop: 20,

src/view/com/pager/Pager.tsx

@@ -36,7 +36,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
     ref,
   ) => {
     const [selectedPage, setSelectedPage] = React.useState(0)
-    const pagerView = React.useRef<PagerView>()
+    const pagerView = React.useRef<PagerView>(null)
 
     React.useImperativeHandle(ref, () => ({
       setPage: (index: number) => pagerView.current?.setPage(index),

src/view/com/util/LoadingPlaceholder.tsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
+import {
+  StyleSheet,
+  StyleProp,
+  View,
+  ViewStyle,
+  DimensionValue,
+} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {HeartIcon} from 'lib/icons'
 import {s} from 'lib/styles'
@@ -11,8 +17,8 @@ export function LoadingPlaceholder({
   height,
   style,
 }: {
-  width: string | number
-  height: string | number
+  width: DimensionValue
+  height: DimensionValue
   style?: StyleProp<ViewStyle>
 }) {
   const theme = useTheme()

src/view/com/util/Toast.web.tsx

@@ -4,7 +4,10 @@
 
 import React, {useState, useEffect} from 'react'
 import {StyleSheet, Text, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
 
 const DURATION = 3500
 
@@ -32,7 +35,11 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
     <>
       {activeToast && (
         <View style={styles.container}>
-          <FontAwesomeIcon icon="check" size={24} style={styles.icon} />
+          <FontAwesomeIcon
+            icon="check"
+            size={24}
+            style={styles.icon as FontAwesomeIconStyle}
+          />
           <Text style={styles.text}>{activeToast.text}</Text>
         </View>
       )}
@@ -57,6 +64,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 20,
     bottom: 20,
+    // @ts-ignore web only
     width: 'calc(100% - 40px)',
     maxWidth: 350,
     padding: 20,

src/view/com/util/Views.web.tsx

@@ -118,6 +118,7 @@ const styles = StyleSheet.create({
   contentContainer: {
     borderLeftWidth: 1,
     borderRightWidth: 1,
+    // @ts-ignore web only
     minHeight: '100vh',
   },
   container: {
@@ -133,6 +134,7 @@ const styles = StyleSheet.create({
     marginRight: 'auto',
   },
   fixedHeight: {
+    // @ts-ignore web only
     height: '100vh',
   },
   stableGutters: {

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -60,6 +60,7 @@ export const LoggedOutLayout = ({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
+    // @ts-ignore web only
     height: '100vh',
   },
   side: {

src/view/com/util/load-latest/LoadLatestBtn.web.tsx

@@ -74,6 +74,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     position: 'absolute',
+    // @ts-ignore web only
     left: '50vw',
     // @ts-ignore web only -prf
     transform: 'translateX(-282px)',
@@ -92,6 +93,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     position: 'absolute',
+    // @ts-ignore web only
     left: '50vw',
     // @ts-ignore web only -prf
     transform: 'translateX(-50%)',

src/view/screens/SavedFeeds.tsx

@@ -246,6 +246,7 @@ const styles = StyleSheet.create({
   desktopContainer: {
     borderLeftWidth: 1,
     borderRightWidth: 1,
+    // @ts-ignore only rendered on web
     minHeight: '100vh',
   },
   empty: {

src/view/shell/Composer.web.tsx

@@ -76,11 +76,13 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     marginBottom: 0,
     borderWidth: 1,
+    // @ts-ignore web only
     maxHeight: 'calc(100% - (40px * 2))',
   },
   containerMobile: {
     borderRadius: 0,
     marginBottom: BOTTOM_BAR_HEIGHT,
+    // @ts-ignore web only
     maxHeight: `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`,
   },
 })

src/view/shell/desktop/LeftNav.tsx

@@ -367,8 +367,10 @@ const styles = StyleSheet.create({
   leftNav: {
     position: 'absolute',
     top: 10,
+    // @ts-ignore web only
     right: 'calc(50vw + 312px)',
     width: 220,
+    // @ts-ignore web only
     maxHeight: 'calc(100vh - 10px)',
     overflowY: 'auto',
   },
@@ -413,6 +415,7 @@ const styles = StyleSheet.create({
     width: 28,
     height: 28,
     marginTop: 2,
+    zIndex: 1,
   },
   navItemIconWrapperTablet: {
     width: 40,

src/view/shell/desktop/RightNav.tsx

@@ -120,6 +120,7 @@ const styles = StyleSheet.create({
   rightNav: {
     position: 'absolute',
     top: 20,
+    // @ts-ignore web only
     left: 'calc(50vw + 310px)',
     width: 304,
   },

src/view/shell/index.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
 import {StatusBar} from 'expo-status-bar'
-import {StyleSheet, useWindowDimensions, View} from 'react-native'
+import {
+  DimensionValue,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {Drawer} from 'react-native-drawer-layout'
 import {useNavigationState} from '@react-navigation/native'
@@ -25,7 +30,7 @@ const ShellInner = observer(() => {
   const winDim = useWindowDimensions()
   const safeAreaInsets = useSafeAreaInsets()
   const containerPadding = React.useMemo(
-    () => ({height: '100%', paddingTop: safeAreaInsets.top}),
+    () => ({height: '100%' as DimensionValue, paddingTop: safeAreaInsets.top}),
     [safeAreaInsets],
   )
   const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])