Upgrade @types/react to 19 and run codemod (attempt 2) (#8918)

* update dependencies

* rm `import type React from 'react'`

* run codemods

* patch discord types

* update types/react-dom

* Update yarn.lock

src/view/com/composer/Composer.tsx

@@ -174,7 +174,7 @@ export const ComposePost = ({
   videoUri: initVideoUri,
   cancelRef,
 }: Props & {
-  cancelRef?: React.RefObject<CancelRef>
+  cancelRef?: React.RefObject<CancelRef | null>
 }) => {
   const {currentAccount} = useSession()
   const agent = useAgent()

src/view/com/composer/photos/EditImageDialog.tsx

@@ -1,5 +1,3 @@
-import type React from 'react'
-
 import {type ComposerImage} from '#/state/gallery'
 import type * as Dialog from '#/components/Dialog'
 

src/view/com/composer/photos/EditImageDialog.web.tsx

@@ -112,7 +112,7 @@ function EditImageInner({
   aspectRatio,
 }: Required<Pick<EditImageDialogProps, 'image'>> &
   Omit<EditImageDialogProps, 'control' | 'image'> & {
-    saveRef: React.RefObject<{save: () => Promise<void>}>
+    saveRef: React.RefObject<{save: () => Promise<void>} | null>
   }) {
   const t = useTheme()
   const [isDragging, setIsDragging] = useState(false)

src/view/com/feeds/FeedPage.tsx

@@ -1,4 +1,11 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {
+  type JSX,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {View} from 'react-native'
 import {type AppBskyActorDefs, AppBskyFeedDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'

src/view/com/home/HomeHeaderLayout.web.tsx

@@ -1,7 +1,8 @@
-import React from 'react'
+import {type JSX} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import type React from 'react'
 
 import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useSession} from '#/state/session'

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -1,3 +1,4 @@
+import {type JSX} from 'react'
 import {View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {msg} from '@lingui/macro'

src/view/com/lists/ListMembers.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React, {type JSX, useCallback} from 'react'
 import {
   Dimensions,
   type GestureResponderEvent,

src/view/com/lists/MyLists.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
+import React, {type JSX} from 'react'
 import {
   ActivityIndicator,
   FlatList as RNFlatList,
   RefreshControl,
-  StyleProp,
+  type StyleProp,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
-import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
+import {type AppBskyGraphDefs as GraphDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -16,7 +16,7 @@ import {cleanError} from '#/lib/strings/errors'
 import {s} from '#/lib/styles'
 import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
+import {type MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
 import {atoms as a, useTheme} from '#/alf'
 import {BulletList_Stroke2_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
 import * as ListCard from '#/components/ListCard'

src/view/com/notifications/NotificationFeedItem.tsx

@@ -248,7 +248,7 @@ let NotificationFeedItem = ({
     : ''
 
   let a11yLabel = ''
-  let notificationContent: ReactElement
+  let notificationContent: ReactElement<any>
   let icon = (
     <HeartIconFilled
       size="xl"

src/view/com/pager/Pager.tsx

@@ -1,4 +1,5 @@
 import {
+  type JSX,
   memo,
   useCallback,
   useContext,

src/view/com/pager/Pager.web.tsx

@@ -1,5 +1,6 @@
 import {
   Children,
+  type JSX,
   useCallback,
   useImperativeHandle,
   useRef,

src/view/com/pager/PagerWithHeader.tsx

@@ -1,4 +1,4 @@
-import {memo, useCallback, useEffect, useRef, useState} from 'react'
+import {type JSX, memo, useCallback, useEffect, useRef, useState} from 'react'
 import {
   type LayoutChangeEvent,
   type NativeScrollEvent,

src/view/com/pager/PagerWithHeader.web.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react'
-import {ScrollView, View} from 'react-native'
+import {type JSX} from 'react'
+import {type ScrollView, View} from 'react-native'
 import {useAnimatedRef} from 'react-native-reanimated'
 
-import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager'
+import {
+  Pager,
+  type PagerRef,
+  type RenderTabBarFnProps,
+} from '#/view/com/pager/Pager'
 import {atoms as a, web} from '#/alf'
 import * as Layout from '#/components/Layout'
-import {ListMethods} from '../util/List'
+import {type ListMethods} from '../util/List'
 import {TabBar} from './TabBar'
 
 export interface PagerWithHeaderChildParams {

src/view/com/pager/TabBar.web.tsx

@@ -106,7 +106,9 @@ export function TabBar({
             <PressableWithHover
               testID={`${testID}-selector-${i}`}
               key={`${item}-${i}`}
-              ref={node => (itemRefs.current[i] = node as any)}
+              ref={node => {
+                itemRefs.current[i] = node as any
+              }}
               style={styles.item}
               hoverStyle={t.atoms.bg_contrast_25}
               onPress={() => onPressItem(i)}

src/view/com/posts/PostFeed.tsx

@@ -1,4 +1,12 @@
-import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {
+  type JSX,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {
   ActivityIndicator,
   AppState,

src/view/com/util/EventStopper.tsx

@@ -1,5 +1,4 @@
 import {View, type ViewStyle} from 'react-native'
-import type React from 'react'
 
 /**
  * This utility function captures events and stops

src/view/com/util/Link.tsx

@@ -1,4 +1,4 @@
-import {memo, useCallback, useMemo} from 'react'
+import {type JSX, memo, useCallback, useMemo} from 'react'
 import {
   type GestureResponderEvent,
   Platform,

src/view/com/util/List.tsx

@@ -57,7 +57,7 @@ let List = React.forwardRef<ListMethods, ListProps>(
       ...props
     },
     ref,
-  ): React.ReactElement => {
+  ): React.ReactElement<any> => {
     const isScrolledDown = useSharedValue(false)
     const t = useTheme()
     const dedupe = useDedupe(400)

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

@@ -1,4 +1,10 @@
-import React, {isValidElement, memo, startTransition, useRef} from 'react'
+import React, {
+  isValidElement,
+  type JSX,
+  memo,
+  startTransition,
+  useRef,
+} from 'react'
 import {
   type FlatListProps,
   StyleSheet,
@@ -202,6 +208,7 @@ function ListImpl<ItemT>(
             behavior: animated ? 'smooth' : 'instant',
           })
         },
+
         scrollToEnd({animated = true}: {animated?: boolean}) {
           const element = getScrollableNode()
           element?.scrollTo({
@@ -382,10 +389,10 @@ function EdgeVisibility({
   containerRef,
   onVisibleChange,
 }: {
-  root?: React.RefObject<HTMLDivElement> | null
+  root?: React.RefObject<HTMLDivElement | null> | null
   topMargin?: string
   bottomMargin?: string
-  containerRef: React.RefObject<Element>
+  containerRef: React.RefObject<Element | null>
   onVisibleChange: (isVisible: boolean) => void
 }) {
   const [containerHeight, setContainerHeight] = React.useState(0)
@@ -404,7 +411,7 @@ function EdgeVisibility({
 }
 
 function useResizeObserver(
-  ref: React.RefObject<Element>,
+  ref: React.RefObject<Element | null>,
   onResize: undefined | ((w: number, h: number) => void),
 ) {
   const handleResize = useNonReactiveCallback(onResize ?? (() => {}))
@@ -509,7 +516,7 @@ let Visibility = ({
   onVisibleChange,
   style,
 }: {
-  root?: React.RefObject<HTMLDivElement> | null
+  root?: React.RefObject<HTMLDivElement | null> | null
   topMargin?: string
   bottomMargin?: string
   onVisibleChange: (isVisible: boolean) => void
@@ -551,7 +558,7 @@ Visibility = React.memo(Visibility)
 
 export const List = memo(React.forwardRef(ListImpl)) as <ItemT>(
   props: ListProps<ItemT> & {ref?: React.Ref<ListMethods>},
-) => React.ReactElement
+) => React.ReactElement<any>
 
 // https://stackoverflow.com/questions/7944460/detect-safari-browser
 

src/view/com/util/PostMeta.tsx

@@ -4,7 +4,6 @@ import {type AppBskyActorDefs, type ModerationDecision} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
-import type React from 'react'
 
 import {useActorStatus} from '#/lib/actor-status'
 import {makeProfileLink} from '#/lib/routes/links'

src/view/com/util/TimeElapsed.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import {I18n} from '@lingui/core'
+import React, {type JSX} from 'react'
+import {type I18n} from '@lingui/core'
 import {useLingui} from '@lingui/react'
 
 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'

src/view/com/util/ViewHeader.tsx

@@ -1,3 +1,5 @@
+import {type JSX} from 'react'
+
 import {Header} from '#/components/Layout'
 
 /**

src/view/com/util/ViewSelector.tsx

@@ -1,7 +1,7 @@
-import React, {useEffect, useState} from 'react'
+import React, {type JSX, useEffect, useState} from 'react'
 import {
-  NativeScrollEvent,
-  NativeSyntheticEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
   Pressable,
   RefreshControl,
   ScrollView,
@@ -36,7 +36,7 @@ export const ViewSelector = React.forwardRef<
     renderItem: (item: any) => JSX.Element
     ListFooterComponent?:
       | React.ComponentType<any>
-      | React.ReactElement
+      | React.ReactElement<any>
       | null
       | undefined
     onSelectView?: (viewIndex: number) => void

src/view/com/util/fab/FABInner.tsx

@@ -1,5 +1,5 @@
-import {ComponentProps} from 'react'
-import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
+import {type ComponentProps, type JSX} from 'react'
+import {StyleSheet, type TouchableWithoutFeedback} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'

src/view/com/util/forms/NativeDropdown.web.tsx

@@ -161,7 +161,7 @@ function DropdownContent({
   menuRef,
 }: {
   items: DropdownItem[]
-  menuRef: React.RefObject<HTMLDivElement>
+  menuRef: React.RefObject<HTMLDivElement | null>
 }) {
   const pal = usePalette('default')
   const theme = useTheme()

src/view/com/util/images/Gallery.tsx

@@ -4,7 +4,6 @@ import {Image, type ImageStyle} from 'expo-image'
 import {type AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {type Dimensions} from '#/lib/media/types'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'

src/view/screens/Storybook/Dialogs.tsx

@@ -22,7 +22,7 @@ export function Dialogs() {
     React.useState<boolean>()
   const [shouldRenderUnmountTest, setShouldRenderUnmountTest] =
     React.useState(false)
-  const unmountTestInterval = React.useRef<number>()
+  const unmountTestInterval = React.useRef<number>(undefined)
 
   const onUnmountTestStartPressWithClose = () => {
     setShouldRenderUnmountTest(true)

src/view/shell/Drawer.tsx

@@ -1,4 +1,4 @@
-import React, {type ComponentProps} from 'react'
+import React, {type ComponentProps, type JSX} from 'react'
 import {Linking, ScrollView, TouchableOpacity, View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Plural, plural, Trans} from '@lingui/macro'

src/view/shell/bottom-bar/BottomBar.tsx

@@ -1,4 +1,4 @@
-import {useCallback} from 'react'
+import {type JSX, useCallback} from 'react'
 import {type GestureResponderEvent, View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -230,7 +230,7 @@ export function BottomBarWeb() {
 }
 
 const NavItem: React.FC<{
-  children: (props: {isActive: boolean}) => React.ReactChild
+  children: (props: {isActive: boolean}) => React.ReactNode
   href: string
   routeName: string
   hasNew?: boolean

src/view/shell/desktop/LeftNav.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useMemo, useState} from 'react'
+import {type JSX, useCallback, useMemo, useState} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg, plural, Trans} from '@lingui/macro'