@onekeyfe/react-native-pager-view 3.0.157-alpha.257 → 3.0.157-alpha.262

package/lib/module/NativeScrollerNativeComponent.ts

@@ -0,0 +1,101 @@
+import type * as React from "react";
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type ColorValue,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+import type {
+  DirectEventHandler,
+  Double,
+  WithDefault,
+} from "react-native/Libraries/Types/CodegenTypes";
+
+export type NativeScrollerScrollEvent = Readonly<{
+  contentInset: Readonly<{
+    top: Double;
+    right: Double;
+    bottom: Double;
+    left: Double;
+  }>;
+  contentOffset: Readonly<{ x: Double; y: Double }>;
+  contentSize: Readonly<{ width: Double; height: Double }>;
+  layoutMeasurement: Readonly<{ width: Double; height: Double }>;
+  velocity: Readonly<{ x: Double; y: Double }>;
+  targetContentOffset: Readonly<{ x: Double; y: Double }>;
+  zoomScale: Double;
+}>;
+
+export interface NativeProps extends ViewProps {
+  contentWidth?: WithDefault<Double, 0>;
+  contentHeight?: WithDefault<Double, 0>;
+  scrollEnabled?: WithDefault<boolean, true>;
+  nestedScrollEnabled?: WithDefault<boolean, true>;
+  showsVerticalScrollIndicator?: WithDefault<boolean, true>;
+  showsHorizontalScrollIndicator?: WithDefault<boolean, false>;
+  bounces?: WithDefault<boolean, true>;
+  alwaysBounceVertical?: WithDefault<boolean, true>;
+  keyboardDismissMode?: WithDefault<"none" | "on-drag" | "interactive", "none">;
+  keyboardShouldPersistTaps?: WithDefault<
+    "never" | "always" | "handled",
+    "never"
+  >;
+  scrollEventThrottle?: WithDefault<Double, 0>;
+  decelerationRate?: WithDefault<Double, 0.998>;
+  contentInsetTop?: WithDefault<Double, 0>;
+  contentInsetRight?: WithDefault<Double, 0>;
+  contentInsetBottom?: WithDefault<Double, 0>;
+  contentInsetLeft?: WithDefault<Double, 0>;
+  refreshEnabled?: WithDefault<boolean, false>;
+  refreshing?: WithDefault<boolean, false>;
+  refreshTintColor?: ColorValue;
+  refreshColors?: ReadonlyArray<ColorValue>;
+  refreshProgressBackgroundColor?: ColorValue;
+  refreshProgressViewOffset?: WithDefault<Double, 0>;
+  refreshTitle?: string;
+  refreshTitleColor?: ColorValue;
+  refreshSize?: WithDefault<"default" | "large", "default">;
+  onContentViewportChange?: DirectEventHandler<Readonly<{ height: Double }>>;
+  onRefresh?: DirectEventHandler<null>;
+  onScroll?: DirectEventHandler<NativeScrollerScrollEvent>;
+  onScrollBeginDrag?: DirectEventHandler<NativeScrollerScrollEvent>;
+  onScrollEndDrag?: DirectEventHandler<NativeScrollerScrollEvent>;
+  onMomentumScrollBegin?: DirectEventHandler<NativeScrollerScrollEvent>;
+  onMomentumScrollEnd?: DirectEventHandler<NativeScrollerScrollEvent>;
+}
+
+type NativeScrollerHost = HostComponent<NativeProps>;
+
+export interface NativeCommands {
+  scrollTo: (
+    viewRef: React.ElementRef<NativeScrollerHost>,
+    x: Double,
+    y: Double,
+    animated: boolean
+  ) => void;
+  scrollToEnd: (
+    viewRef: React.ElementRef<NativeScrollerHost>,
+    animated: boolean
+  ) => void;
+  flashScrollIndicators: (
+    viewRef: React.ElementRef<NativeScrollerHost>
+  ) => void;
+  setRefreshState: (
+    viewRef: React.ElementRef<NativeScrollerHost>,
+    refreshing: boolean
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    "scrollTo",
+    "scrollToEnd",
+    "flashScrollIndicators",
+    "setRefreshState",
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>("RNCNativeScroller", {
+  interfaceOnly: true,
+}) as NativeScrollerHost;

package/lib/typescript/src/CollapsiblePagerView.d.ts

@@ -80,9 +80,8 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
     nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
     onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
     /**
-     * Animates the page change started by a native tab press. Defaults to true.
-     * Set false to jump straight to the pressed page, so a distant tab does not
-     * scroll through every page in between, including unmounted ones.
+     * Defaults to animating adjacent native tab presses and jumping directly to
+     * non-adjacent pages. Set true to always animate, or false to always jump.
      */
     nativeTabPressAnimationEnabled?: boolean;
     /** Optional native secondary sticky header for iOS and Android. */
@@ -106,6 +105,7 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private lastMountSignature;
     private nativeTabCommandId;
     private latestNativeTabTarget;
+    private dispatchedNativeTabTarget;
     private latestNativeSelectedPage;
     private nativePagerScrollState;
     private nativeTabCommandQueuedDuringScroll;

package/lib/typescript/src/NativeScroller.d.ts

@@ -1,12 +1,20 @@
 import * as React from "react";
-import { type ScrollViewProps } from "react-native";
+import { type NativeMethods, type RefreshControlProps, type ScrollView, type ScrollViewProps, type ViewProps } from "react-native";
+import NativeScrollerHost from "./NativeScrollerNativeComponent";
 export declare const NATIVE_SCROLLER_NATIVE_ID_PREFIX = "rnc-collapsible-pager-native-scroller";
-export interface NativeScrollerProps extends ScrollViewProps {
-    /** Stable identity used when a page replaces or remounts its primary scroller. */
+/** Supported vertical subset; horizontal, snapping, zoom and sticky rows are not supported. */
+export interface NativeScrollerProps extends ViewProps, Pick<ScrollViewProps, "contentContainerStyle" | "onContentSizeChange" | "scrollEnabled" | "nestedScrollEnabled" | "showsVerticalScrollIndicator" | "showsHorizontalScrollIndicator" | "bounces" | "alwaysBounceVertical" | "contentInset" | "keyboardDismissMode" | "keyboardShouldPersistTaps" | "scrollEventThrottle" | "decelerationRate" | "onScroll" | "onScrollBeginDrag" | "onScrollEndDrag" | "onMomentumScrollBegin" | "onMomentumScrollEnd"> {
     pagerScrollKey?: string;
+    /** iOS only. Android retains AndroidX's native fling physics. */
+    decelerationRate?: ScrollViewProps["decelerationRate"];
+    /** Standard RefreshControl props are mapped to the independently owned native controller. */
+    refreshControl?: React.ReactElement<RefreshControlProps>;
 }
-/**
- * Primary non-virtualized vertical scroller for a CollapsiblePagerView page.
- */
-export declare const NativeScroller: React.ForwardRefExoticComponent<NativeScrollerProps & React.RefAttributes<import("react-native/types_generated/Libraries/Components/ScrollView/ScrollView").PublicScrollViewInstance>>;
+type HostRef = React.ElementRef<typeof NativeScrollerHost>;
+export interface NativeScrollerRef extends NativeMethods, Pick<React.ElementRef<typeof ScrollView>, "scrollTo" | "scrollToEnd" | "flashScrollIndicators"> {
+    getNativeScrollRef(): HostRef | null;
+    getScrollableNode(): number | null;
+}
+export declare const NativeScroller: React.ForwardRefExoticComponent<NativeScrollerProps & React.RefAttributes<NativeScrollerRef>>;
+export {};
 //# sourceMappingURL=NativeScroller.d.ts.map

package/lib/typescript/src/NativeScrollerNativeComponent.d.ts

@@ -0,0 +1,79 @@
+import type * as React from "react";
+import { type ColorValue, type HostComponent, type ViewProps } from "react-native";
+import type { DirectEventHandler, Double, WithDefault } from "react-native/Libraries/Types/CodegenTypes";
+export type NativeScrollerScrollEvent = Readonly<{
+    contentInset: Readonly<{
+        top: Double;
+        right: Double;
+        bottom: Double;
+        left: Double;
+    }>;
+    contentOffset: Readonly<{
+        x: Double;
+        y: Double;
+    }>;
+    contentSize: Readonly<{
+        width: Double;
+        height: Double;
+    }>;
+    layoutMeasurement: Readonly<{
+        width: Double;
+        height: Double;
+    }>;
+    velocity: Readonly<{
+        x: Double;
+        y: Double;
+    }>;
+    targetContentOffset: Readonly<{
+        x: Double;
+        y: Double;
+    }>;
+    zoomScale: Double;
+}>;
+export interface NativeProps extends ViewProps {
+    contentWidth?: WithDefault<Double, 0>;
+    contentHeight?: WithDefault<Double, 0>;
+    scrollEnabled?: WithDefault<boolean, true>;
+    nestedScrollEnabled?: WithDefault<boolean, true>;
+    showsVerticalScrollIndicator?: WithDefault<boolean, true>;
+    showsHorizontalScrollIndicator?: WithDefault<boolean, false>;
+    bounces?: WithDefault<boolean, true>;
+    alwaysBounceVertical?: WithDefault<boolean, true>;
+    keyboardDismissMode?: WithDefault<"none" | "on-drag" | "interactive", "none">;
+    keyboardShouldPersistTaps?: WithDefault<"never" | "always" | "handled", "never">;
+    scrollEventThrottle?: WithDefault<Double, 0>;
+    decelerationRate?: WithDefault<Double, 0.998>;
+    contentInsetTop?: WithDefault<Double, 0>;
+    contentInsetRight?: WithDefault<Double, 0>;
+    contentInsetBottom?: WithDefault<Double, 0>;
+    contentInsetLeft?: WithDefault<Double, 0>;
+    refreshEnabled?: WithDefault<boolean, false>;
+    refreshing?: WithDefault<boolean, false>;
+    refreshTintColor?: ColorValue;
+    refreshColors?: ReadonlyArray<ColorValue>;
+    refreshProgressBackgroundColor?: ColorValue;
+    refreshProgressViewOffset?: WithDefault<Double, 0>;
+    refreshTitle?: string;
+    refreshTitleColor?: ColorValue;
+    refreshSize?: WithDefault<"default" | "large", "default">;
+    onContentViewportChange?: DirectEventHandler<Readonly<{
+        height: Double;
+    }>>;
+    onRefresh?: DirectEventHandler<null>;
+    onScroll?: DirectEventHandler<NativeScrollerScrollEvent>;
+    onScrollBeginDrag?: DirectEventHandler<NativeScrollerScrollEvent>;
+    onScrollEndDrag?: DirectEventHandler<NativeScrollerScrollEvent>;
+    onMomentumScrollBegin?: DirectEventHandler<NativeScrollerScrollEvent>;
+    onMomentumScrollEnd?: DirectEventHandler<NativeScrollerScrollEvent>;
+}
+type NativeScrollerHost = HostComponent<NativeProps>;
+export interface NativeCommands {
+    scrollTo: (viewRef: React.ElementRef<NativeScrollerHost>, x: Double, y: Double, animated: boolean) => void;
+    scrollToEnd: (viewRef: React.ElementRef<NativeScrollerHost>, animated: boolean) => void;
+    flashScrollIndicators: (viewRef: React.ElementRef<NativeScrollerHost>) => void;
+    setRefreshState: (viewRef: React.ElementRef<NativeScrollerHost>, refreshing: boolean) => void;
+}
+export declare const Commands: NativeCommands;
+declare const _default: NativeScrollerHost;
+export default _default;
+//# sourceMappingURL=NativeScrollerNativeComponent.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "3.0.157-alpha.257",
+  "version": "3.0.157-alpha.262",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -33,7 +33,9 @@
     "!**/__fixtures__",
     "!**/__mocks__",
     "!**/.*",
-    "!**/*.map"
+    "!**/*.map",
+    "common",
+    "react-native.config.js"
   ],
   "scripts": {
     "clean": "del-cli lib",
@@ -67,7 +69,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-native-logger": "3.0.157-alpha.255",
+    "@onekeyfe/react-native-native-logger": "3.0.157-alpha.262",
     "react": "*",
     "react-native": "*"
   },
@@ -99,7 +101,8 @@
     "ios": {
       "componentProvider": {
         "RNCViewPager": "RNCPagerViewComponentView",
-        "RNCCollapsiblePagerView": "RNCCollapsiblePagerViewComponentView"
+        "RNCCollapsiblePagerView": "RNCCollapsiblePagerViewComponentView",
+        "RNCNativeScroller": "RNCNativeScrollerComponentView"
       }
     }
   }

package/react-native-pager-view.podspec

@@ -13,7 +13,8 @@ Pod::Spec.new do |s|
   s.ios.deployment_target = "15.1"
   s.source       = { :git => "https://github.com/nicholasxuu/app-modules.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm}"
+  s.source_files = "ios/**/*.{h,m,mm}", "common/cpp/**/*.{h,cpp}"
+  s.pod_target_xcconfig = { "HEADER_SEARCH_PATHS" => '"$(PODS_TARGET_SRCROOT)/common/cpp"' }
   s.exclude_files = "ios/tests/**/*"
 
   s.test_spec "Tests" do |test_spec|

package/react-native.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        libraryName: 'pagerview',
+        componentDescriptors: [
+          'RNCViewPagerComponentDescriptor',
+          'RNCCollapsiblePagerViewComponentDescriptor',
+          'RNCNativeScrollerComponentDescriptor',
+        ],
+        cmakeListsPath: 'src/main/jni/CMakeLists.txt',
+      },
+    },
+  },
+};

