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