Add web typecheck pass (tsconfig.check.web.json) and fix web type drift

The main typecheck models native resolution (.ios/.android/.native), so
.web variants were never checked in their real resolution context. Add a
second pass that roots the program at the web entry point and resolves
with moduleSuffixes [".web", ""], wire it up as pnpm typecheck:web, and
add it to the lint workflow matrix.

Ambient shims (src/platform/*.web-check.d.ts, web pass only) pin
react-native-svg, expo-file-system, and expo-image-manipulator to their
native declarations, since their .web.d.ts files expose a different API
surface than the one the app is written against (and, for
expo-file-system/legacy, raw package sources that break under suffix
remapping).

The rest fixes the drift the new pass surfaced, notably:
- List.web: ListRef now carries ListMethods (was RefObject<View>),
  scrollToOffset accepts optional animated, ListProps defaults ItemT
- Dialog.web: ScrollableInner accepts a (never-attached) ScrollView ref,
  InnerFlatList label optional + ListMethods ref, Handle accepts props
- Menu.web exports MenuControlProps; ContextMenu.web gets a properly
  typed Trigger wrapper and accepts align
- Pager/TabBar/PagerWithHeader web variants align with the shared
  contract (testID, onTabPressed, drag shared values, setMinimumHeight)
- useNavigationTabState.web now reports isAtFeeds/isAtBookmarks, fixing
  drawer highlighting for those routes on web
- Web-only throw-stubs get real signatures; duplicated prop types move
  into .shared.ts files (CaptchaWebView, EditImageDialog, OpenCameraBtn,
  GestureActionView, ValuePropositionPager)
- findListNativeTag helper replaces findNodeHandle casts on List refs
- Assorted call-site type fixes (keyExtractor params, PostQuotes record
  narrowing, saveBytesToDisk bytes param, openCamera web signature)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BCuMKXWHuyGoNhTVAHBMyk

.github/workflows/lint.yml

@@ -21,7 +21,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        job: [lint, prettier, typecheck]
+        job: [lint, prettier, typecheck, 'typecheck:web']
     steps:
       - name: Check out Git repository
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0

modules/bottom-sheet/src/BottomSheetNativeComponent.web.tsx

@@ -1,5 +1,14 @@
+import {Component} from 'react'
+
 import {type BottomSheetViewProps} from './BottomSheet.types'
 
-export function BottomSheetNativeComponent(_: BottomSheetViewProps) {
-  throw new Error('BottomSheetNativeComponent is not available on web')
+export class BottomSheetNativeComponent extends Component<BottomSheetViewProps> {
+  /*
+   * Native sheets do not exist on web; there is nothing to dismiss.
+   */
+  static dismissAll = async () => {}
+
+  render(): never {
+    throw new Error('BottomSheetNativeComponent is not available on web')
+  }
 }

package.json

@@ -63,6 +63,7 @@
     "lint-native": "swiftlint ./modules && ktlint ./modules",
     "lint-native:fix": "swiftlint --fix ./modules && ktlint --format ./modules",
     "typecheck": "tsgo --project ./tsconfig.check.json",
+    "typecheck:web": "tsgo --project ./tsconfig.check.web.json",
     "e2e:mock-server": "cd dev-env && pnpm start",
     "e2e:build": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:ios",
     "e2e:build-android": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:android",

src/components/ContextMenu/index.web.tsx

@@ -2,8 +2,9 @@ import {type StyleProp, type ViewStyle} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'
 import * as Menu from '#/components/Menu'
+import {type TriggerProps as MenuTriggerProps} from '#/components/Menu/types'
 import {Text} from '#/components/Typography'