package/src/CollapsiblePagerView.tsx

@@ -130,9 +130,8 @@ export interface CollapsiblePagerViewProps
   nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
   onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
   /**
-   * Animates the page change started by a native tab press. Defaults to true.
-   * Set false to jump straight to the pressed page, so a distant tab does not
-   * scroll through every page in between, including unmounted ones.
+   * Defaults to animating adjacent native tab presses and jumping directly to
+   * non-adjacent pages. Set true to always animate, or false to always jump.
    */
   nativeTabPressAnimationEnabled?: boolean;
   /** Optional native secondary sticky header for iOS and Android. */
@@ -191,6 +190,10 @@ export class CollapsiblePagerView extends React.PureComponent<
 
   private latestNativeTabTarget: number | null = null;
 
+  // Target of the last tab command native has received and not yet reported
+  // as selected. Commands superseded before their frame never reach native.
+  private dispatchedNativeTabTarget: number | null = null;
+
   private latestNativeSelectedPage = this.state.selectedPage;
 
   private nativePagerScrollState: OnPageScrollStateChangedEventData["pageScrollState"] =
@@ -283,6 +286,7 @@ export class CollapsiblePagerView extends React.PureComponent<
           if (commandId !== this.nativeTabCommandId || !this.nativeRef) {
             return;
           }
