react-native-terra-ui 0.11.15 → 0.11.17

package/src/components/page-indicator/utils.ts

@@ -73,6 +73,17 @@ export function pageIndicatorViewportClipStyle(
   };
 }
 
+/**
+ * Holds the room of dots a variant chose not to mount.
+ *
+ * The track keeps its full width and keeps scrolling by the same amount, so
+ * skipped dots still have to occupy their slots — otherwise the mounted ones
+ * slide up the track and the window shows the wrong pages.
+ */
+export function pageIndicatorSpacerStyle(vertical: boolean, mainSize: number): ViewStyle {
+  return vertical ? { height: mainSize } : { width: mainSize };
+}
+
 function scaleCurveValue(curve: readonly number[], distance: number, tailScale: number): number {
   "worklet";
   if (distance < curve.length) return curve[distance] ?? tailScale;
@@ -178,3 +189,62 @@ export function pageIndicatorWindowScale(
 
   return pageIndicatorWindowSlotScale(positionInWindow, activeSlot, maxVisible);
 }
+
+/**
+ * Dots kept mounted beyond each edge of the visible window.
+ *
+ * One full window's worth. The window itself is `maxVisible` slots wide, so
+ * this leaves a whole screenful of slack on either side — enough that ordinary
+ * navigation (a swipe, a few pages at a time) never outruns the mounted range
+ * between the page change and React re-rendering with a new one.
+ */
+export const PAGE_INDICATOR_WINDOW_OVERSCAN = 5;
+
+/**
+ * Which dot indices are worth mounting, inclusive, for an active page of
+ * `anchor`.
+ *
+ * An indicator draws `maxVisible` slots and clips the rest, and every dot more
+ * than one page from the active one is drawn identically — same size, same
+ * scale, same opacity, same colour. Mounting one view per page therefore costs
+ * an animated style per page to render something nobody can see: at 500 pages
+ * that is 500 worklets for five visible dots, and it lands on every page
+ * change. Bounding what is mounted is what stops the indicator's cost scaling
+ * with the length of the thing it indicates.
+ *
+ * Derived from `computePageIndicatorWindowTranslate`, the same function that
+ * positions the track, so the mounted range and the visible window cannot
+ * disagree about where the window is — including at the ends, where the
+ * translate clamps and the window stops following the active page.
+ *
+ * Below the overflow threshold every dot is visible, so the range is the whole
+ * track and nothing changes.
+ */
+export function pageIndicatorMountedRange(
+  count: number,
+  anchor: number,
+  slot: number,
+  dotSize: number,
+  maxVisible: number,
+  activeMainSize = dotSize,
+  overscan = PAGE_INDICATOR_WINDOW_OVERSCAN
+): { start: number; end: number } {
+  const last = Math.max(0, count - 1);
+  if (count <= maxVisible) return { start: 0, end: last };
+
+  const translate = computePageIndicatorWindowTranslate(
+    count,
+    anchor,
+    slot,
+    dotSize,
+    maxVisible,
+    activeMainSize
+  );
+  // The same expression `pageIndicatorWindowScale` reads the window from.
+  const visibleStart = -translate / slot;
+
+  return {
+    start: Math.max(0, Math.floor(visibleStart) - overscan),
+    end: Math.min(last, Math.ceil(visibleStart) + maxVisible - 1 + overscan),
+  };
+}

package/src/components/page-indicator/variants/DotIndicator/index.tsx

@@ -6,6 +6,7 @@ import Animated, { useAnimatedStyle } from "react-native-reanimated";
 
 import type { ColorToken } from "#theme/types";
 import { usePageIndicatorCore } from "../../hooks/use-page-indicator-core";
+import { usePageIndicatorWindow } from "../../hooks/use-page-indicator-window";
 import { PageIndicatorRoot } from "../../PageIndicatorRoot";
 import {
   computePageIndicatorWindowTranslate,
@@ -71,7 +72,17 @@ export function DotIndicator({
   const fullTrackMainSize = pageIndicatorTrackMainSize(count, slot, dotSize);
   const overflows = count > maxVisible;
 
-  const indices = useMemo(() => Array.from({ length: count }, (_, index) => index), [count]);
+  /*
+    No spacers here, unlike the pill variant: an `InactiveDot` is absolutely
+    positioned from its own index, so a dot that is not mounted leaves a gap
+    exactly where it would have been and the rest do not move.
+  */
+  const { start, end } = usePageIndicatorWindow(count, current, progress, slot, dotSize, maxVisible);
+
+  const indices = useMemo(
+    () => Array.from({ length: end - start + 1 }, (_, offset) => start + offset),
+    [start, end]
+  );
 
   const trackStyle = useAnimatedStyle(() => {
     const translate = computePageIndicatorWindowTranslate(count, progress.value, slot, dotSize, maxVisible);

package/src/components/page-indicator/variants/PillIndicator/index.tsx

@@ -1,17 +1,19 @@
 import { useMemo } from "react";
-import type { StyleProp, ViewStyle } from "react-native";
+import { type StyleProp, View, type ViewStyle } from "react-native";
 
 import type { SharedValue } from "react-native-reanimated";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 
 import type { ColorToken } from "#theme/types";
 import { usePageIndicatorCore } from "../../hooks/use-page-indicator-core";
+import { usePageIndicatorWindow } from "../../hooks/use-page-indicator-window";
 import { PageIndicatorRoot } from "../../PageIndicatorRoot";
 import {
   computePageIndicatorWindowTranslate,
   DEFAULT_PAGE_INDICATOR_MAX_VISIBLE,
   PAGE_INDICATOR_SINGLE_PAGE_DURATION,
   pageIndicatorAxisTranslateStyle,
+  pageIndicatorSpacerStyle,
   pageIndicatorTrackMainSize,
   pageIndicatorViewportMainSize,
 } from "../../utils";
@@ -62,7 +64,33 @@ export function PillIndicator({
   const fullTrackMainSize = pageIndicatorTrackMainSize(count, slot, dotSize, activeWidth);
   const overflows = count > maxVisible;
 
-  const indices = useMemo(() => Array.from({ length: count }, (_, index) => index), [count]);
+  const { start, end } = usePageIndicatorWindow(
+    count,
+    current,
+    progress,
+    slot,
+    dotSize,
+    maxVisible,
+    activeWidth
+  );
+
+  const indices = useMemo(
+    () => Array.from({ length: end - start + 1 }, (_, offset) => start + offset),
+    [start, end]
+  );
+
+  /*
+    The track is still `count` slots wide and still scrolls the same way, so the
+    dots that are not mounted have to leave their room behind. Each unmounted
+    dot occupies exactly one slot — it is inactive, and only the active dot is
+    ever wider than `dotSize` — so the space before the window is `start` slots
+    and the space after it is whatever is left.
+
+    Less one gap apiece, because the row's own `gap` supplies the space between
+    a spacer and the first dot beside it.
+  */
+  const leadMainSize = start * slot - gap;
+  const tailMainSize = (count - 1 - end) * slot - gap;
 
   const trackStyle = useAnimatedStyle(() => {
     const displayProgress = pillIndicatorJumpDisplayProgress(
@@ -107,6 +135,7 @@ export function PillIndicator({
           overflows ? trackStyle : null,
         ]}
       >
+        {leadMainSize > 0 && <View style={pageIndicatorSpacerStyle(vertical, leadMainSize)} />}
         {indices.map((index) => (
           <PillIndicatorDot
             key={index}
@@ -121,6 +150,7 @@ export function PillIndicator({
             maxVisible={maxVisible}
           />
         ))}
+        {tailMainSize > 0 && <View style={pageIndicatorSpacerStyle(vertical, tailMainSize)} />}
       </Animated.View>
     </PageIndicatorRoot>
   );