Upgrade to Expo 51 and React Native 0.74 (#3980)

* upgrade packages

* remove `expo-image-picker` patch

* remove old expo-updates patch

* rename rn patch

* downgrade crop picker

* bump `ExpoGifView` `SDWebImage` version

* apply config changes

* update build docs for apple silicon

* update build docs for apple silicon

* update expo-updates patch

* add back patch readme

* bump `expo-dev-client`

* bump `babel-preset`

* update `babel.config.js`

* update `react-native-paste-input` patch

* remove old ota updates hook

* update types

* update types

* downgrade pager-view

* update animated ref type

* fix web-only type

* update `react-native-bottom-sheet` `BottomSheetTextInput`

* add `expo-application` to jest mocks

* remove reanimated patch

* update notifications patch

* update reanimated path

* fix import

* update yarn.lock

* use `ItemT` instead of `any`

* expo bump

* Revert logic change, fix types

* Fix JSON file

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

src/lib/hooks/useOTAUpdate.ts

@@ -1,56 +0,0 @@
-import * as Updates from 'expo-updates'
-import {useCallback, useEffect} from 'react'
-import {AppState} from 'react-native'
-import {logger} from '#/logger'
-
-export function useOTAUpdate() {
-  // HELPER FUNCTIONS
-  const checkForUpdate = useCallback(async () => {
-    logger.debug('useOTAUpdate: Checking for update...')
-    try {
-      // Check if new OTA update is available
-      const update = await Updates.checkForUpdateAsync()
-      // If updates aren't available stop the function execution
-      if (!update.isAvailable) {
-        return
-      }
-      // Otherwise fetch the update in the background, so even if the user rejects switching to latest version it will be done automatically on next relaunch.
-      await Updates.fetchUpdateAsync()
-    } catch (e) {
-      logger.error('useOTAUpdate: Error while checking for update', {
-        message: e,
-      })
-    }
-  }, [])
-  const updateEventListener = useCallback((event: Updates.UpdateEvent) => {
-    logger.debug('useOTAUpdate: Listening for update...')
-    if (event.type === Updates.UpdateEventType.ERROR) {
-      logger.error('useOTAUpdate: Error while listening for update', {
-        message: event.message,
-      })
-    } else if (event.type === Updates.UpdateEventType.NO_UPDATE_AVAILABLE) {
-      // Handle no update available
-      // do nothing
-    } else if (event.type === Updates.UpdateEventType.UPDATE_AVAILABLE) {
-      // Handle update available
-      // open modal, ask for user confirmation, and reload the app
-    }
-  }, [])
-
-  useEffect(() => {
-    // ADD EVENT LISTENERS
-    const updateEventSubscription = Updates.addListener(updateEventListener)
-    const appStateSubscription = AppState.addEventListener('change', state => {
-      if (state === 'active' && !__DEV__) {
-        checkForUpdate()
-      }
-    })
-
-    // REMOVE EVENT LISTENERS (CLEANUP)
-    return () => {
-      updateEventSubscription.remove()
-      appStateSubscription.remove()
-    }
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-  // disable exhaustive deps because we don't want to run this effect again
-}

src/view/com/pager/PagerWithHeader.tsx

@@ -109,7 +109,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       ],
     )
 
-    const scrollRefs = useSharedValue<AnimatedRef<any>[]>([])
+    const scrollRefs = useSharedValue<Array<AnimatedRef<any> | null>>([])
     const registerRef = React.useCallback(
       (scrollRef: AnimatedRef<any> | null, atIndex: number) => {
         scrollRefs.modify(refs => {
@@ -130,8 +130,9 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
         lastForcedScrollY.value = forcedScrollY
         const refs = scrollRefs.value
         for (let i = 0; i < refs.length; i++) {
-          if (i !== currentPage && refs[i] != null) {
-            scrollTo(refs[i], 0, forcedScrollY, false)
+          const scollRef = refs[i]
+          if (i !== currentPage && scollRef != null) {
+            scrollTo(scollRef, 0, forcedScrollY, false)
           }
         }
       }

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

@@ -14,6 +14,7 @@
 
 import React from 'react'
 import {
+  FlatList,
   FlatListProps,
   ScrollViewProps,
   StyleSheet,
@@ -67,7 +68,7 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl<ItemT>(
     desktopFixedHeight,
     ...props
   }: React.PropsWithChildren<FlatListProps<ItemT> & AddedProps>,
-  ref: React.Ref<Animated.FlatList<ItemT>>,
+  ref: React.Ref<FlatList<ItemT>>,
 ) {
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()

src/view/screens/LanguageSettings.tsx

@@ -1,27 +1,28 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-import {Text} from '../com/util/text/Text'
-import {s} from 'lib/styles'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {ViewHeader} from 'view/com/util/ViewHeader'
-import {CenteredView} from 'view/com/util/Views'
-import {Button} from 'view/com/util/forms/Button'
+import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
-import {useAnalytics} from 'lib/analytics/analytics'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
-import {APP_LANGUAGES, LANGUAGES} from 'lib/../locale/languages'
-import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
-import {useSetMinimalShellMode} from '#/state/shell'
+
+import {sanitizeAppLanguageSetting} from '#/locale/helpers'
 import {useModalControls} from '#/state/modals'
 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {sanitizeAppLanguageSetting} from '#/locale/helpers'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {APP_LANGUAGES, LANGUAGES} from 'lib/../locale/languages'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
+import {s} from 'lib/styles'
+import {Button} from 'view/com/util/forms/Button'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {CenteredView} from 'view/com/util/Views'
+import {Text} from '../com/util/text/Text'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
 
@@ -132,9 +133,10 @@ export function LanguageSettingsScreen(_props: Props) {
                   paddingVertical: 8,
                   borderRadius: 24,
                 },
+
                 inputWeb: {
-                  // @ts-ignore web only
                   cursor: 'pointer',
+                  // @ts-ignore web only
                   '-moz-appearance': 'none',
                   '-webkit-appearance': 'none',
                   appearance: 'none',
@@ -224,8 +226,8 @@ export function LanguageSettingsScreen(_props: Props) {
                   borderRadius: 24,
                 },
                 inputWeb: {
-                  // @ts-ignore web only
                   cursor: 'pointer',
+                  // @ts-ignore web only
                   '-moz-appearance': 'none',
                   '-webkit-appearance': 'none',
                   appearance: 'none',

src/view/screens/Search/Search.tsx

@@ -739,8 +739,8 @@ let SearchInputBox = ({
       style={[
         {backgroundColor: pal.colors.backgroundLight},
         styles.headerSearchContainer,
+        // @ts-expect-error web only
         isWeb && {
-          // @ts-ignore web only
           cursor: 'default',
         },
       ]}