react-native-terra-ui 0.11.16 → 0.11.17

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.11.17](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.16...v0.11.17) (2026-09-20)
+
+### Bug Fixes
+
+* **ui:** [page-indicator] mount only the dots the window can show ([#28](https://github.com/earthlin9/react-native-terra-ui/issues/28)) ([a11ee28](https://github.com/earthlin9/react-native-terra-ui/commit/a11ee2830598b0cd75f6ad88cc27f54563a93d00))
+
+### Documentation
+
+* [button] [chip] document the tertiary variant/color ([97cdcfc](https://github.com/earthlin9/react-native-terra-ui/commit/97cdcfc485bcfd18cc41535a4c67c0dd013557ad))
+
 ## [0.11.16](https://github.com/earthling-std/react-native-terra-ui/compare/v0.11.15...v0.11.16) (2026-09-20)
 
 ### Features

package/lib/module/components/page-indicator/hooks/use-page-indicator-window.js

@@ -0,0 +1,60 @@
+"use strict";
+
+import { useMemo, useState } from "react";
+import { runOnJS, useAnimatedReaction, useSharedValue } from "react-native-reanimated";
+import { isPageIndicatorSharedValue, pageIndicatorMountedRange } from "../utils.js";
+/**
+ * The slice of dots a variant should mount, kept in step with the active page.
+ *
+ * Both variants clip to a window of `maxVisible` slots and scroll a track
+ * behind it, so all but a handful of dots are drawn outside the viewport. This
+ * is what lets them skip building those: the range covers the visible window
+ * plus a generous overscan, and moves only when the active page leaves it.
+ *
+ * **Driven by `progress`, not by `current`.** `current` may be a shared value
+ * for scroll-linked motion, in which case React never re-renders on a page
+ * change and a range derived from props would sit still while the track slid
+ * out from under it. `progress` is the one place both spellings of `current`
+ * have already been resolved into a single number.
+ *
+ * The reaction only reaches JS when the page moves *outside* the mounted range
+ * — not on every frame, and not on every page. A one-page step normally costs
+ * no render at all, because the neighbour was already mounted; a long jump
+ * costs one render per window it crosses rather than one per page.
+ *
+ * Known limit: during a jump of many pages the track slides faster than the
+ * range is re-rendered, so dots in the middle of that flight may not be mounted
+ * as they pass. They are identical inactive dots moving too fast to read, and
+ * the alternative — mounting every page between the two — is the cost this
+ * exists to avoid.
+ */
+export function usePageIndicatorWindow(count, current, progress, slot, dotSize, maxVisible, activeMainSize = dotSize) {
+  const virtualized = count > maxVisible;
+
+  /*
+    Seeded from `current` so an indicator mounted straight onto a late page
+    draws that page's dots on its first frame rather than the first page's.
+    Zero for a shared value, which cannot be read during render — the reaction
+    below corrects it on the first frame that matters.
+  */
+  const [anchor, setAnchor] = useState(() => current === undefined || isPageIndicatorSharedValue(current) ? 0 : Math.round(current));
+  const window = useMemo(() => pageIndicatorMountedRange(count, anchor, slot, dotSize, maxVisible, activeMainSize), [count, anchor, slot, dotSize, maxVisible, activeMainSize]);
+
+  /*
+    The live range, on the UI thread, so the reaction can decide for itself
+    whether a page change matters. Reading React state from a worklet is not an
+    option, and crossing to JS to ask would defeat the point of asking.
+  */
+  const mounted = useSharedValue(window);
+  mounted.value = window;
+  useAnimatedReaction(() => Math.round(progress.value), page => {
+    if (!virtualized) return;
+    const {
+      start,
+      end
+    } = mounted.value;
+    if (page < start || page > end) runOnJS(setAnchor)(page);
+  }, [virtualized]);
+  return window;
+}
+//# sourceMappingURL=use-page-indicator-window.js.map

package/lib/module/components/page-indicator/hooks/use-page-indicator-window.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useState","runOnJS","useAnimatedReaction","useSharedValue","isPageIndicatorSharedValue","pageIndicatorMountedRange","usePageIndicatorWindow","count","current","progress","slot","dotSize","maxVisible","activeMainSize","virtualized","anchor","setAnchor","undefined","Math","round","window","mounted","value","page","start","end"],"sourceRoot":"../../../../../src","sources":["components/page-indicator/hooks/use-page-indicator-window.ts"],"mappings":";;AAAA,SAASA,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEzC,SAASC,OAAO,EAAoBC,mBAAmB,EAAEC,cAAc,QAAQ,yBAAyB;AAExG,SAASC,0BAA0B,EAAEC,yBAAyB;AAS9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CACpCC,KAAa,EACbC,OAAiD,EACjDC,QAA6B,EAC7BC,IAAY,EACZC,OAAe,EACfC,UAAkB,EAClBC,cAAc,GAAGF,OAAO,EACH;EACrB,MAAMG,WAAW,GAAGP,KAAK,GAAGK,UAAU;;EAEtC;AACF;AACA;AACA;AACA;AACA;EACE,MAAM,CAACG,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAAC,MACnCQ,OAAO,KAAKS,SAAS,IAAIb,0BAA0B,CAACI,OAAO,CAAC,GAAG,CAAC,GAAGU,IAAI,CAACC,KAAK,CAACX,OAAO,CACvF,CAAC;EAED,MAAMY,MAAM,GAAGrB,OAAO,CACpB,MAAMM,yBAAyB,CAACE,KAAK,EAAEQ,MAAM,EAAEL,IAAI,EAAEC,OAAO,EAAEC,UAAU,EAAEC,cAAc,CAAC,EACzF,CAACN,KAAK,EAAEQ,MAAM,EAAEL,IAAI,EAAEC,OAAO,EAAEC,UAAU,EAAEC,cAAc,CAC3D,CAAC;;EAED;AACF;AACA;AACA;AACA;EACE,MAAMQ,OAAO,GAAGlB,cAAc,CAACiB,MAAM,CAAC;EACtCC,OAAO,CAACC,KAAK,GAAGF,MAAM;EAEtBlB,mBAAmB,CACjB,MAAMgB,IAAI,CAACC,KAAK,CAACV,QAAQ,CAACa,KAAK,CAAC,EAC/BC,IAAI,IAAK;IACR,IAAI,CAACT,WAAW,EAAE;IAClB,MAAM;MAAEU,KAAK;MAAEC;IAAI,CAAC,GAAGJ,OAAO,CAACC,KAAK;IACpC,IAAIC,IAAI,GAAGC,KAAK,IAAID,IAAI,GAAGE,GAAG,EAAExB,OAAO,CAACe,SAAS,CAAC,CAACO,IAAI,CAAC;EAC1D,CAAC,EACD,CAACT,WAAW,CACd,CAAC;EAED,OAAOM,MAAM;AACf","ignoreList":[]}

package/lib/module/components/page-indicator/utils.js

@@ -66,6 +66,21 @@ export function pageIndicatorViewportClipStyle(vertical, viewportMainSize, cross
     overflow: "hidden"
   };
 }
+
+/**
+ * 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, mainSize) {
+  return vertical ? {
+    height: mainSize
+  } : {
+    width: mainSize
+  };
+}
 function scaleCurveValue(curve, distance, tailScale) {
   "worklet";
 
@@ -124,4 +139,49 @@ export function pageIndicatorWindowScale(index, displayProgress, count, slot, do
   const positionInWindow = Math.min(Math.max(Math.round(index - visibleStart), 0), maxVisible - 1);
   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, anchor, slot, dotSize, maxVisible, activeMainSize = dotSize, overscan = PAGE_INDICATOR_WINDOW_OVERSCAN) {
+  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)
+  };
+}
 //# sourceMappingURL=utils.js.map

package/lib/module/components/page-indicator/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["PAGE_INDICATOR_SINGLE_PAGE_DURATION","PAGE_INDICATOR_MULTI_PAGE_DURATION_STEP","PAGE_INDICATOR_MULTI_PAGE_DURATION_MAX","DEFAULT_PAGE_INDICATOR_MAX_VISIBLE","EDGE_OUTWARD_SCALE","CENTERED_SCALE","WINDOW_TAIL_SCALE","pageIndicatorPageJumpDistance","from","to","Math","abs","pageIndicatorPageJumpDuration","distance","min","isPageIndicatorSharedValue","value","pageIndicatorAxisTranslateStyle","vertical","translate","transform","translateY","translateX","pageIndicatorViewportClipStyle","viewportMainSize","crossSize","height","undefined","width","overflow","scaleCurveValue","curve","tailScale","length","pageIndicatorWindowSlotScale","positionInWindow","activeSlot","maxVisible","dist","centerSlot","floor","pageIndicatorTrackMainSize","count","slot","dotSize","activeMainSize","max","pageIndicatorViewportMainSize","visible","computePageIndicatorWindowTranslate","progress","trackMainSize","activeCenter","offset","pageIndicatorWindowScale","index","displayProgress","visibleStart","round"],"sourceRoot":"../../../../src","sources":["components/page-indicator/utils.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["PAGE_INDICATOR_SINGLE_PAGE_DURATION","PAGE_INDICATOR_MULTI_PAGE_DURATION_STEP","PAGE_INDICATOR_MULTI_PAGE_DURATION_MAX","DEFAULT_PAGE_INDICATOR_MAX_VISIBLE","EDGE_OUTWARD_SCALE","CENTERED_SCALE","WINDOW_TAIL_SCALE","pageIndicatorPageJumpDistance","from","to","Math","abs","pageIndicatorPageJumpDuration","distance","min","isPageIndicatorSharedValue","value","pageIndicatorAxisTranslateStyle","vertical","translate","transform","translateY","translateX","pageIndicatorViewportClipStyle","viewportMainSize","crossSize","height","undefined","width","overflow","pageIndicatorSpacerStyle","mainSize","scaleCurveValue","curve","tailScale","length","pageIndicatorWindowSlotScale","positionInWindow","activeSlot","maxVisible","dist","centerSlot","floor","pageIndicatorTrackMainSize","count","slot","dotSize","activeMainSize","max","pageIndicatorViewportMainSize","visible","computePageIndicatorWindowTranslate","progress","trackMainSize","activeCenter","offset","pageIndicatorWindowScale","index","displayProgress","visibleStart","round","PAGE_INDICATOR_WINDOW_OVERSCAN","pageIndicatorMountedRange","anchor","overscan","last","start","end","ceil"],"sourceRoot":"../../../../src","sources":["components/page-indicator/utils.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/page-indicator/variants/DotIndicator/index.js

@@ -3,6 +3,7 @@
 import { useMemo } from "react";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { usePageIndicatorCore } from "../../hooks/use-page-indicator-core.js";
+import { usePageIndicatorWindow } from "../../hooks/use-page-indicator-window.js";
 import { PageIndicatorRoot } from "../../PageIndicatorRoot.js";
 import { computePageIndicatorWindowTranslate, DEFAULT_PAGE_INDICATOR_MAX_VISIBLE, PAGE_INDICATOR_SINGLE_PAGE_DURATION, pageIndicatorAxisTranslateStyle, pageIndicatorTrackMainSize, pageIndicatorViewportMainSize } from "../../utils.js";
 import { InactiveDot } from "./InactiveDot.js";
@@ -39,9 +40,19 @@ export function DotIndicator({
   const viewportMainSize = pageIndicatorViewportMainSize(count, slot, dotSize, maxVisible);
   const fullTrackMainSize = pageIndicatorTrackMainSize(count, slot, dotSize);
   const overflows = count > maxVisible;
+
+  /*
+    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: count
-  }, (_, index) => index), [count]);
+    length: end - start + 1
+  }, (_, offset) => start + offset), [start, end]);
   const trackStyle = useAnimatedStyle(() => {
     const translate = computePageIndicatorWindowTranslate(count, progress.value, slot, dotSize, maxVisible);
     return pageIndicatorAxisTranslateStyle(vertical, translate);

package/lib/module/components/page-indicator/variants/DotIndicator/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","Animated","useAnimatedStyle","usePageIndicatorCore","PageIndicatorRoot","computePageIndicatorWindowTranslate","DEFAULT_PAGE_INDICATOR_MAX_VISIBLE","PAGE_INDICATOR_SINGLE_PAGE_DURATION","pageIndicatorAxisTranslateStyle","pageIndicatorTrackMainSize","pageIndicatorViewportMainSize","InactiveDot","LoadingOrbit","TravelingPill","DOT_INDICATOR_GEOMETRY","jsx","_jsx","jsxs","_jsxs","DotIndicator","count","current","duration","activeColor","inactiveColor","loadingColor","loading","vertical","maxVisible","style","colors","progress","dotSize","slot","crossSize","inactiveOpacity","viewportMainSize","fullTrackMainSize","overflows","indices","Array","from","length","_","index","trackStyle","translate","value","children","View","width","height","map","color","opacity"],"sourceRoot":"../../../../../../src","sources":["components/page-indicator/variants/DotIndicator/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useMemo","Animated","useAnimatedStyle","usePageIndicatorCore","usePageIndicatorWindow","PageIndicatorRoot","computePageIndicatorWindowTranslate","DEFAULT_PAGE_INDICATOR_MAX_VISIBLE","PAGE_INDICATOR_SINGLE_PAGE_DURATION","pageIndicatorAxisTranslateStyle","pageIndicatorTrackMainSize","pageIndicatorViewportMainSize","InactiveDot","LoadingOrbit","TravelingPill","DOT_INDICATOR_GEOMETRY","jsx","_jsx","jsxs","_jsxs","DotIndicator","count","current","duration","activeColor","inactiveColor","loadingColor","loading","vertical","maxVisible","style","colors","progress","dotSize","slot","crossSize","inactiveOpacity","viewportMainSize","fullTrackMainSize","overflows","start","end","indices","Array","from","length","_","offset","trackStyle","translate","value","children","View","width","height","map","index","color","opacity"],"sourceRoot":"../../../../../../src","sources":["components/page-indicator/variants/DotIndicator/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/page-indicator/variants/PillIndicator/index.js

@@ -1,13 +1,15 @@
 "use strict";
 
+import { View } from "react-native-unistyles/components/native/View";
 import { useMemo } from "react";
 import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { usePageIndicatorCore } from "../../hooks/use-page-indicator-core.js";
+import { usePageIndicatorWindow } from "../../hooks/use-page-indicator-window.js";
 import { PageIndicatorRoot } from "../../PageIndicatorRoot.js";
-import { computePageIndicatorWindowTranslate, DEFAULT_PAGE_INDICATOR_MAX_VISIBLE, PAGE_INDICATOR_SINGLE_PAGE_DURATION, pageIndicatorAxisTranslateStyle, pageIndicatorTrackMainSize, pageIndicatorViewportMainSize } from "../../utils.js";
+import { computePageIndicatorWindowTranslate, DEFAULT_PAGE_INDICATOR_MAX_VISIBLE, PAGE_INDICATOR_SINGLE_PAGE_DURATION, pageIndicatorAxisTranslateStyle, pageIndicatorSpacerStyle, pageIndicatorTrackMainSize, pageIndicatorViewportMainSize } from "../../utils.js";
 import { PillIndicatorDot } from "./PillIndicatorDot.js";
 import { PILL_INDICATOR_GEOMETRY, pillIndicatorJumpDisplayProgress } from "./utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function PillIndicator({
   count,
   current = 0,
@@ -35,9 +37,25 @@ export function PillIndicator({
   const viewportMainSize = pageIndicatorViewportMainSize(count, slot, dotSize, maxVisible, activeWidth);
   const fullTrackMainSize = pageIndicatorTrackMainSize(count, slot, dotSize, activeWidth);
   const overflows = count > maxVisible;
+  const {
+    start,
+    end
+  } = usePageIndicatorWindow(count, current, progress, slot, dotSize, maxVisible, activeWidth);
   const indices = useMemo(() => Array.from({
-    length: count
-  }, (_, index) => index), [count]);
+    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(progress.value, pillJump.active.value, pillJump.from.value, pillJump.to.value, pillJump.t.value);
     const translate = computePageIndicatorWindowTranslate(count, displayProgress, slot, dotSize, maxVisible, activeWidth);
@@ -48,7 +66,7 @@ export function PillIndicator({
     vertical: vertical,
     viewportMainSize: viewportMainSize,
     overflows: overflows,
-    children: /*#__PURE__*/_jsx(Animated.View, {
+    children: /*#__PURE__*/_jsxs(Animated.View, {
       style: [{
         flexDirection: vertical ? "column" : "row",
         alignItems: "center",
@@ -59,7 +77,9 @@ export function PillIndicator({
           width: fullTrackMainSize
         } : undefined)
       }, overflows ? trackStyle : null],
-      children: indices.map(index => /*#__PURE__*/_jsx(PillIndicatorDot, {
+      children: [leadMainSize > 0 && /*#__PURE__*/_jsx(View, {
+        style: pageIndicatorSpacerStyle(vertical, leadMainSize)
+      }), indices.map(index => /*#__PURE__*/_jsx(PillIndicatorDot, {
         activeColor: colors.activeColor,
         inactiveColor: colors.inactiveColor,
         count: count,
@@ -69,7 +89,9 @@ export function PillIndicator({
         vertical: vertical,
         overflows: overflows,
         maxVisible: maxVisible
-      }, index))
+      }, index)), tailMainSize > 0 && /*#__PURE__*/_jsx(View, {
+        style: pageIndicatorSpacerStyle(vertical, tailMainSize)
+      })]
     })
   });
 }

package/lib/module/components/page-indicator/variants/PillIndicator/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","Animated","useAnimatedStyle","usePageIndicatorCore","PageIndicatorRoot","computePageIndicatorWindowTranslate","DEFAULT_PAGE_INDICATOR_MAX_VISIBLE","PAGE_INDICATOR_SINGLE_PAGE_DURATION","pageIndicatorAxisTranslateStyle","pageIndicatorTrackMainSize","pageIndicatorViewportMainSize","PillIndicatorDot","PILL_INDICATOR_GEOMETRY","pillIndicatorJumpDisplayProgress","jsx","_jsx","PillIndicator","count","current","duration","activeColor","inactiveColor","vertical","maxVisible","style","colors","pillJump","progress","dotSize","gap","slot","activeWidth","viewportMainSize","fullTrackMainSize","overflows","indices","Array","from","length","_","index","trackStyle","displayProgress","value","active","to","t","translate","children","View","flexDirection","alignItems","height","width","undefined","map"],"sourceRoot":"../../../../../../src","sources":["components/page-indicator/variants/PillIndicator/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useMemo","Animated","useAnimatedStyle","usePageIndicatorCore","usePageIndicatorWindow","PageIndicatorRoot","computePageIndicatorWindowTranslate","DEFAULT_PAGE_INDICATOR_MAX_VISIBLE","PAGE_INDICATOR_SINGLE_PAGE_DURATION","pageIndicatorAxisTranslateStyle","pageIndicatorSpacerStyle","pageIndicatorTrackMainSize","pageIndicatorViewportMainSize","PillIndicatorDot","PILL_INDICATOR_GEOMETRY","pillIndicatorJumpDisplayProgress","jsx","_jsx","jsxs","_jsxs","PillIndicator","count","current","duration","activeColor","inactiveColor","vertical","maxVisible","style","colors","pillJump","progress","dotSize","gap","slot","activeWidth","viewportMainSize","fullTrackMainSize","overflows","start","end","indices","Array","from","length","_","offset","leadMainSize","tailMainSize","trackStyle","displayProgress","value","active","to","t","translate","children","View","flexDirection","alignItems","height","width","undefined","map","index"],"sourceRoot":"../../../../../../src","sources":["components/page-indicator/variants/PillIndicator/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/page-indicator/hooks/use-page-indicator-window.d.ts

@@ -0,0 +1,34 @@
+import { type SharedValue } from "react-native-reanimated";
+export interface PageIndicatorWindow {
+    /** First dot index to mount, inclusive. */
+    start: number;
+    /** Last dot index to mount, inclusive. */
+    end: number;
+}
+/**
+ * The slice of dots a variant should mount, kept in step with the active page.
+ *
+ * Both variants clip to a window of `maxVisible` slots and scroll a track
+ * behind it, so all but a handful of dots are drawn outside the viewport. This
+ * is what lets them skip building those: the range covers the visible window
+ * plus a generous overscan, and moves only when the active page leaves it.
+ *
+ * **Driven by `progress`, not by `current`.** `current` may be a shared value
+ * for scroll-linked motion, in which case React never re-renders on a page
+ * change and a range derived from props would sit still while the track slid
+ * out from under it. `progress` is the one place both spellings of `current`
+ * have already been resolved into a single number.
+ *
+ * The reaction only reaches JS when the page moves *outside* the mounted range
+ * — not on every frame, and not on every page. A one-page step normally costs
+ * no render at all, because the neighbour was already mounted; a long jump
+ * costs one render per window it crosses rather than one per page.
+ *
+ * Known limit: during a jump of many pages the track slides faster than the
+ * range is re-rendered, so dots in the middle of that flight may not be mounted
+ * as they pass. They are identical inactive dots moving too fast to read, and
+ * the alternative — mounting every page between the two — is the cost this
+ * exists to avoid.
+ */
+export declare function usePageIndicatorWindow(count: number, current: number | SharedValue<number> | undefined, progress: SharedValue<number>, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): PageIndicatorWindow;
+//# sourceMappingURL=use-page-indicator-window.d.ts.map

package/lib/typescript/src/components/page-indicator/hooks/use-page-indicator-window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-page-indicator-window.d.ts","sourceRoot":"","sources":["../../../../../../src/components/page-indicator/hooks/use-page-indicator-window.ts"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,WAAW,EAAuC,MAAM,yBAAyB,CAAC;AAIzG,MAAM,WAAW,mBAAmB;IAClC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,EACjD,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,EAC7B,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,mBAAmB,CAqCrB"}

package/lib/typescript/src/components/page-indicator/utils.d.ts

@@ -27,10 +27,51 @@ export declare function pageIndicatorAxisTranslateStyle(vertical: boolean, trans
 };
 /** Clips an overflowing track to the visible viewport along the main axis. */
 export declare function pageIndicatorViewportClipStyle(vertical: boolean, viewportMainSize: number, crossSize?: number): ViewStyle;
+/**
+ * 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 declare function pageIndicatorSpacerStyle(vertical: boolean, mainSize: number): ViewStyle;
 /** Scale for a slot inside the window given the active slot. */
 export declare function pageIndicatorWindowSlotScale(positionInWindow: number, activeSlot: number, maxVisible: number): number;
 export declare function pageIndicatorTrackMainSize(count: number, slot: number, dotSize: number, activeMainSize?: number): number;
 export declare function pageIndicatorViewportMainSize(count: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): number;
 export declare function computePageIndicatorWindowTranslate(count: number, progress: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): number;
 export declare function pageIndicatorWindowScale(index: number, displayProgress: number, count: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number): number;
+/**
+ * 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 declare 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 declare function pageIndicatorMountedRange(count: number, anchor: number, slot: number, dotSize: number, maxVisible: number, activeMainSize?: number, overscan?: number): {
+    start: number;
+    end: number;
+};
 //# sourceMappingURL=utils.d.ts.map

package/lib/typescript/src/components/page-indicator/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/page-indicator/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,uDAAuD;AACvD,eAAO,MAAM,mCAAmC,MAAM,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAE3D,wDAAwD;AACxD,eAAO,MAAM,sCAAsC,MAAM,CAAC;AAE1D,0EAA0E;AAC1E,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAMpD,+CAA+C;AAC/C,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAE9E;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAQ9E;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,GAClC,KAAK,IAAI,WAAW,CAAC,MAAM,CAAC,CAE9B;AAED,wEAAwE;AACxE,wBAAgB,+BAA+B,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM;;;;;;EAKnF;AAED,8EAA8E;AAC9E,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,OAAO,EACjB,gBAAgB,EAAE,MAAM,EACxB,SAAS,CAAC,EAAE,MAAM,GACjB,SAAS,CAcX;AAQD,gEAAgE;AAChE,wBAAgB,4BAA4B,CAC1C,gBAAgB,EAAE,MAAM,EACxB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GACjB,MAAM,CA2BR;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,cAAc,SAAU,GACvB,MAAM,CAER;AAED,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAGR;AAED,wBAAgB,mCAAmC,CACjD,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAUR;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAiBR"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/page-indicator/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,uDAAuD;AACvD,eAAO,MAAM,mCAAmC,MAAM,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,uCAAuC,MAAM,CAAC;AAE3D,wDAAwD;AACxD,eAAO,MAAM,sCAAsC,MAAM,CAAC;AAE1D,0EAA0E;AAC1E,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAMpD,+CAA+C;AAC/C,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAE9E;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAQ9E;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,GAClC,KAAK,IAAI,WAAW,CAAC,MAAM,CAAC,CAE9B;AAED,wEAAwE;AACxE,wBAAgB,+BAA+B,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM;;;;;;EAKnF;AAED,8EAA8E;AAC9E,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,OAAO,EACjB,gBAAgB,EAAE,MAAM,EACxB,SAAS,CAAC,EAAE,MAAM,GACjB,SAAS,CAcX;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,CAEvF;AAQD,gEAAgE;AAChE,wBAAgB,4BAA4B,CAC1C,gBAAgB,EAAE,MAAM,EACxB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GACjB,MAAM,CA2BR;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,cAAc,SAAU,GACvB,MAAM,CAER;AAED,wBAAgB,6BAA6B,CAC3C,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAGR;AAED,wBAAgB,mCAAmC,CACjD,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAUR;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,GACvB,MAAM,CAiBR;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,8BAA8B,IAAI,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,cAAc,SAAU,EACxB,QAAQ,SAAiC,GACxC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAmBhC"}

package/lib/typescript/src/components/page-indicator/variants/DotIndicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/DotIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB/C,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,YAAY,EACZ,OAAe,EACf,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,iBAAiB,+BAiEnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/DotIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAiB/C,MAAM,WAAW,iBAAiB;IAChC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,YAAY,EACZ,OAAe,EACf,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,iBAAiB,+BA2EnB"}

package/lib/typescript/src/components/page-indicator/variants/PillIndicator/index.d.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from "react-native";
+import { type StyleProp, type ViewStyle } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import type { ColorToken } from "../../../../theme/types";
 export interface PillIndicatorProps {

package/lib/typescript/src/components/page-indicator/variants/PillIndicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/PillIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAc/C,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,kBAAkB,+BAyEpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/page-indicator/variants/PillIndicator/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB/C,MAAM,WAAW,kBAAkB;IACjC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAW,EACX,QAA8C,EAC9C,WAAW,EACX,aAAa,EACb,QAAgB,EAChB,UAA+C,EAC/C,KAAK,GACN,EAAE,kBAAkB,+BAqGpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.11.16",
+  "version": "0.11.17",
   "description": "Themeable React Native UI components built on react-native-unistyles",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/page-indicator/hooks/use-page-indicator-window.ts

@@ -0,0 +1,84 @@
+import { useMemo, useState } from "react";
+
+import { runOnJS, type SharedValue, useAnimatedReaction, useSharedValue } from "react-native-reanimated";
+
+import { isPageIndicatorSharedValue, pageIndicatorMountedRange } from "../utils";
+
+export interface PageIndicatorWindow {
+  /** First dot index to mount, inclusive. */
+  start: number;
+  /** Last dot index to mount, inclusive. */
+  end: number;
+}
+
+/**
+ * The slice of dots a variant should mount, kept in step with the active page.
+ *
+ * Both variants clip to a window of `maxVisible` slots and scroll a track
+ * behind it, so all but a handful of dots are drawn outside the viewport. This
+ * is what lets them skip building those: the range covers the visible window
+ * plus a generous overscan, and moves only when the active page leaves it.
+ *
+ * **Driven by `progress`, not by `current`.** `current` may be a shared value
+ * for scroll-linked motion, in which case React never re-renders on a page
+ * change and a range derived from props would sit still while the track slid
+ * out from under it. `progress` is the one place both spellings of `current`
+ * have already been resolved into a single number.
+ *
+ * The reaction only reaches JS when the page moves *outside* the mounted range
+ * — not on every frame, and not on every page. A one-page step normally costs
+ * no render at all, because the neighbour was already mounted; a long jump
+ * costs one render per window it crosses rather than one per page.
+ *
+ * Known limit: during a jump of many pages the track slides faster than the
+ * range is re-rendered, so dots in the middle of that flight may not be mounted
+ * as they pass. They are identical inactive dots moving too fast to read, and
+ * the alternative — mounting every page between the two — is the cost this
+ * exists to avoid.
+ */
+export function usePageIndicatorWindow(
+  count: number,
+  current: number | SharedValue<number> | undefined,
+  progress: SharedValue<number>,
+  slot: number,
+  dotSize: number,
+  maxVisible: number,
+  activeMainSize = dotSize
+): PageIndicatorWindow {
+  const virtualized = count > maxVisible;
+
+  /*
+    Seeded from `current` so an indicator mounted straight onto a late page
+    draws that page's dots on its first frame rather than the first page's.
+    Zero for a shared value, which cannot be read during render — the reaction
+    below corrects it on the first frame that matters.
+  */
+  const [anchor, setAnchor] = useState(() =>
+    current === undefined || isPageIndicatorSharedValue(current) ? 0 : Math.round(current)
+  );
+
+  const window = useMemo(
+    () => pageIndicatorMountedRange(count, anchor, slot, dotSize, maxVisible, activeMainSize),
+    [count, anchor, slot, dotSize, maxVisible, activeMainSize]
+  );
+
+  /*
+    The live range, on the UI thread, so the reaction can decide for itself
+    whether a page change matters. Reading React state from a worklet is not an
+    option, and crossing to JS to ask would defeat the point of asking.
+  */
+  const mounted = useSharedValue(window);
+  mounted.value = window;
+
+  useAnimatedReaction(
+    () => Math.round(progress.value),
+    (page) => {
+      if (!virtualized) return;
+      const { start, end } = mounted.value;
+      if (page < start || page > end) runOnJS(setAnchor)(page);
+    },
+    [virtualized]
+  );
+
+  return window;
+}

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>
   );