Enable React Native strict TypeScript API (#11459)

src/view/com/pager/DraggableScrollView.tsx

@@ -9,7 +9,7 @@ export function DraggableScrollView({
   style,
   ...props
 }: ComponentPropsWithRef<typeof ScrollView>) {
-  const {refs} = useDraggableScroll<ScrollView>({
+  const {refs} = useDraggableScroll<React.ComponentRef<typeof ScrollView>>({
     outerRef: ref,
     cursor: 'grab', // optional, default
   })

src/view/com/pager/PagerWithHeader.tsx

@@ -31,7 +31,9 @@ import {TabBar} from './TabBar'
 export interface PagerWithHeaderChildParams {
   headerHeight: number
   isFocused: boolean
-  scrollElRef: React.MutableRefObject<ListMethods | ScrollView | null>
+  scrollElRef: React.MutableRefObject<
+    ListMethods | React.ComponentRef<typeof ScrollView> | null
+  >
 }
 
 export interface PagerWithHeaderProps {
@@ -269,7 +271,7 @@ let PagerTabBar = ({
       ],
     }
   })
-  const headerRef = useRef<View>(null)
+  const headerRef = useRef<React.ComponentRef<typeof View>>(null)
   const fallbackHeaderOnlyHeight = useRef(0)
   return (
     <Animated.View
@@ -378,7 +380,7 @@ function PagerItem({
         headerHeight,
         isFocused,
         scrollElRef: scrollElRef as React.MutableRefObject<
-          ListMethods | ScrollView | null
+          ListMethods | React.ComponentRef<typeof ScrollView> | null
         >,
       })}
     </ScrollProvider>

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

@@ -16,7 +16,9 @@ import {TabBar} from './TabBar'
 export interface PagerWithHeaderChildParams {
   headerHeight: number
   isFocused: boolean
-  scrollElRef: React.MutableRefObject<ListMethods | ScrollView | null>
+  scrollElRef: React.MutableRefObject<
+    ListMethods | React.ComponentRef<typeof ScrollView> | null
+  >
 }
 
 export interface PagerWithHeaderProps {
@@ -180,7 +182,7 @@ function PagerItem({
     headerHeight: 0,
     isFocused,
     scrollElRef: scrollElRef as React.MutableRefObject<
-      ListMethods | ScrollView | null
+      ListMethods | React.ComponentRef<typeof ScrollView> | null
     >,
   })
 }

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

@@ -38,7 +38,7 @@ export function TabBar({
   onPressSelected,
 }: TabBarProps) {
   const t = useTheme()
-  const scrollElRef = useRef<ScrollView>(null)
+  const scrollElRef = useRef<React.ComponentRef<typeof ScrollView>>(null)
   const itemRefs = useRef<Array<Element>>([])
   const {gtMobile} = useBreakpoints()
   const styles = gtMobile ? desktopStyles : mobileStyles
@@ -47,7 +47,8 @@ export function TabBar({
     // On the web, the primary interaction is tapping.
     // Scrolling under tap feels disorienting so only adjust the scroll offset
     // when tapping on an item out of view--and we adjust by almost an entire page.
-    const parent = scrollElRef?.current?.getScrollableNode?.()
+    const parent = scrollElRef.current?.getScrollableNode?.() as unknown as
+      HTMLElement | undefined
     if (!parent) {
       return
     }