@onekeyfe/react-native-pager-view 3.0.114 → 3.0.115

package/ios/RNCPagerViewComponentView.mm

@@ -593,9 +593,11 @@ using namespace facebook::react;
 
 // The blocker gesture never actually does anything — it only serves as a gate
 - (void)blockerGestureFired:(UIPanGestureRecognizer *)recognizer {
-    // Immediately cancel so it doesn't interfere with other gestures
+    // Reset through the public enabled API. UIGestureRecognizer.state is
+    // read-only for clients; only recognizer subclasses may assign it.
     if (recognizer.state == UIGestureRecognizerStateBegan) {
-        recognizer.state = UIGestureRecognizerStateCancelled;
+        recognizer.enabled = NO;
+        recognizer.enabled = YES;
     }
 }
 

package/lib/module/CollapsiblePagerView.js

@@ -0,0 +1,167 @@
+"use strict";
+
+import React from "react";
+import { I18nManager, Platform, StyleSheet, View } from "react-native";
+import CollapsiblePagerViewNativeComponent, { Commands as CollapsiblePagerViewNativeCommands } from "./CollapsiblePagerViewNativeComponent";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const pageIndex = value => {
+  const index = Math.trunc(value);
+  return Number.isFinite(index) ? index : null;
+};
+const clampedPageIndex = (value, pageCount) => Math.min(Math.max(0, pageIndex(value) ?? 0), Math.max(0, pageCount - 1));
+const pageKey = (child, index) => {
+  if (/*#__PURE__*/React.isValidElement(child) && child.key != null) {
+    return String(child.key);
+  }
+  return `page-${index}`;
+};
+
+/**
+ * Pager variant whose vertical header coordination is performed by the native
+ * scrolling containers. React participates only at settled page boundaries to
+ * retain the selected/adjacent heavy page subtrees.
+ */
+export class CollapsiblePagerView extends React.PureComponent {
+  state = {
+    selectedPage: clampedPageIndex(this.props.initialPage ?? 0, React.Children.toArray(this.props.children).length)
+  };
+  nativeRef = null;
+  lastMountSignature = null;
+  componentDidMount() {
+    this.notifyMountedPagesChanged();
+  }
+  componentDidUpdate() {
+    const pageCount = this.pages().length;
+    const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
+    if (selectedPage !== this.state.selectedPage) {
+      this.setState({
+        selectedPage
+      });
+      return;
+    }
+    this.notifyMountedPagesChanged();
+  }
+  setPage = selectedPage => {
+    const position = pageIndex(selectedPage);
+    if (this.nativeRef && position !== null && position >= 0 && position < this.pages().length) {
+      CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, position);
+    }
+  };
+  setPageWithoutAnimation = selectedPage => {
+    const position = pageIndex(selectedPage);
+    if (this.nativeRef && position !== null && position >= 0 && position < this.pages().length) {
+      CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(this.nativeRef, position);
+    }
+  };
+  setScrollEnabled = scrollEnabled => {
+    if (this.nativeRef) {
+      CollapsiblePagerViewNativeCommands.setScrollEnabledImperatively(this.nativeRef, scrollEnabled);
+    }
+  };
+  pages() {
+    return React.Children.toArray(this.props.children);
+  }
+  retentionDistance() {
+    return Math.max(0, Math.floor(this.props.pageRetentionDistance ?? 1));
+  }
+  mountedPages(pageCount = this.pages().length) {
+    const distance = this.retentionDistance();
+    const selected = Math.min(Math.max(0, this.state.selectedPage), Math.max(0, pageCount - 1));
+    const mounted = [];
+    for (let index = 0; index < pageCount; index += 1) {
+      if (Math.abs(index - selected) <= distance) {
+        mounted.push(index);
+      }
+    }
+    return mounted;
+  }
+  notifyMountedPagesChanged = () => {
+    if (!this.props.onMountedPagesChanged) {
+      return;
+    }
+    const pages = this.pages();
+    const state = {
+      position: this.state.selectedPage,
+      mountedPages: this.mountedPages(pages.length),
+      pageKeys: pages.map(pageKey)
+    };
+    const signature = JSON.stringify(state);
+    if (signature === this.lastMountSignature) {
+      return;
+    }
+    this.lastMountSignature = signature;
+    this.props.onMountedPagesChanged(state);
+  };
+  onPageSelected = event => {
+    const position = clampedPageIndex(event.nativeEvent.position, this.pages().length);
+    if (position !== this.state.selectedPage) {
+      this.setState({
+        selectedPage: position
+      }, this.notifyMountedPagesChanged);
+    }
+    this.props.onPageSelected?.(event);
+  };
+  render() {
+    const {
+      children: _children,
+      header,
+      stickyHeader,
+      headerHeight,
+      stickyHeaderHeight,
+      pageRetentionDistance: _pageRetentionDistance,
+      onMountedPagesChanged: _onMountedPagesChanged,
+      onPageSelected: _onPageSelected,
+      layoutDirection,
+      offscreenPageLimit,
+      ...nativeProps
+    } = this.props;
+    const pages = this.pages();
+    const pageKeys = pages.map(pageKey);
+    const retained = new Set(this.mountedPages(pages.length));
+    const deducedLayoutDirection = !layoutDirection || layoutDirection === "locale" ? I18nManager.isRTL ? "rtl" : "ltr" : layoutDirection;
+    return /*#__PURE__*/_jsxs(CollapsiblePagerViewNativeComponent, {
+      ...nativeProps,
+      ref: ref => {
+        this.nativeRef = ref;
+      },
+      layoutDirection: deducedLayoutDirection,
+      offscreenPageLimit: Math.max(1, offscreenPageLimit ?? 1),
+      headerHeight: Math.max(0, Math.round(headerHeight)),
+      stickyHeaderHeight: Math.max(0, Math.round(stickyHeaderHeight)),
+      pageKeys: JSON.stringify(pageKeys),
+      retainedPages: JSON.stringify([...retained]),
+      onPageSelected: this.onPageSelected,
+      children: [/*#__PURE__*/_jsx(View, {
+        collapsable: false,
+        pointerEvents: "box-none",
+        style: [styles.slot, {
+          bottom: undefined,
+          height: Math.max(0, Math.round(headerHeight))
+        }],
+        children: header
+      }, "collapsible-header"), /*#__PURE__*/_jsx(View, {
+        collapsable: false,
+        pointerEvents: "box-none",
+        style: [styles.slot, {
+          top: Math.max(0, Math.round(headerHeight)),
+          bottom: undefined,
+          height: Math.max(0, Math.round(stickyHeaderHeight))
+        }],
+        children: stickyHeader
+      }, "sticky-header"), pages.map((page, index) => /*#__PURE__*/_jsx(View, {
+        collapsable: false,
+        style: [styles.slot,
+        // Android translates the expanded pager while consuming header scroll.
+        // Keep Yoga's page bounds aligned with that native viewport.
+        Platform.OS === "android" ? {
+          bottom: -Math.max(0, Math.round(headerHeight))
+        } : null],
+        children: retained.has(index) ? page : null
+      }, pageKeys[index]))]
+    });
+  }
+}
+const styles = {
+  slot: StyleSheet.absoluteFill
+};
+//# sourceMappingURL=CollapsiblePagerView.js.map