+          this.dispatchedNativeTabTarget = position;
           if (animated) {
             CollapsiblePagerViewNativeCommands.setPage(
               this.nativeRef,
@@ -355,6 +359,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       const transitionComplete = pendingTarget === position;
       if (transitionComplete) {
         this.latestNativeTabTarget = null;
+        this.dispatchedNativeTabTarget = null;
         this.nativeTabCommandQueuedDuringScroll = false;
       }
       this.setState(
@@ -387,6 +392,7 @@ export class CollapsiblePagerView extends React.PureComponent<
     ) {
       ++this.nativeTabCommandId;
       this.latestNativeTabTarget = null;
+      this.dispatchedNativeTabTarget = null;
       this.setState(
         { transientRetainedPages: [] },
         this.notifyMountedPagesChanged
@@ -409,9 +415,13 @@ export class CollapsiblePagerView extends React.PureComponent<
       (position !== this.state.selectedPage ||
         this.latestNativeTabTarget !== null)
     ) {
+      // Selection state lags an in-flight transition until native reports it.
+      const currentPage =
+        this.dispatchedNativeTabTarget ?? this.state.selectedPage;
       this.dispatchNativeTabPageCommand(
         position,
-        this.props.nativeTabPressAnimationEnabled ?? true
+        this.props.nativeTabPressAnimationEnabled ??
+          Math.abs(position - currentPage) <= 1
       );
     }
     this.props.onNativeTabPress?.(event);

package/src/NativeScroller.tsx

@@ -1,34 +1,311 @@
 import * as React from "react";
-import { ScrollView, type ScrollViewProps } from "react-native";
+import {
+  findNodeHandle,
+  Keyboard,
+  Platform,
+  StyleSheet,
+  TextInput,
+  View,
+  type GestureResponderEvent,
+  type NativeMethods,
+  type RefreshControlProps,
+  type ScrollView,
+  type ScrollViewProps,
+  type ViewProps,
+} from "react-native";
+
+import NativeScrollerHost, { Commands } from "./NativeScrollerNativeComponent";
 
 export const NATIVE_SCROLLER_NATIVE_ID_PREFIX =
   "rnc-collapsible-pager-native-scroller";
 
-export interface NativeScrollerProps extends ScrollViewProps {
-  /** Stable identity used when a page replaces or remounts its primary scroller. */
+/** Supported vertical subset; horizontal, snapping, zoom and sticky rows are not supported. */
+export interface NativeScrollerProps
+  extends ViewProps,
+    Pick<
+      ScrollViewProps,
+      | "contentContainerStyle"
+      | "onContentSizeChange"
+      | "scrollEnabled"
+      | "nestedScrollEnabled"
+      | "showsVerticalScrollIndicator"
+      | "showsHorizontalScrollIndicator"
+      | "bounces"
+      | "alwaysBounceVertical"
+      | "contentInset"
+      | "keyboardDismissMode"
+      | "keyboardShouldPersistTaps"
+      | "scrollEventThrottle"
+      | "decelerationRate"
+      | "onScroll"
+      | "onScrollBeginDrag"
+      | "onScrollEndDrag"
+      | "onMomentumScrollBegin"
+      | "onMomentumScrollEnd"
+    > {
   pagerScrollKey?: string;
+  /** iOS only. Android retains AndroidX's native fling physics. */
+  decelerationRate?: ScrollViewProps["decelerationRate"];
+  /** Standard RefreshControl props are mapped to the independently owned native controller. */
+  refreshControl?: React.ReactElement<RefreshControlProps>;
+}
+
+type HostRef = React.ElementRef<typeof NativeScrollerHost>;
+
+export interface NativeScrollerRef
+  extends NativeMethods,
+    Pick<
+      React.ElementRef<typeof ScrollView>,
+      "scrollTo" | "scrollToEnd" | "flashScrollIndicators"
+    > {
+  getNativeScrollRef(): HostRef | null;
+  getScrollableNode(): number | null;
 }
 
-/**
- * Primary non-virtualized vertical scroller for a CollapsiblePagerView page.
- */
+// The RN 0.86 JS registry distinguishes another input from an unhandled tap.
+// TextInput.State's public facade does not export this query.
+const textInputState =
+  require("react-native/Libraries/Components/TextInput/TextInputState")
+    .default as {
+    isTextInput(target: GestureResponderEvent["target"]): boolean;
+  };
+
+const styles = StyleSheet.create({
+  viewport: { flexGrow: 1, flexShrink: 1, overflow: "hidden" },
+  content: { position: "absolute", top: 0, left: 0, right: 0, flexShrink: 0 },
+});
+
 export const NativeScroller = React.forwardRef<
-  React.ElementRef<typeof ScrollView>,
+  NativeScrollerRef,
   NativeScrollerProps
 >(function NativeScroller(
-  { nativeID, nestedScrollEnabled = true, pagerScrollKey, ...props },
-  ref
+  {
+    children,
+    nativeID,
+    pagerScrollKey,
+    style,
+    contentContainerStyle,
+    onLayout,
+    onContentSizeChange,
+    refreshControl,
+    nestedScrollEnabled = true,
+    contentInset,
+    decelerationRate = "normal",
+    keyboardShouldPersistTaps = "never",
+    onScroll,
+    onScrollBeginDrag,
+    onMomentumScrollBegin,
+    onMomentumScrollEnd,
+    onStartShouldSetResponder,
+    onStartShouldSetResponderCapture,
+    onResponderGrant,
+    onResponderRelease,
+    onResponderTerminationRequest,
+    ...props
+  },
+  forwardedRef
 ) {
+  const hostRef = React.useRef<HostRef>(null);
   const generatedId = React.useId();
-  const scrollKey = pagerScrollKey ?? nativeID ?? generatedId;
+  const [contentViewportHeight, setContentViewportHeight] = React.useState(0);
+  const [contentSize, setContentSize] = React.useState({ width: 0, height: 0 });
+  const [refreshEpoch, requestRefreshSync] = React.useReducer(
+    (value: number) => value + 1,
+    0
+  );
+  const contentSizeRef = React.useRef(contentSize);
+  const scrolledSinceGrant = React.useRef(false);
+  const momentum = React.useRef(false);
+  const grantedDuringMomentum = React.useRef(false);
+  const persistTaps =
+    keyboardShouldPersistTaps === true
+      ? "always"
+      : keyboardShouldPersistTaps === false
+      ? "never"
+      : keyboardShouldPersistTaps;
+  const contentStyle = StyleSheet.flatten(contentContainerStyle);
+  const refresh = refreshControl?.props;
+  const rate =
+    typeof decelerationRate === "number"
+      ? decelerationRate
+      : decelerationRate === "fast"
+      ? Platform.OS === "ios"
+        ? 0.99
+        : 0.9
+      : Platform.OS === "ios"
+      ? 0.998
+      : 0.985;
+
+  React.useEffect(() => {
+    if (hostRef.current)
+      Commands.setRefreshState(hostRef.current, refresh?.refreshing ?? false);
+  }, [refresh?.refreshing, refreshEpoch]);
+
+  React.useImperativeHandle(
+    forwardedRef,
+    () => ({
+      scrollTo(options, x, animated) {
+        const host = hostRef.current;
+        if (!host) return;
+        if (typeof options === "number") {
+          Commands.scrollTo(host, x ?? 0, options, animated !== false);
+        } else {
+          Commands.scrollTo(
+            host,
+            options?.x ?? 0,
+            options?.y ?? 0,
+            options?.animated !== false
+          );
+        }
+      },
+      scrollToEnd(options) {
+        if (hostRef.current)
+          Commands.scrollToEnd(hostRef.current, options?.animated !== false);
+      },
+      flashScrollIndicators() {
+        if (hostRef.current) Commands.flashScrollIndicators(hostRef.current);
+      },
+      getNativeScrollRef: () => hostRef.current,
+      getScrollableNode: () => findNodeHandle(hostRef.current) ?? null,
+      measure: (...args) => hostRef.current?.measure(...args),
+      measureInWindow: (...args) => hostRef.current?.measureInWindow(...args),
+      measureLayout: (...args) => hostRef.current?.measureLayout(...args),
+      setNativeProps: (nativeProps) =>
+        hostRef.current?.setNativeProps(nativeProps),
+      focus: () => hostRef.current?.focus(),
+      blur: () => hostRef.current?.blur(),
+    }),
+    []
+  );
+
+  const keyboardIsDismissible = () =>
+    Boolean(
+      TextInput.State.currentlyFocusedInput() &&
+        (Keyboard.isVisible() ||
+          (Platform.OS === "android" && Number(Platform.Version) < 30)) &&
+        Keyboard.metrics()?.height !== 0
+    );
 
   return (
-    <ScrollView
+    <NativeScrollerHost
       {...props}
-      ref={ref}
-      nativeID={`${NATIVE_SCROLLER_NATIVE_ID_PREFIX}:${scrollKey}`}
+      ref={hostRef}
+      nativeID={`${NATIVE_SCROLLER_NATIVE_ID_PREFIX}:${
+        pagerScrollKey ?? nativeID ?? generatedId
+      }`}
+      style={[styles.viewport, style]}
       nestedScrollEnabled={nestedScrollEnabled}
-    />
+      contentWidth={contentSize.width}
+      contentHeight={contentSize.height}
+      contentInsetTop={contentInset?.top ?? 0}
+      contentInsetRight={contentInset?.right ?? 0}
+      contentInsetBottom={contentInset?.bottom ?? 0}
+      contentInsetLeft={contentInset?.left ?? 0}
+      decelerationRate={rate}
+      keyboardShouldPersistTaps={persistTaps}
+      refreshEnabled={Boolean(refresh) && refresh?.enabled !== false}
+      refreshing={refresh?.refreshing ?? false}
+      refreshTintColor={refresh?.tintColor}
+      refreshColors={refresh?.colors}
+      refreshProgressBackgroundColor={refresh?.progressBackgroundColor}
+      refreshProgressViewOffset={refresh?.progressViewOffset ?? 0}
+      refreshTitle={refresh?.title}
+      refreshTitleColor={refresh?.titleColor}
+      refreshSize={refresh?.size === "large" ? "large" : "default"}
+      onRefresh={() => {
+        try {
+          refresh?.onRefresh?.();
+        } finally {
+          requestRefreshSync();
+        }
+      }}
+      onLayout={onLayout}
+      onContentViewportChange={(event) => {
+        const height = event.nativeEvent.height;
+        if (!Number.isFinite(height) || height < 0) return;
+        setContentViewportHeight((previous) =>
+          previous === height ? previous : height
+        );
+      }}
+      onScroll={(event) => {
+        scrolledSinceGrant.current = true;
+        onScroll?.(event);
+      }}
+      onScrollBeginDrag={(event) => {
+        scrolledSinceGrant.current = true;
+        onScrollBeginDrag?.(event);
+      }}
+      onMomentumScrollBegin={(event) => {
+        momentum.current = true;
+        onMomentumScrollBegin?.(event);
+      }}
+      onMomentumScrollEnd={(event) => {
+        momentum.current = false;
+        onMomentumScrollEnd?.(event);
+      }}
+      onStartShouldSetResponder={(event) =>
+        onStartShouldSetResponder?.(event) ??
+        (persistTaps === "handled" &&
+          keyboardIsDismissible() &&
+          event.target !== TextInput.State.currentlyFocusedInput())
+      }
+      onStartShouldSetResponderCapture={(event) =>
+        onStartShouldSetResponderCapture?.(event) ??
+        (momentum.current ||
+          (persistTaps === "never" &&
+            keyboardIsDismissible() &&
+            typeof event.target !== "number" &&
+            !textInputState.isTextInput(event.target)))
+      }
+      onResponderGrant={(event) => {
+        scrolledSinceGrant.current = false;
+        grantedDuringMomentum.current = momentum.current;
+        onResponderGrant?.(event);
+      }}
+      onResponderRelease={(event) => {
+        onResponderRelease?.(event);
+        if (
+          persistTaps !== "always" &&
+          keyboardIsDismissible() &&
+          event.target !== TextInput.State.currentlyFocusedInput() &&
+          !scrolledSinceGrant.current &&
+          !grantedDuringMomentum.current
+        )
+          Keyboard.dismiss();
+      }}
+      onResponderTerminationRequest={(event) =>
+        onResponderTerminationRequest?.(event) ?? true
+      }
+    >
+      <View
+        collapsable={false}
+        style={[
+          contentContainerStyle,
+          (contentStyle?.flexGrow ?? 0) > 0 &&
+          (contentStyle?.minHeight === undefined ||
+            typeof contentStyle.minHeight === "number")
+            ? {
+                minHeight: Math.max(
+                  contentViewportHeight,
+                  contentStyle?.minHeight ?? 0
+                ),
+              }
+            : undefined,
+          styles.content,
+        ]}
+        onLayout={(event) => {
+          const { width, height } = event.nativeEvent.layout;
+          const previous = contentSizeRef.current;
+          if (previous.width === width && previous.height === height) return;
+          const next = { width, height };
+          contentSizeRef.current = next;
+          setContentSize(next);
+          onContentSizeChange?.(width, height);
+        }}
+      >
+        {children}
+      </View>
+    </NativeScrollerHost>
   );
 });