-import {type AuxiliaryViewProps} from './types'
+import {type AuxiliaryViewProps, type TriggerProps} from './types'
 
 export {
   ContainerItem,
@@ -16,7 +17,6 @@ export {
   ItemText,
   LabelText,
   Root,
-  Trigger,
   useMenuContext as useContextMenuContext,
   useMenuControl as useContextMenuControl,
 } from '#/components/Menu'
@@ -30,14 +30,37 @@ export function AuxiliaryView({}: AuxiliaryViewProps) {
   return null
 }
 
+/*
+ * On web the context menu is just a Menu; contentLabel, onTap, style, and
+ * swipeGesture only apply to the native press-and-hold presentation.
+ */
+export function Trigger({children, label, hint, role}: TriggerProps) {
+  return (
+    <Menu.Trigger label={label} hint={hint} role={role}>
+      {/*
+       * Menu supplies the same web-arm child props shape as ContextMenu's
+       * TriggerChildProps; only the native arms of the two unions differ,
+       * and those never occur here.
+       */}
+      {children as unknown as MenuTriggerProps['children']}
+    </Menu.Trigger>
+  )
+}
+
 export function Outer({
   children,
   label,
+  align: _align,
   style,
   onCloseAutoFocus,
 }: {
   children: React.ReactNode
   label?: string
+  /**
+   * Native positions the menu against the message bubble explicitly; the web
+   * dropdown is anchored by radix, so this is accepted only for parity.
+   */
+  align?: 'left' | 'right'
   style?: StyleProp<ViewStyle>
   onCloseAutoFocus?: (event: Event) => void
 }) {

src/components/Dialog/index.web.tsx

@@ -12,6 +12,7 @@ import {
   type GestureResponderEvent,
   type LayoutChangeEvent,
   Pressable,
+  type ScrollView,
   type StyleProp,
   View,
   type ViewStyle,
@@ -24,6 +25,7 @@ import {RemoveScrollBar} from 'react-remove-scroll-bar'
 import {logger} from '#/logger'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
+import {type ListMethods} from '#/view/com/util/List'
 import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {Context} from '#/components/Dialog/context'
@@ -224,11 +226,21 @@ export function Inner({
   )
 }
 
-export const ScrollableInner = Inner
+/*
+ * There is no inner ScrollView on web - the ref is accepted for parity with
+ * the native variant and never attached, so native-only scrolling code in
+ * shared callers stays a no-op here.
+ */
+export function ScrollableInner({
+  ref: _ref,
+  ...props
+}: DialogInnerProps & {ref?: React.Ref<ScrollView>}) {
+  return <Inner {...props} />
+}
 
 export const InnerFlatList = forwardRef<
-  FlatList,
-  FlatListProps<any> & {label: string} & {
+  ListMethods,
+  FlatListProps<any> & {label?: string} & {
     webInnerStyle?: StyleProp<ViewStyle>
     webInnerContentContainerStyle?: StyleProp<ViewStyle>
     footer?: React.ReactNode
@@ -247,7 +259,11 @@ export const InnerFlatList = forwardRef<
   const {gtMobile} = useBreakpoints()
   return (
     <Inner
-      label={label}
+      /*
+       * Most shared callers cannot pass a label since the native variant has
+       * no such prop; aria-label is simply absent for them, as before.
+       */
+      label={label as string}
       style={[
         a.overflow_hidden,
         a.px_0,
@@ -256,7 +272,13 @@ export const InnerFlatList = forwardRef<
       ]}
       contentContainerStyle={[a.h_full, a.px_0, webInnerContentContainerStyle]}>
       <FlatList
-        ref={ref}
+        /*
+         * The FlatList instance satisfies the (web) ListMethods interface
+         * shared callers hold their refs as, except scrollToTop, which no
+         * platform-agnostic caller can use since the native ListMethods
+         * (FlatList) lacks it too.
+         */
+        ref={ref as React.Ref<FlatList>}
         style={[a.h_full, gtMobile ? a.px_2xl : a.px_xl, style]}
         {...props}
       />
@@ -321,7 +343,11 @@ export function Close() {
   )
 }
 
-export function Handle() {
+/*
+ * The drag handle only exists on the native bottom sheet; props are accepted
+ * for parity with the native variant.
+ */
+export function Handle(_props: {difference?: boolean; fill?: string}) {
   return null
 }
 

src/components/DraggableList/index.web.tsx

@@ -1,5 +1,7 @@
 import {useState} from 'react'
 import {View} from 'react-native'
+import type Animated from 'react-native-reanimated'
+import {type AnimatedRef, type SharedValue} from 'react-native-reanimated'
 
 import {useTheme} from '#/alf'
 import {DotGrid2x3_Stroke2_Corner0_Rounded as GripIcon} from '#/components/icons/DotGrid'
@@ -18,6 +20,10 @@ interface SortableListProps<T> {
   onDragEnd?: () => void
   /** Fixed row height used for position math. */
   itemHeight: number
+  /** Ref to the parent Animated.ScrollView for auto-scroll. Ignored on web. */
+  scrollRef?: AnimatedRef<Animated.ScrollView>
+  /** Scroll offset shared value from useScrollViewOffset. Ignored on web. */
+  scrollOffset?: SharedValue<number>
 }
 
 export function SortableList<T>({

src/components/Menu/index.web.tsx

@@ -32,6 +32,8 @@ import {
 import {Portal} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
+export {type DialogControlProps as MenuControlProps} from '#/components/Dialog'
+
 export {useMenuContext}
 
 export function useMenuControl(): Dialog.DialogControlProps {

src/components/StarterPack/Main/ProfilesList.tsx

@@ -23,7 +23,7 @@ import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import {Default as ProfileCard} from '#/components/ProfileCard'
 import {IS_NATIVE, IS_WEB} from '#/env'
 
-function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic, index: number) {
+function keyExtractor(item: AppBskyActorDefs.ProfileView, index: number) {
   return `${item.did}-${index}`
 }
 
@@ -87,7 +87,7 @@ export const ProfilesList = forwardRef<SectionRef, ProfilesListProps>(
     const renderItem = ({
       item,
       index,
-    }: ListRenderItemInfo<AppBskyActorDefs.ProfileViewBasic>) => {
+    }: ListRenderItemInfo<AppBskyActorDefs.ProfileView>) => {
       return (
         <View
           style={[

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -1,6 +1,5 @@
 import {useCallback, useEffect, useImperativeHandle, useState} from 'react'
 import {
-  findNodeHandle,
   type ListRenderItemInfo,
   type StyleProp,
   useWindowDimensions,
@@ -26,6 +25,7 @@ import {
   type EmptyStateButtonProps,
 } from '#/view/com/util/EmptyState'
 import {List, type ListRef} from '#/view/com/util/List'
+import {findListNativeTag} from '#/view/com/util/listNativeTag'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {atoms as a, ios, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -57,7 +57,7 @@ interface ProfileFeedgensProps {
   emptyStateIcon?: React.ComponentType<any> | React.ReactElement
 }
 
-function keyExtractor(item: AppBskyGraphDefs.StarterPackView) {
+function keyExtractor(item: AppBskyGraphDefs.StarterPackViewBasic) {
   return item.uri
 }
 
@@ -138,13 +138,16 @@ export function ProfileStarterPacks({
 
   useEffect(() => {
     if (IS_IOS && enabled && scrollElRef.current) {
-      const nativeTag = findNodeHandle(scrollElRef.current)
+      const nativeTag = findListNativeTag(scrollElRef.current)
       setScrollViewTag(nativeTag)
     }
   }, [enabled, scrollElRef, setScrollViewTag])
 
   const renderItem = useCallback(
-    ({item, index}: ListRenderItemInfo<AppBskyGraphDefs.StarterPackView>) => {
+    ({
+      item,
+      index,
+    }: ListRenderItemInfo<AppBskyGraphDefs.StarterPackViewBasic>) => {
       return (
         <View
           style={[

src/components/contacts/FindContactsFlow.web.tsx

@@ -1,3 +1,11 @@
-export function FindContactsFlow() {
+import {type Action, type State} from './state'
+
+export function FindContactsFlow(_props: {
+  state: State
+  dispatch: React.ActionDispatch<[Action]>
+  onBack?: () => void
+  onCancel: () => void
+  context: 'Onboarding' | 'Standalone'
+}): never {
   throw new Error('FindContactsFlow is not available on web')
 }

src/lib/custom-animations/GestureActionView.shared.ts

@@ -0,0 +1,15 @@
+import {type ColorValue} from 'react-native'
+
+export interface GestureAction {
+  color: ColorValue
+  action: () => void
+  threshold: number
+  icon: React.ElementType
+}
+
+export interface GestureActions {
+  leftFirst?: GestureAction
+  leftSecond?: GestureAction
+  rightFirst?: GestureAction
+  rightSecond?: GestureAction
+}

src/lib/custom-animations/GestureActionView.tsx

@@ -16,20 +16,7 @@ import Animated, {
 } from 'react-native-reanimated'
 
 import {useHaptics} from '#/lib/haptics'
-
-interface GestureAction {
-  color: ColorValue
-  action: () => void
-  threshold: number
-  icon: React.ElementType
-}
-
-interface GestureActions {
-  leftFirst?: GestureAction
-  leftSecond?: GestureAction
-  rightFirst?: GestureAction
-  rightSecond?: GestureAction
-}
+import {type GestureActions} from './GestureActionView.shared'
 
 const MAX_WIDTH = Dimensions.get('screen').width
 const ICON_SIZE = 32

src/lib/custom-animations/GestureActionView.web.tsx

@@ -1,3 +1,13 @@
-export function GestureActionView({children}: {children: React.ReactNode}) {
+import {type GestureActions} from './GestureActionView.shared'
+
+/*
+ * Swipe gestures only exist on native; children render as-is on web.
+ */
+export function GestureActionView({
+  children,
+}: {
+  children: React.ReactNode
+  actions: GestureActions
+}) {
   return children
 }

src/lib/hooks/useNavigationTabState.web.ts

@@ -8,6 +8,8 @@ export function useNavigationTabState() {
     return {
       isAtHome: currentRoute === 'Home',
       isAtSearch: currentRoute === 'Search',
+      isAtFeeds: currentRoute === 'Feeds',
+      isAtBookmarks: currentRoute === 'Bookmarks',
       isAtNotifications: currentRoute === 'Notifications',
       isAtMyProfile: currentRoute === 'MyProfile',
       isAtMessages: currentRoute === 'Messages',

src/lib/hooks/useOTAUpdates.web.ts

@@ -1,7 +1,7 @@
 export function useOTAUpdates() {}
 export function useApplyPullRequestOTAUpdate() {
   return {
-    tryApplyUpdate: () => {},
+    tryApplyUpdate: async (_channel: string) => {},
     revertToEmbedded: () => {},
     isCurrentlyRunningPullRequestDeployment: false,
     currentChannel: 'web-build',

src/lib/media/manip.web.ts

@@ -168,10 +168,14 @@ function createResizedImage(
 
 export async function saveBytesToDisk(
   filename: string,
-  bytes: Uint8Array<ArrayBuffer>,
+  bytes: Uint8Array,
   type: string,
 ) {
-  const blob = new Blob([bytes], {type})
+  /*
+   * Bytes handed to us are never SharedArrayBuffer-backed, but the broader
+   * Uint8Array parameter type matches the native variant.
+   */
+  const blob = new Blob([bytes as Uint8Array<ArrayBuffer>], {type})
   const url = URL.createObjectURL(blob)
   downloadUrl(url, filename)
   // Firefox requires a small delay

src/lib/media/picker.web.tsx

@@ -1,11 +1,13 @@
+import {type ImagePickerOptions} from 'expo-image-picker'
 import {type OpenCropperOptions} from '@bsky.app/expo-image-crop-tool'
 
 import {type PickerImage} from './picker.shared'
-import {type CameraOpts} from './types'
 
 export {openPicker, openUnifiedPicker} from './picker.shared'
 
-export async function openCamera(_opts: CameraOpts): Promise<PickerImage> {
+export async function openCamera(
+  _opts: ImagePickerOptions,
+): Promise<PickerImage> {
   throw new Error('openCamera is not supported on web')
 }
 

src/lib/media/types.ts

@@ -8,10 +8,3 @@ export interface PickerOpts {
   multiple?: boolean
   maxFiles?: number
 }
-
-export interface CameraOpts {
-  width: number
-  height: number
-  freeStyleCropEnabled?: boolean
-  cropperCircleOverlay?: boolean
-}

src/platform/misc.web-check.d.ts

@@ -0,0 +1,98 @@
+/*
+ * Used ONLY by the web typecheck pass (tsconfig.check.web.json) - it is not
+ * included by the main tsconfig, and it has no runtime effect. See
+ * react-native-svg.web-check.d.ts for the full background on why some
+ * packages need to be pinned to their native declarations under
+ * `moduleSuffixes: [".web", ""]`.
+ */
+
+/*
+ * Side-effect CSS imports in .web files are handled by the bundler.
+ */
+declare module '*.css'
+
+/*
+ * expo-file-system's declarations build File/Directory on top of
+ * `./ExpoFileSystem`, which remaps to a web shim whose classes are empty.
+ * The fully-typed base classes live in ExpoFileSystem.types (no .web
+ * sibling), so mirror the FileSystem.d.ts wrapper classes on top of those.
+ */
+declare module 'expo-file-system' {
+  import {
+    Directory as ExpoFileSystemDirectory,
+    File as ExpoFileSystemFile,
+  } from 'expo-file-system/build/ExpoFileSystem.types'
+  export {
+    type DirectoryCreateOptions,
+    type DirectoryInfo,
+    type DownloadOptions,
+    EncodingType,
+    type FileCreateOptions,
+    FileHandle,
+    type FileInfo,
+    type FileWriteOptions,
+    type InfoOptions,
+    type PathInfo,
+  } from 'expo-file-system/build/ExpoFileSystem.types'
+  import {type PathInfo as ExpoPathInfo} from 'expo-file-system/build/ExpoFileSystem.types'
+  import {PathUtilities} from 'expo-file-system/build/pathUtilities'
+
+  export class Paths extends PathUtilities {
+    static get cache(): Directory
+    static get bundle(): Directory
+    static get document(): Directory
+    static get appleSharedContainers(): Record<string, Directory>
+    static get totalDiskSpace(): number
+    static get availableDiskSpace(): number
+    static info(...uris: string[]): ExpoPathInfo
+  }
+
+  export class File extends ExpoFileSystemFile implements Blob {
+    constructor(...uris: (string | File | Directory)[])
+    get parentDirectory(): Directory
+    get extension(): string
+    get name(): string
+    readableStream(): ReadableStream<Uint8Array<ArrayBuffer>>
+    writableStream(): WritableStream<Uint8Array<ArrayBufferLike>>
+    arrayBuffer(): Promise<ArrayBuffer>
+    stream(): ReadableStream<Uint8Array<ArrayBuffer>>
+    slice(start?: number, end?: number, contentType?: string): Blob
+  }
+
+  export class Directory extends ExpoFileSystemDirectory {
+    constructor(...uris: (string | File | Directory)[])
+    get parentDirectory(): Directory
+    list(): (Directory | File)[]
+    get name(): string
+    createFile(name: string, mimeType: string | null): File
+    createDirectory(name: string): Directory
+  }
+}
+
+/*
+ * expo-image-manipulator's web declarations export the module class where
+ * the native ones export an instance, hiding instance methods such as
+ * `manipulate` from `typeof ImageManipulator`. Mirror the native surface.
+ */
+declare module 'expo-image-manipulator' {
+  import {type ImageManipulator as ImageManipulatorModule} from 'expo-image-manipulator/build/ImageManipulator.types'
+  export const ImageManipulator: ImageManipulatorModule
+  export {
+    manipulateAsync,
+    useImageManipulator,
+  } from 'expo-image-manipulator/build/ImageManipulator'
+  export {
+    type Action,
+    type ActionCrop,
+    type ActionExtent,
+    type ActionFlip,
+    type ActionResize,
+    type ActionRotate,
+    FlipType,
+    type ImageResult,
+    SaveFormat,
+    type SaveOptions,
+  } from 'expo-image-manipulator/build/ImageManipulator.types'
+  export {type ImageManipulatorContext} from 'expo-image-manipulator/build/ImageManipulatorContext'
+  export {type ImageRef} from 'expo-image-manipulator/build/ImageRef'
+}

src/platform/react-native-svg.web-check.d.ts

@@ -0,0 +1,285 @@
+/*
+ * Used ONLY by the web typecheck pass (tsconfig.check.web.json) - it is not
+ * included by the main tsconfig, and it has no runtime effect.
+ *
+ * Under `moduleSuffixes: [".web", ""]`, react-native-svg's type entry
+ * resolves to its DOM-flavored `ReactNativeSVG.web.d.ts`, a different API
+ * surface (no SvgProps/PathProps, react-native-web style types) than the
+ * native one the app is written against. At runtime the web build accepts
+ * the same props, so this ambient declaration pins the package to its
+ * native declarations for one coherent type surface across both passes.
+ *
+ * moduleSuffixes remaps even explicit `.d.ts` specifiers, so this mirrors
+ * the package's ReactNativeSVG.d.ts + elements.d.ts via deep module paths
+ * that have no `.web` siblings. Generated from react-native-svg 15.12.1.
+ */
+declare module 'react-native-svg' {
+  import Shape from 'react-native-svg/lib/typescript/elements/Shape'
+  import {
+    RNSVGCircle,
+    RNSVGClipPath,
+    RNSVGDefs,
+    RNSVGEllipse,
+    RNSVGFeColorMatrix,
+    RNSVGFeComposite,
+    RNSVGFeGaussianBlur,
+    RNSVGFeMerge,
+    RNSVGFeOffset,
+    RNSVGFilter,
+    RNSVGForeignObject,
+    RNSVGGroup,
+    RNSVGImage,
+    RNSVGLine,
+    RNSVGLinearGradient,
+    RNSVGMarker,
+    RNSVGMask,
+    RNSVGPath,
+    RNSVGPattern,
+    RNSVGRadialGradient,
+    RNSVGRect,
+    RNSVGSvgAndroid,
+    RNSVGSvgIOS,
+    RNSVGSymbol,
+    RNSVGText,
+    RNSVGTextPath,
+    RNSVGTSpan,
+    RNSVGUse,
+  } from 'react-native-svg/lib/typescript/fabric'
+  import {fetchText} from 'react-native-svg/lib/typescript/utils/fetchData'
+  import {
+    type AstProps,
+    camelCase,
+    type JsxAST,
+    type Middleware,
+    parse,
+    type Styles,
+    SvgAst,
+    SvgFromUri,
+    SvgFromXml,
+    SvgUri,
+    SvgXml,
+    type UriProps,
+    type UriState,
+    type XmlAST,
+    type XmlProps,
+    type XmlState,
+  } from 'react-native-svg/lib/typescript/xml'
+  export {
+    inlineStyles,
+    loadLocalRawResource,
+    LocalSvg,
+    SvgCss,
+    SvgCssUri,
+    SvgWithCss,
+    SvgWithCssUri,
+    WithLocalSvg,
+  } from 'react-native-svg/lib/typescript/deprecated'
+  export type {CircleProps} from 'react-native-svg/lib/typescript/elements/Circle'
+  export type {ClipPathProps} from 'react-native-svg/lib/typescript/elements/ClipPath'
+  export type {EllipseProps} from 'react-native-svg/lib/typescript/elements/Ellipse'
+  export type {FeBlendProps} from 'react-native-svg/lib/typescript/elements/filters/FeBlend'
+  export type {FeColorMatrixProps} from 'react-native-svg/lib/typescript/elements/filters/FeColorMatrix'
+  export type {FeComponentTransferProps} from 'react-native-svg/lib/typescript/elements/filters/FeComponentTransfer'
+  export type {
+    FeFuncAProps,
+    FeFuncBProps,
+    FeFuncGProps,
+    FeFuncRProps,
+  } from 'react-native-svg/lib/typescript/elements/filters/FeComponentTransferFunction'
+  export type {FeCompositeProps} from 'react-native-svg/lib/typescript/elements/filters/FeComposite'
+  export type {FeConvolveMatrixProps} from 'react-native-svg/lib/typescript/elements/filters/FeConvolveMatrix'
+  export type {FeDiffuseLightingProps} from 'react-native-svg/lib/typescript/elements/filters/FeDiffuseLighting'
+  export type {FeDisplacementMapProps} from 'react-native-svg/lib/typescript/elements/filters/FeDisplacementMap'
+  export type {FeDistantLightProps} from 'react-native-svg/lib/typescript/elements/filters/FeDistantLight'
+  export type {FeDropShadowProps} from 'react-native-svg/lib/typescript/elements/filters/FeDropShadow'
+  export type {FeFloodProps} from 'react-native-svg/lib/typescript/elements/filters/FeFlood'
+  export type {FeGaussianBlurProps} from 'react-native-svg/lib/typescript/elements/filters/FeGaussianBlur'
+  export type {FeImageProps} from 'react-native-svg/lib/typescript/elements/filters/FeImage'
+  export type {FeMergeProps} from 'react-native-svg/lib/typescript/elements/filters/FeMerge'
+  export type {FeMergeNodeProps} from 'react-native-svg/lib/typescript/elements/filters/FeMergeNode'
+  export type {FeMorphologyProps} from 'react-native-svg/lib/typescript/elements/filters/FeMorphology'
+  export type {FeOffsetProps} from 'react-native-svg/lib/typescript/elements/filters/FeOffset'
+  export type {FePointLightProps} from 'react-native-svg/lib/typescript/elements/filters/FePointLight'
+  export type {FeSpecularLightingProps} from 'react-native-svg/lib/typescript/elements/filters/FeSpecularLighting'
+  export type {FeSpotLightProps} from 'react-native-svg/lib/typescript/elements/filters/FeSpotLight'
+  export type {FeTileProps} from 'react-native-svg/lib/typescript/elements/filters/FeTile'
+  export type {FeTurbulenceProps} from 'react-native-svg/lib/typescript/elements/filters/FeTurbulence'
+  export type {FilterProps} from 'react-native-svg/lib/typescript/elements/filters/Filter'
+  export type {FilterPrimitiveCommonProps} from 'react-native-svg/lib/typescript/elements/filters/FilterPrimitive'
+  export type {ForeignObjectProps} from 'react-native-svg/lib/typescript/elements/ForeignObject'
+  export type {GProps} from 'react-native-svg/lib/typescript/elements/G'
+  export type {ImageProps} from 'react-native-svg/lib/typescript/elements/Image'
+  export type {LineProps} from 'react-native-svg/lib/typescript/elements/Line'
+  export type {LinearGradientProps} from 'react-native-svg/lib/typescript/elements/LinearGradient'
+  export type {MarkerProps} from 'react-native-svg/lib/typescript/elements/Marker'
+  export type {MaskProps} from 'react-native-svg/lib/typescript/elements/Mask'
+  export type {PathProps} from 'react-native-svg/lib/typescript/elements/Path'
+  export type {PatternProps} from 'react-native-svg/lib/typescript/elements/Pattern'
+  export type {PolygonProps} from 'react-native-svg/lib/typescript/elements/Polygon'
+  export type {PolylineProps} from 'react-native-svg/lib/typescript/elements/Polyline'
+  export type {RadialGradientProps} from 'react-native-svg/lib/typescript/elements/RadialGradient'
+  export type {RectProps} from 'react-native-svg/lib/typescript/elements/Rect'
+  export type {StopProps} from 'react-native-svg/lib/typescript/elements/Stop'
+  export type {SvgProps} from 'react-native-svg/lib/typescript/elements/Svg'
+  export type {SymbolProps} from 'react-native-svg/lib/typescript/elements/Symbol'
+  export type {TextProps} from 'react-native-svg/lib/typescript/elements/Text'
+  export type {TextPathProps} from 'react-native-svg/lib/typescript/elements/TextPath'
+  export type {TSpanProps} from 'react-native-svg/lib/typescript/elements/TSpan'
+  export type {UseProps} from 'react-native-svg/lib/typescript/elements/Use'
+  export * from 'react-native-svg/lib/typescript/lib/extract/types'
+  export {
+    camelCase,
+    fetchText,
+    parse,
+    RNSVGCircle,
+    RNSVGClipPath,
+    RNSVGDefs,
+    RNSVGEllipse,
+    RNSVGFeColorMatrix,
+    RNSVGFeComposite,
+    RNSVGFeGaussianBlur,
+    RNSVGFeMerge,
+    RNSVGFeOffset,
+    RNSVGFilter,
+    RNSVGForeignObject,
+    RNSVGGroup,
+    RNSVGImage,
+    RNSVGLine,
+    RNSVGLinearGradient,
+    RNSVGMarker,
+    RNSVGMask,
+    RNSVGPath,
+    RNSVGPattern,
+    RNSVGRadialGradient,
+    RNSVGRect,
+    RNSVGSvgAndroid,
+    RNSVGSvgIOS,
+    RNSVGSymbol,
+    RNSVGText,
+    RNSVGTextPath,
+    RNSVGTSpan,
+    RNSVGUse,
+    Shape,
+    SvgAst,
+    SvgFromUri,
+    SvgFromXml,
+    SvgUri,
+    SvgXml,
+  }
+  export type {
+    AstProps,
+    JsxAST,
+    Middleware,
+    Styles,
+    UriProps,
+    UriState,
+    XmlAST,
+    XmlProps,
+    XmlState,
+  }
+  import Circle from 'react-native-svg/lib/typescript/elements/Circle'
+  import ClipPath from 'react-native-svg/lib/typescript/elements/ClipPath'
+  import Defs from 'react-native-svg/lib/typescript/elements/Defs'
+  import Ellipse from 'react-native-svg/lib/typescript/elements/Ellipse'
+  import FeBlend from 'react-native-svg/lib/typescript/elements/filters/FeBlend'
+  import FeColorMatrix from 'react-native-svg/lib/typescript/elements/filters/FeColorMatrix'
+  import FeComponentTransfer from 'react-native-svg/lib/typescript/elements/filters/FeComponentTransfer'
+  import {
+    FeFuncA,
+    FeFuncB,
+    FeFuncG,
+    FeFuncR,
+  } from 'react-native-svg/lib/typescript/elements/filters/FeComponentTransferFunction'
+  import FeComposite from 'react-native-svg/lib/typescript/elements/filters/FeComposite'
+  import FeConvolveMatrix from 'react-native-svg/lib/typescript/elements/filters/FeConvolveMatrix'
+  import FeDiffuseLighting from 'react-native-svg/lib/typescript/elements/filters/FeDiffuseLighting'
+  import FeDisplacementMap from 'react-native-svg/lib/typescript/elements/filters/FeDisplacementMap'
+  import FeDistantLight from 'react-native-svg/lib/typescript/elements/filters/FeDistantLight'
+  import FeDropShadow from 'react-native-svg/lib/typescript/elements/filters/FeDropShadow'
+  import FeFlood from 'react-native-svg/lib/typescript/elements/filters/FeFlood'
+  import FeGaussianBlur from 'react-native-svg/lib/typescript/elements/filters/FeGaussianBlur'
+  import FeImage from 'react-native-svg/lib/typescript/elements/filters/FeImage'
+  import FeMerge from 'react-native-svg/lib/typescript/elements/filters/FeMerge'
+  import FeMergeNode from 'react-native-svg/lib/typescript/elements/filters/FeMergeNode'
+  import FeMorphology from 'react-native-svg/lib/typescript/elements/filters/FeMorphology'
+  import FeOffset from 'react-native-svg/lib/typescript/elements/filters/FeOffset'
+  import FePointLight from 'react-native-svg/lib/typescript/elements/filters/FePointLight'
+  import FeSpecularLighting from 'react-native-svg/lib/typescript/elements/filters/FeSpecularLighting'
+  import FeSpotLight from 'react-native-svg/lib/typescript/elements/filters/FeSpotLight'
+  import FeTile from 'react-native-svg/lib/typescript/elements/filters/FeTile'
+  import FeTurbulence from 'react-native-svg/lib/typescript/elements/filters/FeTurbulence'
+  import Filter from 'react-native-svg/lib/typescript/elements/filters/Filter'
+  import ForeignObject from 'react-native-svg/lib/typescript/elements/ForeignObject'
+  import G from 'react-native-svg/lib/typescript/elements/G'
+  import Image from 'react-native-svg/lib/typescript/elements/Image'
+  import Line from 'react-native-svg/lib/typescript/elements/Line'
+  import LinearGradient from 'react-native-svg/lib/typescript/elements/LinearGradient'
+  import Marker from 'react-native-svg/lib/typescript/elements/Marker'
+  import Mask from 'react-native-svg/lib/typescript/elements/Mask'
+  import Path from 'react-native-svg/lib/typescript/elements/Path'
+  import Pattern from 'react-native-svg/lib/typescript/elements/Pattern'
+  import Polygon from 'react-native-svg/lib/typescript/elements/Polygon'
+  import Polyline from 'react-native-svg/lib/typescript/elements/Polyline'
+  import RadialGradient from 'react-native-svg/lib/typescript/elements/RadialGradient'
+  import Rect from 'react-native-svg/lib/typescript/elements/Rect'
+  import Stop from 'react-native-svg/lib/typescript/elements/Stop'
+  import Svg from 'react-native-svg/lib/typescript/elements/Svg'
+  import Symbol from 'react-native-svg/lib/typescript/elements/Symbol'
+  import Text from 'react-native-svg/lib/typescript/elements/Text'
+  import TextPath from 'react-native-svg/lib/typescript/elements/TextPath'
+  import TSpan from 'react-native-svg/lib/typescript/elements/TSpan'
+  import Use from 'react-native-svg/lib/typescript/elements/Use'
+  export {
+    Circle,
+    ClipPath,
+    Defs,
+    Ellipse,
+    FeBlend,
+    FeColorMatrix,
+    FeComponentTransfer,
+    FeComposite,
+    FeConvolveMatrix,
+    FeDiffuseLighting,
+    FeDisplacementMap,
+    FeDistantLight,
+    FeDropShadow,
+    FeFlood,
+    FeFuncA,
+    FeFuncB,
+    FeFuncG,
+    FeFuncR,
+    FeGaussianBlur,
+    FeImage,
+    FeMerge,
+    FeMergeNode,
+    FeMorphology,
+    FeOffset,
+    FePointLight,
+    FeSpecularLighting,
+    FeSpotLight,
+    FeTile,
+    FeTurbulence,
+    Filter,
+    ForeignObject,
+    G,
+    Image,
+    Line,
+    LinearGradient,
+    Marker,
+    Mask,
+    Path,
+    Pattern,
+    Polygon,
+    Polyline,
+    RadialGradient,
+    Rect,
+    Stop,
+    Svg,
+    Symbol,
+    Text,
+    TextPath,
+    TSpan,
+    Use,
+  }
+  export default Svg
+}

src/screens/Messages/ChatList.tsx

@@ -1,6 +1,5 @@
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {View} from 'react-native'
-import {useAnimatedRef} from 'react-native-reanimated'
 import {type ChatBskyActorGetStatus, type ChatBskyConvoDefs} from '@atproto/api'
 import {Trans, useLingui} from '@lingui/react/macro'
 import {
@@ -275,7 +274,7 @@ export function ChatList({
   const t = useTheme()
   const {t: l} = useLingui()
   const aa = useAgeAssurance()
-  const scrollElRef: ListRef = useAnimatedRef()
+  const scrollElRef: ListRef = useRef(null)
   const {isWithinSplitView} = useIsWithinSplitView()
 
   const openChatControl = useCallback(() => {

src/screens/Messages/components/MessagesList.tsx

@@ -17,7 +17,6 @@ import Animated, {
   runOnJS,
   type ScrollEvent,
   type SharedValue,
-  useAnimatedRef,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -154,7 +153,7 @@ export function MessagesList({
   const t = useTheme()
 
   const textInputId = 'chat-input-' + useId()
-  const flatListRef = useAnimatedRef<ListMethods>()
+  const flatListRef = useRef<ListMethods | null>(null)
 
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(
     () => new Set(),

src/screens/Onboarding/StepFindContacts/index.web.tsx

@@ -1,3 +1,8 @@
-export function StepFindContacts() {
+import {type Action, type State} from '#/components/contacts/state'
+
+export function StepFindContacts(_props: {
+  flowState: State
+  flowDispatch: React.ActionDispatch<[Action]>
+}): never {
   throw new Error('StepFindContacts is not available on web')
 }

src/screens/Onboarding/StepFindContactsIntro/index.web.tsx

@@ -1,3 +1,3 @@
-export function StepFindContactsIntro() {
+export function StepFindContactsIntro(): never {
   throw new Error('StepFindContactsIntro is not available on web')
 }

src/screens/Onboarding/StepFinished/ValuePropositionPager.shared.tsx

@@ -4,6 +4,16 @@ import {useLingui} from '@lingui/react'
 
 import {atoms as a, useTheme} from '#/alf'
 
+export type ValuePropositionPagerProps = {
+  step: 0 | 1 | 2
+  /**
+   * Only the native pager changes pages itself (by swiping); the web pager
+   * is driven entirely by the step prop.
+   */
+  setStep: (step: 0 | 1 | 2) => void
+  avatarUri?: string
+}
+
 export function useValuePropText(step: 0 | 1 | 2) {
   const {_} = useLingui()
 

src/screens/Onboarding/StepFinished/ValuePropositionPager.tsx

@@ -8,17 +8,17 @@ import {useLingui} from '@lingui/react'
 import {atoms as a, tokens, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 import {PROP_1, PROP_2, PROP_3} from './images'
-import {Dot, useValuePropText} from './ValuePropositionPager.shared'
+import {
+  Dot,
+  useValuePropText,
+  type ValuePropositionPagerProps,
+} from './ValuePropositionPager.shared'
 
 export function ValuePropositionPager({
   step,
   setStep,
   avatarUri,
-}: {
-  step: 0 | 1 | 2
-  setStep: (step: 0 | 1 | 2) => void
-  avatarUri?: string
-}) {
+}: ValuePropositionPagerProps) {
   const t = useTheme()
   const [activePage, setActivePage] = useState(step)
   const ref = useRef<PagerView>(null)

src/screens/Onboarding/StepFinished/ValuePropositionPager.web.tsx

@@ -6,15 +6,16 @@ import {useLingui} from '@lingui/react'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 import {PROP_1, PROP_2, PROP_3} from './images'
-import {Dot, useValuePropText} from './ValuePropositionPager.shared'
+import {
+  Dot,
+  useValuePropText,
+  type ValuePropositionPagerProps,
+} from './ValuePropositionPager.shared'
 
 export function ValuePropositionPager({
   step,
   avatarUri,
-}: {
-  step: 0 | 1 | 2
-  avatarUri?: string
-}) {
+}: ValuePropositionPagerProps) {
   const t = useTheme()
   const {_} = useLingui()
 

src/screens/Profile/KnownFollowers.tsx

@@ -34,7 +34,7 @@ function renderItem({
   )
 }
 
-function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) {
+function keyExtractor(item: AppBskyActorDefs.ProfileView) {
   return item.did
 }
 

src/screens/Profile/Sections/Feed.tsx

@@ -1,5 +1,5 @@
 import {useCallback, useEffect, useImperativeHandle, useState} from 'react'
-import {findNodeHandle, View} from 'react-native'
+import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
@@ -17,6 +17,7 @@ import {
   type EmptyStateButtonProps,
 } from '#/view/com/util/EmptyState'
 import {type ListRef} from '#/view/com/util/List'
+import {findListNativeTag} from '#/view/com/util/listNativeTag'
 import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
 import {atoms as a, ios, useTheme} from '#/alf'
 import {EditBig_Stroke1_Corner0_Rounded as EditIcon} from '#/components/icons/EditBig'
@@ -87,7 +88,7 @@ export function ProfileFeedSection({
 
   useEffect(() => {
     if (IS_IOS && isFocused && scrollElRef.current) {
-      const nativeTag = findNodeHandle(scrollElRef.current)
+      const nativeTag = findListNativeTag(scrollElRef.current)
       setScrollViewTag(nativeTag)
     }
   }, [isFocused, scrollElRef, setScrollViewTag])

src/screens/Profile/Sections/Labels.tsx

@@ -1,5 +1,5 @@
 import {useCallback, useEffect, useImperativeHandle, useMemo} from 'react'
-import {findNodeHandle, type ListRenderItemInfo, View} from 'react-native'
+import {type ListRenderItemInfo, View} from 'react-native'
 import {
   type AppBskyLabelerDefs,
   type InterpretedLabelValueDefinition,
@@ -12,6 +12,7 @@ import {Trans} from '@lingui/react/macro'
 
 import {isLabelerSubscribed, lookupLabelValueDefinition} from '#/lib/moderation'
 import {List, type ListRef} from '#/view/com/util/List'
+import {findListNativeTag} from '#/view/com/util/listNativeTag'
 import {atoms as a, ios, tokens, useTheme} from '#/alf'
 import {Divider} from '#/components/Divider'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
@@ -61,7 +62,7 @@ export function ProfileLabelsSection({
 
   useEffect(() => {
     if (IS_IOS && isFocused && scrollElRef.current) {
-      const nativeTag = findNodeHandle(scrollElRef.current)
+      const nativeTag = findListNativeTag(scrollElRef.current)
       setScrollViewTag(nativeTag)
     }
   }, [isFocused, scrollElRef, setScrollViewTag])

src/screens/Search/Explore.tsx

@@ -1169,7 +1169,7 @@ export function Explore({
   )
 }
 
-function keyExtractor(item: FeedPreviewItem) {
+function keyExtractor(item: ExploreScreenItems) {
   return item.key
 }
 

src/screens/Settings/AppIconSettings/SettingsListItem.web.tsx

@@ -1 +1,3 @@
-export function SettingsListItem() {}
+export function SettingsListItem() {
+  return null
+}

src/screens/Settings/AppIconSettings/index.web.tsx

@@ -1,3 +1,3 @@
-export function AppIconSettingsScreen() {
+export function AppIconSettingsScreen(): never {
   throw new Error('Not supported on web')
 }

src/screens/Signup/StepCaptcha/CaptchaWebView.shared.ts

@@ -0,0 +1,10 @@
+import {type SignupState} from '#/screens/Signup/state'
+
+export type CaptchaWebViewProps = {
+  url: string
+  stateParam: string
+  state?: SignupState
+  onComplete: () => void
+  onSuccess: (code: string) => void
+  onError: (error: unknown) => void
+}

src/screens/Signup/StepCaptcha/CaptchaWebView.tsx

@@ -2,7 +2,7 @@ import {useEffect, useMemo, useRef} from 'react'
 import {WebView, type WebViewNavigation} from 'react-native-webview'
 import {type ShouldStartLoadRequest} from 'react-native-webview/lib/WebViewTypes'
 
-import {type SignupState} from '#/screens/Signup/state'
+import {type CaptchaWebViewProps} from './CaptchaWebView.shared'
 
 const ALLOWED_HOSTS = [
   'bsky.social',
@@ -24,14 +24,7 @@ export function CaptchaWebView({
   onComplete,
   onSuccess,
   onError,
-}: {
-  url: string
-  stateParam: string
-  state?: SignupState
-  onComplete: () => void
-  onSuccess: (code: string) => void
-  onError: (error: unknown) => void
-}) {
+}: CaptchaWebViewProps) {
   const startedAt = useRef(Date.now())
   const successTo = useRef<NodeJS.Timeout>(undefined)
 

src/screens/Signup/StepCaptcha/CaptchaWebView.web.tsx

@@ -1,6 +1,8 @@
 import {useCallback, useEffect} from 'react'
 import {StyleSheet} from 'react-native'
 
+import {type CaptchaWebViewProps} from './CaptchaWebView.shared'
+
 // @ts-ignore web only, we will always redirect to the app on web (CORS)
 const REDIRECT_HOST = new URL(window.location.href).host
 
@@ -9,12 +11,7 @@ export function CaptchaWebView({
   stateParam,
   onSuccess,
   onError,
-}: {
-  url: string
-  stateParam: string
-  onSuccess: (code: string) => void
-  onError: (error: unknown) => void
-}) {
+}: CaptchaWebViewProps) {
   useEffect(() => {
     const timeout = setTimeout(() => {
       onError({

src/screens/StarterPack/Wizard/StepProfiles.tsx

@@ -1,7 +1,7 @@
 import {useState} from 'react'
 import {type ListRenderItemInfo, View} from 'react-native'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
-import {type AppBskyActorDefs, type ModerationOpts} from '@atproto/api'
+import {type ModerationOpts} from '@atproto/api'
 import {Trans} from '@lingui/react/macro'
 
 import {useA11y} from '#/state/a11y'
@@ -18,7 +18,7 @@ import {Text} from '#/components/Typography'
 import {IS_NATIVE} from '#/env'
 import type * as bsky from '#/types/bsky'
 
-function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) {
+function keyExtractor(item: bsky.profile.AnyProfileView) {
   return item?.did ?? ''
 }
 

src/view/com/composer/photos/EditImageDialog.shared.ts

@@ -0,0 +1,10 @@
+import {type ComposerImage} from '#/state/gallery'
+import type * as Dialog from '#/components/Dialog'
+
+export type EditImageDialogProps = {
+  control: Dialog.DialogOuterProps['control']
+  image?: ComposerImage
+  onChange: (next: ComposerImage) => void
+  aspectRatio?: number
+  circularCrop?: boolean
+}

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

@@ -1,13 +1,6 @@
-import {type ComposerImage} from '#/state/gallery'
-import type * as Dialog from '#/components/Dialog'
+import {type EditImageDialogProps} from './EditImageDialog.shared'
 
-export type EditImageDialogProps = {
-  control: Dialog.DialogOuterProps['control']
-  image?: ComposerImage
-  onChange: (next: ComposerImage) => void
-  aspectRatio?: number
-  circularCrop?: boolean
-}
+export type {EditImageDialogProps} from './EditImageDialog.shared'
 
 export const EditImageDialog = ({}: EditImageDialogProps): React.ReactNode => {
   return null

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

@@ -16,7 +16,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
-import {type EditImageDialogProps} from './EditImageDialog'
+import {type EditImageDialogProps} from './EditImageDialog.shared'
 
 export function EditImageDialog(props: EditImageDialogProps) {
   return (

src/view/com/composer/photos/OpenCameraBtn.shared.ts

@@ -0,0 +1,6 @@
+import {type ComposerImage} from '#/state/gallery'
+
+export type OpenCameraBtnProps = {
+  disabled?: boolean
+  onAdd: (next: ComposerImage[]) => void
+}

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

@@ -6,18 +6,14 @@ import {useLingui} from '@lingui/react'
 import {useCameraPermission} from '#/lib/hooks/usePermissions'
 import {openCamera} from '#/lib/media/picker'
 import {logger} from '#/logger'
-import {type ComposerImage, createComposerImage} from '#/state/gallery'
+import {createComposerImage} from '#/state/gallery'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {Camera_Stroke2_Corner0_Rounded as Camera} from '#/components/icons/Camera'
 import {IS_NATIVE, IS_WEB_MOBILE} from '#/env'
+import {type OpenCameraBtnProps} from './OpenCameraBtn.shared'
 
-type Props = {
-  disabled?: boolean
-  onAdd: (next: ComposerImage[]) => void
-}
-
-export function OpenCameraBtn({disabled, onAdd}: Props) {
+export function OpenCameraBtn({disabled, onAdd}: OpenCameraBtnProps) {
   const {_} = useLingui()
   const {requestCameraAccessIfNeeded} = useCameraPermission()
   const [mediaPermissionRes, requestMediaPermission] =

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

@@ -1,3 +1,5 @@
-export function OpenCameraBtn() {
+import {type OpenCameraBtnProps} from './OpenCameraBtn.shared'
+
+export function OpenCameraBtn(_props: OpenCameraBtnProps) {
   return null
 }

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

@@ -1,6 +1,8 @@
+import {type QueryClient} from '@tanstack/react-query'
+
 import {atoms as a, flatten} from '#/alf'
 
-export function clearThumbnailCache() {
+export function clearThumbnailCache(_queryClient: QueryClient) {
   // no-op on web
 }
 

src/view/com/feeds/ProfileFeedgens.tsx

@@ -6,7 +6,6 @@ import {
   useState,
 } from 'react'
 import {
-  findNodeHandle,
   type ListRenderItemInfo,
   type StyleProp,
   useWindowDimensions,
@@ -26,6 +25,7 @@ import {useSession} from '#/state/session'
 import {EmptyState} from '#/view/com/util/EmptyState'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {List, type ListRef} from '#/view/com/util/List'
+import {findListNativeTag} from '#/view/com/util/listNativeTag'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
 import {atoms as a, ios, useTheme} from '#/alf'
@@ -219,7 +219,7 @@ export function ProfileFeedgens({
 
   useEffect(() => {
     if (IS_IOS && enabled && scrollElRef.current) {
-      const nativeTag = findNodeHandle(scrollElRef.current)
+      const nativeTag = findListNativeTag(scrollElRef.current)
       setScrollViewTag(nativeTag)
     }
   }, [enabled, scrollElRef, setScrollViewTag])

src/view/com/lists/ProfileLists.tsx

@@ -6,7 +6,6 @@ import {
   useState,
 } from 'react'
 import {
-  findNodeHandle,
   type ListRenderItemInfo,
   type StyleProp,
   useWindowDimensions,
@@ -26,6 +25,7 @@ import {useSession} from '#/state/session'
 import {EmptyState} from '#/view/com/util/EmptyState'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {List, type ListRef} from '#/view/com/util/List'
+import {findListNativeTag} from '#/view/com/util/listNativeTag'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
 import {atoms as a, ios, useTheme} from '#/alf'
@@ -218,7 +218,7 @@ export function ProfileLists({
 
   useEffect(() => {
     if (IS_IOS && enabled && scrollElRef.current) {
-      const nativeTag = findNodeHandle(scrollElRef.current)
+      const nativeTag = findListNativeTag(scrollElRef.current)
       setScrollViewTag(nativeTag)
     }
   }, [enabled, scrollElRef, setScrollViewTag])

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

@@ -7,6 +7,7 @@ import {
   useState,
 } from 'react'
 import {View} from 'react-native'
+import {type SharedValue, useSharedValue} from 'react-native-reanimated'
 import {flushSync} from 'react-dom'
 
 import {s} from '#/lib/styles'
@@ -19,7 +20,9 @@ export interface PagerRef {
 export interface RenderTabBarFnProps {
   selectedPage: number
   onSelect?: (index: number) => void
-  tabBarAnchor?: JSX.Element
+  tabBarAnchor?: JSX.Element | null | undefined // Ignored on native.
+  dragProgress: SharedValue<number> // Ignored on web.
+  dragState: SharedValue<'idle' | 'dragging' | 'settling'> // Ignored on web.
 }
 export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
 
@@ -27,7 +30,17 @@ interface Props {
   ref?: React.Ref<PagerRef>
   initialPage?: number
   renderTabBar: RenderTabBarFn
+  // tab pressed, yet to scroll to page
+  onTabPressed?: (index: number) => void
+  // scroll settled
   onPageSelected?: (index: number) => void
+  /**
+   * Never fires on web - pages switch instantly, there is no drag gesture.
+   */
+  onPageScrollStateChanged?: (
+    scrollState: 'idle' | 'dragging' | 'settling',
+  ) => void
+  testID?: string
 }
 
 export function Pager({
@@ -35,12 +48,22 @@ export function Pager({
   children,
   initialPage = 0,
   renderTabBar,
+  onTabPressed,
   onPageSelected,
+  onPageScrollStateChanged: _onPageScrollStateChanged,
+  testID,
 }: React.PropsWithChildren<Props>) {
   const [selectedPage, setSelectedPage] = useState(initialPage)
   const scrollYs = useRef<Array<number | null>>([])
   const anchorRef = useRef(null)
 
+  /*
+   * There is no drag gesture on web; these exist to satisfy the shared
+   * RenderTabBarFnProps contract and never change.
+   */
+  const dragProgress = useSharedValue(selectedPage)
+  const dragState = useSharedValue<'idle' | 'dragging' | 'settling'>('idle')
+
   useImperativeHandle(ref, () => ({
     setPage: (index: number) => {
       onTabBarSelect(index)
@@ -59,6 +82,7 @@ export function Pager({
         : -scrollY // If there's no anchor, treat the top of the page as one.
       const isSticking = anchorTop <= 5 // This would be 0 if browser scrollTo() was reliable.
 
+      onTabPressed?.(index)
       if (isSticking) {
         scrollYs.current[selectedPage] = window.scrollY
       } else {
@@ -77,15 +101,17 @@ export function Pager({
         }
       }
     },
-    [selectedPage, setSelectedPage, onPageSelected],
+    [selectedPage, setSelectedPage, onPageSelected, onTabPressed],
   )
 
   return (
-    <View style={s.hContentRegion}>
+    <View testID={testID} style={s.hContentRegion}>
       {renderTabBar({
         selectedPage,
         tabBarAnchor: <View ref={anchorRef} />,
         onSelect: e => onTabBarSelect(e),
+        dragProgress,
+        dragState,
       })}
       {Children.map(children, (child, i) => (
         <View

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

@@ -29,11 +29,12 @@ export interface PagerWithHeaderProps {
   renderHeader?: ({
     setMinimumHeight,
   }: {
-    setMinimumHeight: () => void
+    setMinimumHeight: (height: number) => void
   }) => JSX.Element
   initialPage?: number
   onPageSelected?: (index: number) => void
   onCurrentPageSelected?: (index: number) => void
+  allowHeaderOverScroll?: boolean // Ignored on web.
 }
 export const PagerWithHeader = forwardRef<PagerRef, PagerWithHeaderProps>(
   function PageWithHeaderImpl(
@@ -127,7 +128,7 @@ let PagerTabBar = ({
   renderHeader?: ({
     setMinimumHeight,
   }: {
-    setMinimumHeight: () => void
+    setMinimumHeight: (height: number) => void
   }) => JSX.Element
   isHeaderReady: boolean
   onCurrentPageSelected?: (index: number) => void

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

@@ -1,5 +1,6 @@
 import {useCallback, useEffect, useRef} from 'react'
 import {type ScrollView, StyleSheet, View} from 'react-native'
+import {type SharedValue} from 'react-native-reanimated'
 
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Text} from '#/components/Typography'
@@ -15,6 +16,14 @@ export interface TabBarProps {
 
   onSelect?: (index: number) => void
   onPressSelected?: (index: number) => void
+
+  /**
+   * The drag-following indicator and transparent background only exist in
+   * the native tab bar - accepted here so shared callers typecheck.
+   */
+  dragProgress?: SharedValue<number> // Ignored on web.
+  dragState?: SharedValue<'idle' | 'dragging' | 'settling'> // Ignored on web.
+  transparent?: boolean // Ignored on web.
 }
 
 // How much of the previous/next item we're showing

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

@@ -17,6 +17,7 @@ import {usePostQuotesQuery} from '#/state/queries/post-quotes'
 import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {Post} from '#/view/com/post/Post'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
+import * as bsky from '#/types/bsky'
 import {List} from '../util/List'
 
 function renderItem({
@@ -70,7 +71,13 @@ export function PostQuotes({uri}: {uri: string}) {
     data?.pages
       .flatMap(page =>
         page.posts.map(post => {
-          if (!AppBskyFeedPost.isRecord(post.record) || !moderationOpts) {
+          if (
+            !bsky.dangerousIsType<AppBskyFeedPost.Record>(
+              post.record,
+              AppBskyFeedPost.isRecord,
+            ) ||
+            !moderationOpts
+          ) {
             return null
           }
           const moderation = moderatePost(post, moderationOpts)

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

@@ -28,7 +28,7 @@ function renderItem({
   )
 }
 
-function keyExtractor(item: ActorDefs.ProfileViewBasic) {
+function keyExtractor(item: ActorDefs.ProfileView) {
   return item.did
 }
 

src/view/com/profile/ProfileFollowers.tsx

@@ -43,7 +43,7 @@ function renderItem({
   )
 }
 
-function keyExtractor(item: ActorDefs.ProfileViewBasic) {
+function keyExtractor(item: ActorDefs.ProfileView) {
   return item.did
 }
 

src/view/com/profile/ProfileFollows.tsx

@@ -39,7 +39,7 @@ function renderItem({
   )
 }
 
-function keyExtractor(item: ActorDefs.ProfileViewBasic) {
+function keyExtractor(item: ActorDefs.ProfileView) {
   return item.did
 }
 

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

@@ -28,8 +28,10 @@ import * as Layout from '#/components/Layout'
 
 export type ListMethods = {
   scrollToTop: () => void
-  scrollToOffset: (options: {animated: boolean; offset: number}) => void
-  scrollToEnd: (options?: {animated?: boolean}) => void
+  // Signature kept compatible with FlatList's scrollToOffset (the native
+  // ListMethods type) so callers stay platform-agnostic.
+  scrollToOffset: (options: {animated?: boolean | null; offset: number}) => void
+  scrollToEnd: (options?: {animated?: boolean | null}) => void
   // Signature kept compatible with FlatList's scrollToIndex (the native
   // ListMethods type) so callers stay platform-agnostic. viewOffset is
   // accepted for parity but not currently used by the web implementation.
@@ -40,7 +42,8 @@ export type ListMethods = {
     viewPosition?: number
   }) => void
 }
-export type ListProps<ItemT> = Omit<
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ListProps<ItemT = any> = Omit<
   FlatListProps<ItemT>,
   | 'onScroll' // Use ScrollContext instead.
   | 'refreshControl' // Pass refreshing and/or onRefresh instead.
@@ -59,7 +62,7 @@ export type ListProps<ItemT> = Omit<
    */
   sideBorders?: boolean
 }
-export type ListRef = React.RefObject<View>
+export type ListRef = React.RefObject<ListMethods | null>
 
 const ON_ITEM_SEEN_WAIT_DURATION = 0.5e3 // when we consider post to  be "seen"
 const ON_ITEM_SEEN_INTERSECTION_OPTS = {
@@ -248,7 +251,13 @@ function ListImpl<ItemT>(
         getScrollableNode()?.scrollTo({top: 0})
       },
 
-      scrollToOffset({animated, offset}: {animated: boolean; offset: number}) {
+      scrollToOffset({
+        animated,
+        offset,
+      }: {
+        animated?: boolean | null
+        offset: number
+      }) {
         getScrollableNode()?.scrollTo({
           left: 0,
           top: offset,

src/view/com/util/listNativeTag.ts

@@ -0,0 +1,12 @@
+import {findNodeHandle} from 'react-native'
+
+import {type ListMethods} from './List'
+
+/**
+ * Returns the native view tag backing a List, for handing to native code
+ * (e.g. the pager's scrollViewTag). Always null on web.
+ */
+export function findListNativeTag(list: ListMethods | null): number | null {
+  if (!list) return null
+  return findNodeHandle(list)
+}

src/view/com/util/listNativeTag.web.ts

@@ -0,0 +1,9 @@
+import {type ListMethods} from './List'
+
+/**
+ * Returns the native view tag backing a List, for handing to native code
+ * (e.g. the pager's scrollViewTag). Always null on web.
+ */
+export function findListNativeTag(_list: ListMethods | null): number | null {
+  return null
+}

tsconfig.check.web.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "moduleSuffixes": [".web", ""],
+    "paths": {
+      "#/*": ["./src/*"],
+      "crypto": ["./src/platform/crypto.ts"],
+      /*
+       * expo-file-system/legacy resolves to the package's raw TypeScript
+       * source, whose internals break under .web module suffixes. Point it
+       * at the compiled declarations, where skipLibCheck applies.
+       */
+      "expo-file-system/legacy": [
+        "./node_modules/expo-file-system/build/legacy/index.d.ts"
+      ]
+    }
+  },
+  "include": [
+    "index.web.ts",
+    "src/**/*.web.ts",
+    "src/**/*.web.tsx",
+    "src/platform/*.web-check.d.ts"
+  ]
+}