package/lib/module/CollapsiblePagerView.web.js

@@ -0,0 +1,478 @@
+"use strict";
+
+import React from "react";
+import { I18nManager, StyleSheet, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COLLAPSE_ANIMATION_NAME = "ok-collapsible-pager-collapse";
+const COLLAPSE_STYLE_ID = "ok-collapsible-pager-styles";
+const PAGER_HEADER_INSET = "--ok-collapsible-pager-header-inset";
+const PAGER_STICKY_INSET = "--ok-collapsible-pager-sticky-inset";
+let collapsiblePagerWebInstance = 0;
+const pageIndex = value => {
+  const index = Math.trunc(value);
+  return Number.isFinite(index) ? index : null;
+};
+const clampedPageIndex = (value, pageCount) => Math.min(Math.max(0, pageIndex(value) ?? 0), Math.max(0, pageCount - 1));
+const webElement = node => {
+  const element = node;
+  return element && typeof element.querySelector === "function" && typeof element.addEventListener === "function" ? element : null;
+};
+const timelineStyle = element => element.style;
+function ensureCollapseAnimation(document) {
+  if (document.getElementById(COLLAPSE_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = COLLAPSE_STYLE_ID;
+  style.textContent = `@keyframes ${COLLAPSE_ANIMATION_NAME}{from{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--ok-collapsible-header-height)))}}`;
+  document.head.appendChild(style);
+}
+const pageKey = (child, index) => {
+  if (/*#__PURE__*/React.isValidElement(child) && child.key != null) return String(child.key);
+  return `page-${index}`;
+};
+
+/** Web counterpart of the native collapsible pager contract. */
+export class CollapsiblePagerView extends React.PureComponent {
+  state = {
+    selectedPage: clampedPageIndex(this.props.initialPage ?? 0, React.Children.toArray(this.props.children).length),
+    animateTransition: true
+  };
+  root = null;
+  track = null;
+  touchStartX = null;
+  touchStartY = null;
+  horizontalTouch = false;
+  pageOffsets = new Map();
+  pageHosts = new Map();
+  sharedHeaderOffset = 0;
+  scrollEnabled = this.props.scrollEnabled ?? true;
+  lastMountSignature = null;
+  configureFrame = null;
+  transitionTimer = null;
+  pageScrollState = "idle";
+  configuredScrollElement = null;
+  timelineName = `--ok-collapsible-pager-${++collapsiblePagerWebInstance}`;
+  componentDidMount() {
+    if (this.root) ensureCollapseAnimation(this.root.ownerDocument);
+    this.scheduleScrollConfiguration();
+    this.notifyMountedPagesChanged();
+    this.emitDiagnostics("mounted");
+  }
+  componentDidUpdate(previousProps) {
+    if (previousProps.scrollEnabled !== this.props.scrollEnabled) {
+      this.scrollEnabled = this.props.scrollEnabled ?? true;
+      if (!this.scrollEnabled) {
+        this.touchStartX = null;
+        this.touchStartY = null;
+        this.horizontalTouch = false;
+        this.finishPageTransition();
+      }
+    }
+    const pageCount = this.pages().length;
+    const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
+    if (selectedPage !== this.state.selectedPage) {
+      this.finishPageTransition();
+      this.setState({
+        selectedPage,
+        animateTransition: false
+      });
+      return;
+    }
+    this.scheduleScrollConfiguration();
+    this.notifyMountedPagesChanged();
+  }
+  componentWillUnmount() {
+    this.savePageOffset(this.state.selectedPage);
+    if (this.configureFrame !== null) {
+      cancelAnimationFrame(this.configureFrame);
+      this.configureFrame = null;
+    }
+    if (this.transitionTimer !== null) {
+      clearTimeout(this.transitionTimer);
+      this.transitionTimer = null;
+    }
+    this.setTrack(null);
+    this.restoreConfiguredScrollElement();
+  }
+  setPage = selectedPage => {
+    this.selectPage(selectedPage, true);
+  };
+  setPageWithoutAnimation = selectedPage => {
+    this.selectPage(selectedPage, false);
+  };
+  setScrollEnabled = scrollEnabled => {
+    this.scrollEnabled = scrollEnabled;
+  };
+  pages() {
+    return React.Children.toArray(this.props.children);
+  }
+  retentionDistance() {
+    return Math.max(0, Math.floor(this.props.pageRetentionDistance ?? 1));
+  }
+  mountedPages(pageCount = this.pages().length, selected = this.state.selectedPage) {
+    const mounted = [];
+    const distance = this.retentionDistance();
+    for (let index = 0; index < pageCount; index += 1) {
+      if (Math.abs(index - selected) <= distance) mounted.push(index);
+    }
+    return mounted;
+  }
+  nativeEvent(nativeEvent) {
+    return {
+      nativeEvent
+    };
+  }
+  emitPageScrollState(pageScrollState) {
+    if (pageScrollState === this.pageScrollState) return;
+    this.pageScrollState = pageScrollState;
+    this.props.onPageScrollStateChanged?.(this.nativeEvent({
+      pageScrollState
+    }));
+  }
+  finishPageTransition = () => {
+    if (this.transitionTimer !== null) {
+      clearTimeout(this.transitionTimer);
+      this.transitionTimer = null;
+    }
+    this.emitPageScrollState("idle");
+  };
+  beginPageTransition() {
+    if (this.transitionTimer !== null) clearTimeout(this.transitionTimer);
+    this.emitPageScrollState("settling");
+    this.transitionTimer = setTimeout(this.finishPageTransition, 320);
+  }
+  onTrackTransitionEnd = event => {
+    if (event.target === this.track && event.propertyName === "transform") {
+      this.finishPageTransition();
+    }
+  };
+  setTrack = node => {
+    const track = webElement(node);
+    if (track === this.track) return;
+    this.track?.removeEventListener("transitionend", this.onTrackTransitionEnd);
+    this.track = track;
+    this.track?.addEventListener("transitionend", this.onTrackTransitionEnd);
+  };
+  pageScrollElement(index) {
+    const pageHost = this.pageHosts.get(index);
+    return pageHost?.querySelector(".ok-native-list-viewport, [data-collapsible-pager-scroll]") ?? pageHost;
+  }
+  notifyInsetsChanged(element) {
+    const EventConstructor = element.ownerDocument.defaultView?.Event;
+    if (EventConstructor) {
+      element.dispatchEvent(new EventConstructor("ok-collapsible-pager-insets-changed"));
+    }
+  }
+  restoreConfiguredScrollElement() {
+    const configured = this.configuredScrollElement;
+    if (!configured) return;
+    configured.element.removeEventListener("scrollend", this.onVerticalScrollSettled);
+    const style = timelineStyle(configured.element);
+    style.paddingTop = configured.paddingTop;
+    style.boxSizing = configured.boxSizing;
+    style.scrollTimelineName = configured.scrollTimelineName;
+    style.scrollTimelineAxis = configured.scrollTimelineAxis;
+    style.setProperty(PAGER_HEADER_INSET, configured.pagerHeaderInset);
+    style.setProperty(PAGER_STICKY_INSET, configured.pagerStickyInset);
+    configured.element.removeAttribute("data-collapsible-pager-active");
+    this.notifyInsetsChanged(configured.element);
+    this.configuredScrollElement = null;
+  }
+  configureActiveScrollElement = () => {
+    this.configureFrame = null;
+    const element = this.pageScrollElement(this.state.selectedPage);
+    if (!element) return;
+    if (this.configuredScrollElement?.element !== element) {
+      this.restoreConfiguredScrollElement();
+      const style = timelineStyle(element);
+      const computedPaddingTop = element.ownerDocument.defaultView?.getComputedStyle(element).paddingTop || style.paddingTop || "0px";
+      this.configuredScrollElement = {
+        element,
+        paddingTop: style.paddingTop,
+        basePaddingTop: computedPaddingTop,
+        boxSizing: style.boxSizing,
+        scrollTimelineName: style.scrollTimelineName,
+        scrollTimelineAxis: style.scrollTimelineAxis,
+        pagerHeaderInset: style.getPropertyValue(PAGER_HEADER_INSET),
+        pagerStickyInset: style.getPropertyValue(PAGER_STICKY_INSET)
+      };
+      element.addEventListener("scrollend", this.onVerticalScrollSettled);
+    }
+    const style = timelineStyle(element);
+    const headerInset = Math.max(0, this.props.headerHeight);
+    const stickyInset = Math.max(0, this.props.stickyHeaderHeight);
+    const basePaddingTop = this.configuredScrollElement?.basePaddingTop ?? "0px";
+    const paddingTop = `calc(${basePaddingTop} + ${headerInset + stickyInset}px)`;
+    const headerInsetValue = `${headerInset}px`;
+    const stickyInsetValue = `${stickyInset}px`;
+    const insetsChanged = style.paddingTop !== paddingTop || style.getPropertyValue(PAGER_HEADER_INSET) !== headerInsetValue || style.getPropertyValue(PAGER_STICKY_INSET) !== stickyInsetValue;
+    style.paddingTop = paddingTop;
+    style.boxSizing = "border-box";
+    style.scrollTimelineName = this.timelineName;
+    style.scrollTimelineAxis = "block";
+    style.setProperty(PAGER_HEADER_INSET, headerInsetValue);
+    style.setProperty(PAGER_STICKY_INSET, stickyInsetValue);
+    element.setAttribute("data-collapsible-pager-active", "true");
+    if (insetsChanged) this.notifyInsetsChanged(element);
+  };
+  scheduleScrollConfiguration() {
+    if (this.configureFrame !== null) return;
+    if (typeof requestAnimationFrame === "function") {
+      this.configureFrame = requestAnimationFrame(this.configureActiveScrollElement);
+    } else {
+      this.configureActiveScrollElement();
+    }
+  }
+  onVerticalScrollSettled = () => {
+    this.savePageOffset(this.state.selectedPage);
+    this.emitDiagnostics("scroll-settled");
+  };
+  savePageOffset(index) {
+    const key = this.pages().map(pageKey)[index];
+    const scrollElement = this.pageScrollElement(index);
+    if (key && scrollElement) {
+      this.pageOffsets.set(key, scrollElement.scrollTop);
+      this.sharedHeaderOffset = Math.min(Math.max(scrollElement.scrollTop, 0), Math.max(0, this.props.headerHeight));
+    }
+  }
+  restorePageOffset(index) {
+    const key = this.pages().map(pageKey)[index];
+    const scrollElement = this.pageScrollElement(index);
+    if (!key || !scrollElement) return;
+    scrollElement.scrollTop = Math.max(this.pageOffsets.get(key) ?? this.sharedHeaderOffset, this.sharedHeaderOffset);
+  }
+  selectPage(selectedPage, animated) {
+    const pages = this.pages();
+    const position = pageIndex(selectedPage);
+    if (position === null || position < 0 || position >= pages.length || position === this.state.selectedPage) {
+      return;
+    }
+    this.savePageOffset(this.state.selectedPage);
+    if (animated) this.beginPageTransition();else this.finishPageTransition();
+    this.setState({
+      selectedPage: position,
+      animateTransition: animated
+    }, () => {
+      this.scheduleScrollConfiguration();
+      const restore = () => {
+        this.configureActiveScrollElement();
+        this.restorePageOffset(position);
+      };
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(restore);
+      } else {
+        setTimeout(restore, 0);
+      }
+      this.props.onPageSelected?.(this.nativeEvent({
+        position
+      }));
+      this.props.onPageScroll?.(this.nativeEvent({
+        position,
+        offset: 0
+      }));
+      this.notifyMountedPagesChanged();
+      this.emitDiagnostics("page-selected");
+    });
+  }
+  notifyMountedPagesChanged = () => {
+    if (!this.props.onMountedPagesChanged) return;
+    const pages = this.pages();
+    const state = {
+      position: this.state.selectedPage,
+      mountedPages: this.mountedPages(pages.length),
+      pageKeys: pages.map(pageKey)
+    };
+    const signature = JSON.stringify(state);
+    if (signature === this.lastMountSignature) return;
+    this.lastMountSignature = signature;
+    this.props.onMountedPagesChanged(state);
+  };
+  emitDiagnostics(reason) {
+    const pages = this.pages();
+    const retainedPages = this.mountedPages(pages.length);
+    this.props.onCollapsibleStateChanged?.(this.nativeEvent({
+      position: this.state.selectedPage,
+      headerOffset: Math.min(Math.max(this.pageScrollElement(this.state.selectedPage)?.scrollTop ?? 0, 0), Math.max(0, this.props.headerHeight)),
+      nativePageCount: pages.length,
+      attachedPageCount: retainedPages.length,
+      observedScrollableCount: retainedPages.reduce((count, index) => count + (this.pageScrollElement(index) ? 1 : 0), 0),
+      retainedPages: JSON.stringify(retainedPages),
+      reason
+    }));
+  }
+  onTouchStart = event => {
+    if (!this.scrollEnabled) return;
+    const touch = event.nativeEvent.touches[0];
+    if (!touch) return;
+    this.touchStartX = touch.pageX;
+    this.touchStartY = touch.pageY;
+    this.horizontalTouch = false;
+  };
+  onTouchMove = event => {
+    if (this.touchStartX == null || !this.scrollEnabled || this.horizontalTouch) return;
+    const touch = event.nativeEvent.touches[0];
+    if (!touch) return;
+    const deltaX = touch.pageX - this.touchStartX;
+    const deltaY = touch.pageY - (this.touchStartY ?? touch.pageY);
+    if (Math.abs(deltaX) >= 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+      this.horizontalTouch = true;
+      this.emitPageScrollState("dragging");
+    }
+  };
+  onTouchEnd = event => {
+    if (this.touchStartX == null || !this.scrollEnabled) return;
+    const touch = event.nativeEvent.changedTouches[0];
+    if (!touch) {
+      this.onTouchCancel();
+      return;
+    }
+    const delta = touch.pageX - this.touchStartX;
+    const verticalDelta = touch.pageY - (this.touchStartY ?? touch.pageY);
+    this.touchStartX = null;
+    this.touchStartY = null;
+    const rtl = this.props.layoutDirection === "rtl" || (!this.props.layoutDirection || this.props.layoutDirection === "locale") && I18nManager.isRTL;
+    const direction = Math.abs(delta) >= 40 && Math.abs(delta) > Math.abs(verticalDelta) ? delta < 0 ? 1 : -1 : 0;
+    const next = this.state.selectedPage + (rtl ? -direction : direction);
+    if (direction === 0 || next < 0 || next >= this.pages().length) {
+      const wasHorizontal = this.horizontalTouch;
+      this.horizontalTouch = false;
+      if (wasHorizontal) this.finishPageTransition();
+      return;
+    }
+    this.horizontalTouch = false;
+    this.selectPage(next, true);
+  };
+  onTouchCancel = () => {
+    const wasHorizontal = this.horizontalTouch;
+    this.touchStartX = null;
+    this.touchStartY = null;
+    this.horizontalTouch = false;
+    if (wasHorizontal) this.finishPageTransition();
+  };
+  render() {
+    const {
+      children: _children,
+      header,
+      stickyHeader,
+      headerHeight: _headerHeight,
+      stickyHeaderHeight: _stickyHeaderHeight,
+      pageRetentionDistance: _pageRetentionDistance,
+      layoutDirection: _layoutDirection,
+      scrollEnabled: _scrollEnabled,
+      initialPage: _initialPage,
+      offscreenPageLimit: _offscreenPageLimit,
+      onPageScroll: _onPageScroll,
+      onPageSelected: _onPageSelected,
+      onPageScrollStateChanged: _onPageScrollStateChanged,
+      onCollapsibleStateChanged: _onCollapsibleStateChanged,
+      onMountedPagesChanged: _onMountedPagesChanged,
+      style,
+      ...viewProps
+    } = this.props;
+    const pages = this.pages();
+    const keys = pages.map(pageKey);
+    const retained = new Set(this.mountedPages(pages.length));
+    const pageWidth = pages.length > 0 ? `${100 / pages.length}%` : "100%";
+    const collapseAnimation = {
+      "--ok-collapsible-header-height": `${Math.max(0, this.props.headerHeight)}px`,
+      animationName: COLLAPSE_ANIMATION_NAME,
+      animationDuration: "auto",
+      animationFillMode: "both",
+      animationTimingFunction: "linear",
+      animationTimeline: this.timelineName,
+      animationRange: `0px ${Math.max(1, this.props.headerHeight)}px`
+    };
+    const trackStyle = [styles.track, {
+      width: `${Math.max(1, pages.length) * 100}%`,
+      transform: [{
+        translateX: `${-this.state.selectedPage * 100 / Math.max(1, pages.length)}%`
+      }],
+      transitionProperty: "transform",
+      transitionDuration: this.state.animateTransition ? "240ms" : "0ms"
+    }];
+    return /*#__PURE__*/_jsxs(View, {
+      ...viewProps,
+      ref: node => {
+        this.root = webElement(node);
+      },
+      style: [styles.root, {
+        timelineScope: this.timelineName
+      }, style],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.header, {
+          height: Math.max(0, this.props.headerHeight)
+        }, collapseAnimation],
+        children: header
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.sticky, {
+          top: Math.max(0, this.props.headerHeight),
+          height: Math.max(0, this.props.stickyHeaderHeight)
+        }, collapseAnimation],
+        children: stickyHeader
+      }), /*#__PURE__*/_jsx(View, {
+        ref: this.setTrack,
+        style: trackStyle,
+        onTouchStart: this.onTouchStart,
+        onTouchMove: this.onTouchMove,
+        onTouchEnd: this.onTouchEnd,
+        onTouchCancel: this.onTouchCancel,
+        children: pages.map((page, index) => /*#__PURE__*/_jsx(View, {
+          ref: node => {
+            const host = webElement(node);
+            if (host) {
+              host.inert = index !== this.state.selectedPage;
+              this.pageHosts.set(index, host);
+            } else {
+              this.pageHosts.delete(index);
+            }
+          },
+          style: [styles.page, {
+            width: pageWidth
+          }],
+          "aria-hidden": index !== this.state.selectedPage,
+          children: retained.has(index) ? page : null
+        }, keys[index]))
+      })]
+    });
+  }
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    overflow: "hidden",
+    position: "relative"
+  },
+  header: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    zIndex: 3,
+    overflow: "hidden"
+  },
+  sticky: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    zIndex: 4,
+    overflow: "hidden"
+  },
+  track: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "stretch",
+    touchAction: "pan-y"
+  },
+  page: {
+    flexShrink: 0,
+    minWidth: 0,
+    minHeight: 0,
+    height: "100%",
+    display: "flex",
+    position: "relative",
+    overflowY: "auto",
+    overflowX: "hidden"
+  }
+});
+//# sourceMappingURL=CollapsiblePagerView.web.js.map