Enable React Native strict TypeScript API (#11459)

src/view/com/auth/SplashScreen.tsx

@@ -11,14 +11,14 @@ import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
-// @ts-ignore
+// @ts-expect-error
 import splashImagePointer from '../../../../assets/illustrations/illustration-mobile.png'
-// @ts-ignore
+// @ts-expect-error
 import darkSplashImagePointer from '../../../../assets/illustrations/illustration-mobile-dark.png'
-const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri
+const splashImageUri = RNImage.resolveAssetSource(splashImagePointer)!.uri
 const darkSplashImageUri = RNImage.resolveAssetSource(
   darkSplashImagePointer,
-).uri
+)!.uri
 
 export const SplashScreen = ({
   onPressSignin,

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

@@ -73,7 +73,6 @@ export const SplashScreen = ({
           style={[
             a.h_full,
             a.justify_center,
-            // @ts-expect-error web only
             {paddingBottom: '20vh'},
             IS_WEB_MOBILE && a.pb_5xl,
             t.atoms.border_contrast_medium,

src/view/com/composer/drafts/DraftItem.tsx

@@ -1,5 +1,5 @@
 import {useCallback, useEffect, useMemo, useState} from 'react'
-import {Pressable, View} from 'react-native'
+import {View} from 'react-native'
 import * as VideoThumbnails from 'expo-video-thumbnails'
 import {msg, plural} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -15,6 +15,7 @@ import {DotGrid3x1_Stroke2_Corner0_Rounded as DotsIcon} from '#/components/icons
 import {CloseQuote_Stroke2_Corner0_Rounded as CloseQuoteIcon} from '#/components/icons/Quote'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 import * as MediaPreview from '#/components/MediaPreview'
+import {Pressable} from '#/components/Pressable'
 import * as Prompt from '#/components/Prompt'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'

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

@@ -162,7 +162,7 @@ const GalleryItem = ({
   const editControl = Dialog.useDialogControl()
   const [altBtnViewTag, setAltBtnViewTag] = useState<number>()
 
-  const altBtnRef = (node: View | null) => {
+  const altBtnRef = (node: React.ComponentRef<typeof View> | null) => {
     // for iOS 26 fluid transition
     if (IS_IOS && node) {
       const tag = findNodeHandle(node)

src/view/com/composer/text-input/TextInput.tsx

@@ -50,7 +50,7 @@ export function TextInput({
 }: TextInputProps) {
   const {t: l} = useLingui()
   const {theme: t, fonts} = useAlf()
-  const textInput = useRef<RNTextInput>(null)
+  const textInput = useRef<React.ComponentRef<typeof RNTextInput>>(null)
   const textInputSelection = useRef<Selection>({start: 0, end: 0})
   const theme = useTheme()
   const [autocompletePrefix, setAutocompletePrefix] = useState('')
@@ -177,10 +177,10 @@ export function TextInput({
      * Android impl of `PasteInput` doesn't support the array syntax for `fontVariant`
      */
     if (IS_ANDROID) {
-      // @ts-ignore
-      style.fontVariant = style.fontVariant
-        ? style.fontVariant.join(' ')
-        : undefined
+      style.fontVariant =
+        typeof style.fontVariant === 'string'
+          ? style.fontVariant
+          : style.fontVariant?.join(' ')
     }
     return style
   }, [t, fonts])

src/view/com/composer/text-input/TextInput.web.tsx

@@ -344,7 +344,7 @@ export function TextInput({
   return (
     <>
       <View style={[styles.container, hasRightPadding && styles.rightPadding]}>
-        {/* @ts-ignore inputStyle is fine */}
+        {/* @ts-expect-error inputStyle is fine */}
         <EditorContent editor={editor} style={inputStyle} />
       </View>
 
@@ -479,7 +479,7 @@ const styles = StyleSheet.create({
     pointerEvents: 'none',
     alignItems: 'center',
     justifyContent: 'center',
-    // @ts-ignore web only -prf
+    // @ts-expect-error web only -prf
     position: 'fixed',
     padding: 16,
     top: 0,
@@ -488,7 +488,6 @@ const styles = StyleSheet.create({
     right: 0,
   },
   dropModal: {
-    // @ts-ignore web only
     boxShadow: 'rgba(0, 0, 0, 0.3) 0px 5px 20px',
     padding: 8,
     borderWidth: 1,

src/view/com/composer/text-input/web/Autocomplete.tsx

@@ -58,7 +58,7 @@ export function createSuggestion({
             return
           }
 
-          // @ts-ignore getReferenceClientRect doesnt like that clientRect can return null -prf
+          // @ts-expect-error getReferenceClientRect doesnt like that clientRect can return null -prf
           popup = tippy('body', {
             getReferenceClientRect: props.clientRect,
             appendTo: () => document.body,
@@ -78,7 +78,7 @@ export function createSuggestion({
           }
 
           popup?.[0]?.setProps({
-            // @ts-ignore getReferenceClientRect doesnt like that clientRect can return null -prf
+            // @ts-expect-error getReferenceClientRect doesnt like that clientRect can return null -prf
             getReferenceClientRect: props.clientRect,
           })
         },

src/view/com/composer/videos/VideoTranscodeBackdrop.web.tsx

@@ -1,6 +1,6 @@
 import {type QueryClient} from '@tanstack/react-query'
 
-import {atoms as a, flatten} from '#/alf'
+import {atoms as a, flattenToCSS} from '#/alf'
 
 export function clearThumbnailCache(_queryClient: QueryClient) {
   // no-op on web
@@ -10,7 +10,7 @@ export function VideoTranscodeBackdrop({uri}: {uri: string}) {
   return (
     <video
       src={uri}
-      style={flatten([
+      style={flattenToCSS([
         a.absolute,
         a.inset_0,
         a.h_full,

src/view/com/feeds/ComposerPrompt.tsx

@@ -145,7 +145,6 @@ export function ComposerPrompt() {
   return (
     <Pressable
       onPress={onPress}
-      android_ripple={null}
       accessibilityRole="button"
       accessibilityLabel={_(msg`Compose new post`)}
       accessibilityHint={_(msg`Opens the post composer`)}

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
     }

src/view/com/post-thread/PostQuotes.tsx

@@ -135,7 +135,6 @@ export function PostQuotes({uri}: {uri: string}) {
           endMessageText={_(msg`That's all, folks!`)}
         />
       }
-      // @ts-ignore our .web version only -prf
       desktopFixedHeight
       initialNumToRender={initialNumToRender}
       windowSize={11}

src/view/com/post-thread/PostRepostedBy.tsx

@@ -115,7 +115,6 @@ export function PostRepostedBy({uri}: {uri: string}) {
           onRetry={fetchNextPage}
         />
       }
-      // @ts-ignore our .web version only -prf
       desktopFixedHeight
       initialNumToRender={initialNumToRender}
       windowSize={11}

src/view/com/post/Post.tsx

@@ -276,7 +276,6 @@ const styles = StyleSheet.create({
     paddingRight: 15,
     paddingBottom: 5,
     paddingLeft: 10,
-    // @ts-ignore web only -prf
     cursor: 'pointer',
   },
   layout: {

src/view/com/profile/ProfileFollowers.tsx

@@ -246,7 +246,6 @@ export function ProfileFollowers({name}: {name: string}) {
               onRetry={fetchNextPage}
             />
           }
-          // @ts-ignore our .web version only -prf
           desktopFixedHeight
           initialNumToRender={initialNumToRender}
           windowSize={11}

src/view/com/profile/ProfileFollows.tsx

@@ -229,7 +229,6 @@ export function ProfileFollows({name}: {name: string}) {
           onRetry={fetchNextPage}
         />
       }
-      // @ts-ignore our .web version only -prf
       desktopFixedHeight
       initialNumToRender={initialNumToRender}
       windowSize={11}

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

@@ -1,6 +1,6 @@
-import {type AlertButton, type AlertStatic} from 'react-native'
+import {type Alert as RNAlert, type AlertButton} from 'react-native'
 
-class WebAlert implements Pick<AlertStatic, 'alert'> {
+class WebAlert implements Pick<typeof RNAlert, 'alert'> {
   public alert(title: string, message?: string, buttons?: AlertButton[]): void {
     if (buttons === undefined || buttons.length === 0) {
       window.alert([title, message].filter(Boolean).join('\n'))

src/view/com/util/EventStopper.tsx

@@ -22,7 +22,6 @@ export function EventStopper({
     <View
       onStartShouldSetResponder={_ => true}
       onTouchEnd={stop}
-      // @ts-ignore web only -prf
       onClick={stop}
       onKeyDown={onKeyDown ? stop : undefined}
       style={style}>

src/view/com/util/Link.tsx

@@ -131,13 +131,13 @@ export const Link = memo(function Link({
               onAccessibilityAction?.(e)
             }
           }}
-          // @ts-ignore web only -sfn
+          // @ts-expect-error web only -sfn
           dataSet={dataSet}
           {...props}
           android_ripple={{
             color: t.atoms.bg_contrast_25.backgroundColor,
           }}>
-          {/* @ts-ignore web only -prf */}
+          {/* @ts-expect-error web only -prf */}
           <View style={style} href={anchorHref}>
             {children ? children : <Text>{title || 'link'}</Text>}
           </View>
@@ -156,7 +156,7 @@ export const Link = memo(function Link({
       accessibilityRole="link"
       accessibilityLabel={props.accessibilityLabel ?? title}
       accessibilityHint={props.accessibilityHint}
-      // @ts-ignore web only -prf
+      // @ts-expect-error web only -prf
       href={anchorHref}
       dataSet={dataSet}
       {...props}>
@@ -281,7 +281,7 @@ export const TextLink = memo(function TextLink({
       lineHeight={lineHeight}
       dataSet={dataSet}
       title={title}
-      // @ts-ignore web only -prf
+      // @ts-expect-error web only -prf
       hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window
       onPress={onPress}
       accessibilityRole="link"
@@ -384,12 +384,12 @@ function onPressInner(
 ) {
   let shouldHandle = false
   const isLeftClick =
-    // @ts-ignore Web only -prf
+    // @ts-expect-error Web only -prf
     Platform.OS === 'web' && (e.button == null || e.button === 0)
-  // @ts-ignore Web only -prf
+  // @ts-expect-error Web only -prf
   const isMiddleClick = Platform.OS === 'web' && e.button === 1
   const isMetaKey =
-    // @ts-ignore Web only -prf
+    // @ts-expect-error Web only -prf
     Platform.OS === 'web' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
   const newTab = isMetaKey || isMiddleClick
 
@@ -398,7 +398,7 @@ function onPressInner(
   } else if (
     !e.defaultPrevented && // onPress prevented default
     (isLeftClick || isMiddleClick) && // ignore everything but left and middle clicks
-    // @ts-ignore Web only -prf
+    // @ts-expect-error Web only -prf
     [undefined, null, '', 'self'].includes(e.currentTarget?.target) // let browser handle "target=_blank" etc.
   ) {
     e.preventDefault()
@@ -422,10 +422,8 @@ function onPressInner(
     } else {
       const [routeName, params] = router.matchPath(href)
       if (navigationAction === 'push') {
-        // @ts-ignore we're not able to type check on this one -prf
         navigation.dispatch(StackActions.push(routeName, params))
       } else if (navigationAction === 'replace') {
-        // @ts-ignore we're not able to type check on this one -prf
         navigation.dispatch(StackActions.replace(routeName, params))
       } else if (navigationAction === 'navigate') {
         const state = navigation.getState()
@@ -435,7 +433,7 @@ function onPressInner(
         } else {
           // note: 'navigate' actually acts the same as 'push' nowadays
           // therefore we need to add 'pop' -sfn
-          // @ts-ignore we're not able to type check on this one -prf
+          // @ts-expect-error we're not able to type check on this one -prf
           navigation.navigate(routeName, params, {pop: true})
         }
       } else {

src/view/com/util/List.tsx

@@ -1,5 +1,5 @@
 import {forwardRef, memo, useDeferredValue, useMemo} from 'react'
-import {RefreshControl, type ViewToken} from 'react-native'
+import {type ListViewToken as ViewToken, RefreshControl} from 'react-native'
 import {
   type FlatListPropsWithLayout,
   useAnimatedScrollHandler,
@@ -173,7 +173,6 @@ let List = forwardRef<ListMethods, ListProps>(
         scrollsToTop={scrollsToTop}
         scrollEventThrottle={1}
         style={style}
-        // @ts-expect-error FlatList_INTERNAL ref type is wrong -sfn
         ref={ref}
       />
     )

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

@@ -119,7 +119,7 @@ function ListImpl<ItemT>(
     if (isValidElement(ListHeaderComponent)) {
       headerComponent = ListHeaderComponent
     } else {
-      // @ts-ignore Nah it's fine.
+      // @ts-expect-error Nah it's fine.
       headerComponent = <ListHeaderComponent />
     }
   }
@@ -129,7 +129,7 @@ function ListImpl<ItemT>(
     if (isValidElement(ListFooterComponent)) {
       footerComponent = ListFooterComponent
     } else {
-      // @ts-ignore Nah it's fine.
+      // @ts-expect-error Nah it's fine.
       footerComponent = <ListFooterComponent />
     }
   }
@@ -139,7 +139,7 @@ function ListImpl<ItemT>(
     if (isValidElement(ListEmptyComponent)) {
       emptyComponent = ListEmptyComponent
     } else {
-      // @ts-ignore Nah it's fine.
+      // @ts-expect-error Nah it's fine.
       emptyComponent = <ListEmptyComponent />
     }
   }
@@ -407,7 +407,7 @@ function ListImpl<ItemT>(
           overflowY: isWithinSplitView ? 'auto' : 'scroll',
         },
       ]}
-      ref={nativeRef as unknown as React.RefObject<View>}>
+      ref={nativeRef as unknown as React.Ref<React.ComponentRef<typeof View>>}>
       <Visibility
         onVisibleChange={setIsInsideVisibleTree}
         style={
@@ -793,11 +793,10 @@ export const List = memo(forwardRef(ListImpl)) as <ItemT>(
 
 const styles = StyleSheet.create({
   minHeightViewport: {
-    // @ts-ignore web only
     minHeight: '100vh',
   },
   parentTreeVisibilityDetector: {
-    // @ts-ignore web only
+    // @ts-expect-error web only
     position: 'fixed',
     top: 0,
     left: 0,

src/view/com/util/PressableWithHover.tsx

@@ -1,26 +1,19 @@
-import {forwardRef, type PropsWithChildren} from 'react'
-import {
-  Pressable,
-  type PressableProps,
-  type StyleProp,
-  type View,
-  type ViewStyle,
-} from 'react-native'
+import {Pressable, type StyleProp, type ViewStyle} from 'react-native'
 
 import {addStyle} from '#/lib/styles'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 
-interface PressableWithHover extends PressableProps {
+interface PressableWithHoverProps extends React.ComponentPropsWithRef<Pressable> {
   hoverStyle: StyleProp<ViewStyle>
 }
 
-export const PressableWithHover = forwardRef<
-  View,
-  PropsWithChildren<PressableWithHover>
->(function PressableWithHoverImpl(
-  {children, style, hoverStyle, ...props},
+export function PressableWithHover({
   ref,
-) {
+  children,
+  style,
+  hoverStyle,
+  ...props
+}: PressableWithHoverProps) {
   const {
     state: hovered,
     onIn: onHoverIn,
@@ -41,4 +34,4 @@ export const PressableWithHover = forwardRef<
       {children}
     </Pressable>
   )
-})
+}

src/view/com/util/Views.tsx

@@ -1,7 +1,6 @@
 import {forwardRef, memo} from 'react'
-import {type FlatListComponent, View, type ViewProps} from 'react-native'
+import {View, type ViewProps} from 'react-native'
 import Animated from 'react-native-reanimated'
-import {type FlatListPropsWithLayout} from 'react-native-reanimated'
 
 // If you explode these into functions, don't forget to forwardRef!
 
@@ -10,22 +9,19 @@ import {type FlatListPropsWithLayout} from 'react-native-reanimated'
  * The types are a bit wrong on `FlatList_INTERNAL`
  */
 export const FlatList_INTERNAL = memo(Animated.FlatList)
-export type FlatList_INTERNAL<ItemT = any> = Omit<
-  FlatListComponent<ItemT, FlatListPropsWithLayout<ItemT>>,
-  'CellRendererComponent'
->
+export type FlatList_INTERNAL = React.ComponentRef<typeof Animated.FlatList>
 
 /**
  * @deprecated use `Layout` components
  */
 export const ScrollView = Animated.ScrollView
-export type ScrollView = typeof Animated.ScrollView
+export type ScrollView = React.ComponentRef<typeof Animated.ScrollView>
 
 /**
  * @deprecated use `Layout` components
  */
 export const CenteredView = forwardRef<
-  View,
+  React.ComponentRef<typeof View>,
   React.PropsWithChildren<
     ViewProps & {sideBorders?: boolean; topBorder?: boolean}
   >

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

@@ -14,7 +14,6 @@
 
 import {forwardRef} from 'react'
 import {
-  type FlatList,
   type FlatListProps,
   type ScrollViewProps,
   StyleSheet,
@@ -45,7 +44,7 @@ export const CenteredView = forwardRef(function CenteredView(
   }: React.PropsWithChildren<
     ViewProps & {sideBorders?: boolean; topBorder?: boolean}
   >,
-  ref: React.Ref<View>,
+  ref: React.Ref<React.ComponentRef<typeof View>>,
 ) {
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()
@@ -76,7 +75,7 @@ export const FlatList_INTERNAL = forwardRef(function FlatListImpl<ItemT>(
   }: React.PropsWithChildren<
     Omit<FlatListProps<ItemT>, 'CellRendererComponent'> & AddedProps
   >,
-  ref: React.Ref<FlatList<ItemT>>,
+  ref: React.Ref<React.ComponentRef<typeof Animated.FlatList>>,
 ) {
   const {isMobile} = useWebMediaQueries()
   const {centerColumnOffset} = useLayoutBreakpoints()
@@ -105,7 +104,6 @@ export const FlatList_INTERNAL = forwardRef(function FlatListImpl<ItemT>(
   }
   if (desktopFixedHeight) {
     if (typeof desktopFixedHeight === 'number') {
-      // @ts-expect-error Web only -prf
       style = addStyle(style, {
         height: `calc(100vh - ${desktopFixedHeight}px)`,
       })
@@ -143,7 +141,7 @@ export const FlatList_INTERNAL = forwardRef(function FlatListImpl<ItemT>(
  */
 export const ScrollView = forwardRef(function ScrollViewImpl(
   {contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
-  ref: React.Ref<Animated.ScrollView>,
+  ref: React.Ref<React.ComponentRef<typeof Animated.ScrollView>>,
 ) {
   const {isMobile} = useWebMediaQueries()
   const {centerColumnOffset} = useLayoutBreakpoints()
@@ -170,7 +168,6 @@ export const ScrollView = forwardRef(function ScrollViewImpl(
 
 const styles = StyleSheet.create({
   contentContainer: {
-    // @ts-expect-error web only
     minHeight: '100vh',
   },
   container: {
@@ -189,7 +186,6 @@ const styles = StyleSheet.create({
     marginRight: 'auto',
   },
   fixedHeight: {
-    // @ts-expect-error web only
     height: '100vh',
   },
 })

src/view/com/util/WebAuxClickWrapper.tsx

@@ -21,7 +21,7 @@ export function WebAuxClickWrapper({children}: React.PropsWithChildren<{}>) {
   if (Platform.OS !== 'web') return children
 
   return (
-    // @ts-ignore web only
+    // @ts-expect-error web only
     <div onMouseDown={onMouseDown} onMouseUp={onMouseUp}>
       {children}
     </div>

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

@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
     borderRadius: 35,
   },
   outer: {
-    // @ts-ignore web-only
+    // @ts-expect-error web-only
     position: IS_WEB ? 'fixed' : 'absolute',
     zIndex: 1,
     cursor: 'pointer',

src/view/com/util/forms/Button.tsx

@@ -4,8 +4,6 @@ import {
   type GestureResponderEvent,
   type NativeSyntheticEvent,
   type NativeTouchEvent,
-  Pressable,
-  type PressableStateCallbackType,
   type StyleProp,
   StyleSheet,
   type TextStyle,
@@ -15,6 +13,10 @@ import {
 
 import {choose} from '#/lib/functions'
 import {useTheme} from '#/lib/ThemeContext'
+import {
+  Pressable,
+  type PressableStateCallbackType,
+} from '#/components/Pressable'
 import {Text} from '../text/Text'
 
 export type ButtonType =
@@ -28,15 +30,6 @@ export type ButtonType =
   | 'secondary-light'
   | 'default-light'
 
-// Augment type for react-native-web (see https://github.com/necolas/react-native-web/issues/1684#issuecomment-766451866)
-declare module 'react-native' {
-  interface PressableStateCallbackType {
-    // @ts-ignore web only
-    hovered?: boolean
-    focused?: boolean
-  }
-}
-
 /**
  * @deprecated use Button from `#/components/Button.tsx` instead
  */

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

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

src/view/com/util/listNativeTag.ts

@@ -8,5 +8,5 @@ import {type ListMethods} from './List'
  */
 export function findListNativeTag(list: ListMethods | null): number | null {
   if (!list) return null
-  return findNodeHandle(list)
+  return findNodeHandle(list) ?? null
 }

src/view/com/util/text/Text.tsx

@@ -5,7 +5,7 @@ import {UITextView} from '@bsky.app/react-native-uitextview'
 import {lh, s} from '#/lib/styles'
 import {type TypographyVariant, useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
-import {applyFonts, useAlf} from '#/alf'
+import {applyFonts, type MutableTextStyle, useAlf} from '#/alf'
 import {
   childHasEmoji,
   renderChildrenWithEmoji,
@@ -61,21 +61,15 @@ function Text_DEPRECATED({
     const typography = theme.typography[type]
     const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
 
-    const flattened = StyleSheet.flatten([
-      s.black,
-      typography,
-      lineHeightStyle,
-      style,
-    ])
+    const flattened: MutableTextStyle = {
+      ...(StyleSheet.flatten([s.black, typography, lineHeightStyle, style]) ??
+        {}),
+    }
 
     applyFonts(flattened, fonts.family)
 
-    // should always be defined on `typography`
-    // @ts-ignore
     if (flattened.fontSize) {
-      // @ts-ignore
       flattened.fontSize = Math.round(
-        // @ts-ignore
         flattened.fontSize * fonts.scaleMultiplier,
       )
     }

src/view/icons/Logo.tsx

@@ -29,7 +29,7 @@ export const Logo = forwardRef(function LogoImpl(props: Props, ref) {
   const _fill = gradient
     ? 'url(#sky)'
     : fill || styles?.color || t.palette.primary_500
-  // @ts-ignore it's fiiiiine
+  // @ts-expect-error it's fiiiiine
   const size = parseInt(rest.width || 32, 10)
 
   const logoVariant = useLogoVariant(allowVariants)
@@ -56,7 +56,7 @@ export const Logo = forwardRef(function LogoImpl(props: Props, ref) {
   return (
     <Svg
       fill="none"
-      // @ts-ignore it's fiiiiine
+      // @ts-expect-error it's fiiiiine
       ref={ref}
       viewBox="0 0 64 57"
       {...rest}

src/view/icons/Logomark.tsx

@@ -9,7 +9,7 @@ export function Logomark({
   ...rest
 }: {fill?: PathProps['fill']} & SvgProps) {
   const pal = usePalette('default')
-  // @ts-ignore it's fiiiiine
+  // @ts-expect-error it's fiiiiine
   const size = parseInt(rest.width || 32)
 
   return (

src/view/icons/Logotype.tsx

@@ -9,7 +9,7 @@ export function Logotype({
   ...rest
 }: {fill?: PathProps['fill']} & SvgProps) {
   const pal = usePalette('default')
-  // @ts-ignore it's fiiiiine
+  // @ts-expect-error it's fiiiiine
   const size = parseInt(rest.width || 32)
 
   return (

src/view/screens/DebugMod.tsx

@@ -1160,10 +1160,10 @@ function MockAccountScreen({
         screenDescription={_(msg`profile`)}
         modui={moderation.ui('profileView')}>
         <ProfileHeaderStandard
-          // @ts-ignore ProfileViewBasic is close enough -prf
+          // @ts-expect-error ProfileViewBasic is close enough -prf
           profile={profile}
           moderationOpts={moderationOpts}
-          // @ts-ignore ProfileViewBasic is close enough -esb
+          // @ts-expect-error ProfileViewBasic is close enough -esb
           descriptionRT={new RichText({text: profile.description as string})}
         />
       </ScreenHider>

src/view/screens/Home.tsx

@@ -223,7 +223,7 @@ function HomeScreenReady({
             {...props}
             testID="homeScreenFeedTabs"
             onPressSelected={onPressSelected}
-            // @ts-ignore
+            // @ts-expect-error
             feeds={[{displayName: 'Following'}, {displayName: 'Discover'}]}
           />
         )

src/view/screens/Notifications.tsx

@@ -262,7 +262,7 @@ function NotificationsTab({
         ListHeaderComponent={
           filter === 'mentions' ? (
             <DisabledNotificationsWarning active={isFocusedAndActive} />
-          ) : null
+          ) : undefined
         }
       />
       {(isScrolledDown || hasNew) && (

src/view/screens/Profile.tsx

@@ -649,7 +649,7 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'column',
     height: '100%',
-    // @ts-ignore Web-only.
+    // @ts-expect-error Web-only.
     overflowAnchor: 'none', // Fixes jumps when switching tabs while scrolled down.
   },
   loading: {

src/view/screens/Storybook/Forms.tsx

@@ -34,7 +34,7 @@ export function Forms() {
   const [phoneNumber, setPhoneNumber] = useState('')
   const [lang, setLang] = useState('en')
 
-  const inputRef = useRef<TextInput>(null)
+  const inputRef = useRef<React.ComponentRef<typeof TextInput>>(null)
 
   return (
     <View style={[a.gap_4xl, a.align_start]}>

src/view/shell/Composer.web.tsx

@@ -88,14 +88,12 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     marginBottom: 0,
     borderWidth: 1,
-    // @ts-expect-error web only
     maxHeight: 'calc(100% - (40px * 2))',
     overflow: 'hidden',
   },
   containerMobile: {
     borderRadius: 0,
     marginBottom: BOTTOM_BAR_HEIGHT,
-    // @ts-expect-error web only
     maxHeight: `calc(100% - ${BOTTOM_BAR_HEIGHT}px)`,
   },
 })

src/view/shell/desktop/LeftNav.tsx

@@ -773,8 +773,8 @@ const styles = StyleSheet.create({
   leftNav: {
     left: '50%',
     width: LEFT_NAV_STANDARD_WIDTH,
-    // @ts-expect-error web only
     maxHeight: '100vh',
+    // @ts-expect-error web only
     overflowY: 'auto',
     scrollbarWidth: 'thin',
   },