react-native-image-stitcher 0.11.1 → 0.13.0

package/src/camera/OrientationDriftModal.tsx

@@ -0,0 +1,224 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * OrientationDriftModal — informational popup shown when the SDK
+ * auto-abandons an in-progress capture because the device rotated
+ * between Mode A (landscape + vertical pan) and Mode B (portrait
+ * + horizontal pan) mid-flight.
+ *
+ * ## When this modal appears
+ *
+ * In the v0.12 `<Camera>` integration, the modal is rendered while
+ * `useOrientationDrift(active).drifted === true`.  By the time the
+ * modal renders, the capture has ALREADY been stopped (the
+ * `<Camera>` component's drift effect calls the engine's `stop()`
+ * the same render).  The modal exists solely to explain to the
+ * user what happened — no "Continue" / "Resume" affordance because
+ * the engine docstring at `incremental.ts:373-403` is explicit
+ * that cross-mode capture is "best-effort, not supported" and
+ * continuing past drift produces malformed output.
+ *
+ * ## Layer-2 host usage
+ *
+ * Hosts using `CameraView` directly (rather than the flagship
+ * `<Camera>`) can compose this modal with `useOrientationDrift`
+ * for the same auto-abandon UX:
+ *
+ *   const drift = useOrientationDrift(captureActive);
+ *   useEffect(() => {
+ *     if (drift.drifted) {
+ *       // host abandons capture (engine stop + state cleanup)
+ *       stopCapture();
+ *     }
+ *   }, [drift.drifted]);
+ *
+ *   return <>
+ *     <CameraView ... />
+ *     <OrientationDriftModal
+ *       visible={drift.drifted}
+ *       captureOrientation={drift.captureOrientation}
+ *       currentOrientation={drift.currentOrientation}
+ *       onAcknowledge={dismissDriftModal}
+ *     />
+ *   </>;
+ *
+ * ## Accessibility
+ *
+ * Modal `role` defaults to RN's native dialog handling.  The OK
+ * button carries an `accessibilityRole='button'` + label.  Body
+ * text uses `accessibilityRole='text'` so the orientation summary
+ * is read by VoiceOver / TalkBack.
+ */
+
+import React from 'react';
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { type DeviceOrientation } from './useDeviceOrientation';
+
+
+export interface OrientationDriftModalProps {
+  /**
+   * Show / hide.  In the `<Camera>` integration this is driven by
+   * the latched `drifted` flag from `useOrientationDrift`.
+   */
+  visible: boolean;
+
+  /**
+   * Orientation the capture started in.  Shown in the body copy
+   * ("Capture started in PORTRAIT") so the user understands the
+   * baseline.  `undefined` is tolerated (the modal hides the line);
+   * the prop is optional only to mirror `useOrientationDrift`'s
+   * return shape (which has `undefined` when inactive).  When the
+   * modal is `visible`, drift detection means this was non-
+   * undefined at the moment the flag latched — so undefined here
+   * is unlikely in practice.
+   */
+  captureOrientation: DeviceOrientation | undefined;
+
+  /**
+   * Current device orientation.  Shown in the body copy ("now
+   * LANDSCAPE-LEFT") so the user understands what changed.
+   */
+  currentOrientation: DeviceOrientation;
+
+  /**
+   * Tapped when the user dismisses with OK.  By the time the
+   * modal renders the capture is already stopped; this callback
+   * exists only to clear the latched drift state so the next
+   * capture can start fresh.
+   */
+  onAcknowledge: () => void;
+}
+
+
+/**
+ * Pretty-print a `DeviceOrientation` for body copy.  Returns the
+ * uppercase form because the modal copy reads as "Capture started
+ * in PORTRAIT, now LANDSCAPE-LEFT" — uppercase orientations stand
+ * out from the surrounding lowercase sentence.
+ */
+function formatOrientation(o: DeviceOrientation): string {
+  switch (o) {
+    case 'portrait':
+      return 'PORTRAIT';
+    case 'portrait-upside-down':
+      return 'PORTRAIT-UPSIDE-DOWN';
+    case 'landscape-left':
+      return 'LANDSCAPE-LEFT';
+    case 'landscape-right':
+      return 'LANDSCAPE-RIGHT';
+  }
+}
+
+
+export function OrientationDriftModal(
+  props: OrientationDriftModalProps,
+): React.JSX.Element {
+  const { visible, captureOrientation, currentOrientation, onAcknowledge } = props;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onAcknowledge}
+      accessibilityLabel="Capture cancelled — orientation drift"
+      // v0.12.0 — see PanoramaSettingsModal for the same prop's
+      // rationale.  Declaring all orientations prevents iOS from
+      // force-rotating the window to portrait when this modal opens
+      // mid-rotation, which would otherwise leave the underlying
+      // <Camera>'s ARSession in a stale-orientation state on dismiss.
+      supportedOrientations={[
+        'portrait',
+        'portrait-upside-down',
+        'landscape-left',
+        'landscape-right',
+      ]}
+    >
+      <View style={styles.backdrop}>
+        <View style={styles.card}>
+          <Text style={styles.title} accessibilityRole="header">
+            Capture cancelled
+          </Text>
+
+          <Text style={styles.body} accessibilityRole="text">
+            Rotation detected mid-capture. Please hold the device
+            steady and try again.
+          </Text>
+
+          {captureOrientation !== undefined && (
+            <Text style={styles.subBody} accessibilityRole="text">
+              Capture started in {formatOrientation(captureOrientation)},
+              now {formatOrientation(currentOrientation)}.
+            </Text>
+          )}
+
+          <Pressable
+            style={({ pressed }) => [
+              styles.button,
+              pressed && styles.buttonPressed,
+            ]}
+            onPress={onAcknowledge}
+            accessibilityRole="button"
+            accessibilityLabel="OK"
+          >
+            <Text style={styles.buttonLabel}>OK</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+  },
+  card: {
+    backgroundColor: '#1c1c1e',
+    borderRadius: 14,
+    paddingHorizontal: 20,
+    paddingVertical: 24,
+    width: '100%',
+    maxWidth: 340,
+  },
+  title: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  body: {
+    color: '#e5e5ea',
+    fontSize: 15,
+    lineHeight: 21,
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  subBody: {
+    color: '#8e8e93',
+    fontSize: 13,
+    lineHeight: 18,
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  button: {
+    backgroundColor: '#0a84ff',
+    borderRadius: 10,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  buttonPressed: {
+    backgroundColor: '#0860c0',
+  },
+  buttonLabel: {
+    color: '#fff',
+    fontSize: 17,
+    fontWeight: '600',
+  },
+});

package/src/camera/PanoramaBandOverlay.tsx

@@ -87,6 +87,18 @@ export type BandCaptureOrientation =
   | 'landscape-right';
 
 export interface PanoramaBandOverlayProps {
+  /**
+   * v0.12.0 — `true` when the band should render as a vertical
+   * column in JS (anchor edge is JS-left or JS-right, i.e.
+   * non-locked host with device-landscape).  `false` (default)
+   * renders the legacy horizontal strip — covers portrait-locked
+   * hosts in any device orientation AND non-locked hosts in
+   * portrait.  The flagship `<Camera>` derives this from
+   * `useWindowDimensions()` + `useDeviceOrientation()` (see
+   * `homeIndicatorEdge` in `Camera.tsx`); Layer-2 hosts pass it
+   * directly.
+   */
+  vertical?: boolean;
   /**
    * Latest engine state.  Pass `useIncrementalStitcher().state`.
    * Used for single-thumb fallback URI and fill-ratio when no
@@ -138,8 +150,12 @@ interface Layout {
   kind: LayoutKind;
   /** Outer container style — positioning + flexDirection. */
   band: ViewStyle;
-  /** Direction used by both the outer band AND the scroll content. */
-  flexDirection: 'row' | 'row-reverse';
+  /**
+   * Direction used by both the outer band AND the scroll content.
+   * row/row-reverse for horizontal bands; column/column-reverse for
+   * vertical bands (non-locked host in landscape, jsLandscape=true).
+   */
+  flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse';
   /** Unicode arrow pointing along the user-perceived pan axis. */
   arrowGlyph: string;
 }
@@ -182,26 +198,53 @@ interface Layout {
  *     reads as user-right-arrow (pointing along the horizontal pan
  *     direction).
  */
-function layoutFor(orientation: BandCaptureOrientation): Layout {
+function layoutFor(
+  orientation: BandCaptureOrientation,
+  vertical: boolean,
+): Layout {
   const commonInner: ViewStyle = {
     alignItems: 'center',
     paddingHorizontal: BAND_PADDING,
     paddingVertical: BAND_PADDING,
     backgroundColor: 'rgba(0, 0, 0, 0.55)',
   };
-  // 2026-05-19 — repositioned tethered to the shutter (no longer
-  // edge-pinned via absolute positioning).  The parent stack in
-  // Camera.tsx now puts this band in a vertical column immediately
-  // above the shutter row.  The SDK's orientation lock holds the UI
-  // in portrait regardless of physical device rotation, so the band
-  // is ALWAYS a horizontal strip in JS coordinates.  In landscape
-  // (physically held), the rendered strip visually appears as a
-  // vertical column on the viewport-side of the shutter.
+  // v0.12.0 — band structural orientation tracks the host's
+  // `vertical` flag (which the host derives from JS layout
+  // orientation):
+  //
+  //   vertical=false  Horizontal strip in JS coords.  Under
+  //                   portrait-lock + device-landscape this appears
+  //                   as a vertical column on user-right via the
+  //                   un-rotated framebuffer.
+  //   vertical=true   Vertical column in JS coords.  Non-locked
+  //                   + device-landscape — band lives along the
+  //                   JS-side strip where the home indicator is.
   //
-  // What still varies by physical orientation: the order in which
-  // thumbnails should appear so newest is at the user-perceived
-  // "leading edge" of the pan.  That's the flexDirection (row vs
-  // row-reverse) and the arrow glyph.
+  // What still varies by physical orientation regardless: the
+  // thumbnail flow direction so newest sits at the user-perceived
+  // pan-leading edge (flexDirection + arrowGlyph).
+  if (vertical) {
+    // Vertical band in JS coords (non-locked landscape).  The OS
+    // rotated the framebuffer so user-top = JS-top, user-bottom =
+    // JS-bottom — same scroll direction regardless of whether the
+    // device is landscape-left or landscape-right.  Latest grows
+    // toward user-bottom (= JS-bottom).  flexDirection 'column'
+    // puts array[0]/oldest at JS-top.
+    return {
+      kind: 'landscape',
+      band: {
+        marginHorizontal: 8,
+        marginVertical: 16,
+        width: BAND_THICKNESS,
+        flexDirection: 'column',
+        ...commonInner,
+      },
+      flexDirection: 'column',
+      arrowGlyph: '↓',
+    };
+  }
+  // vertical=false branch: pre-v0.12 horizontal-strip behavior
+  // keyed on device-physical orientation for thumbnail direction.
   if (orientation === 'landscape-left') {
     // Phone rotated 90° CCW from portrait (home indicator on the
     // user's RIGHT).  With UI orientation-locked to portrait:
@@ -268,6 +311,7 @@ export function PanoramaBandOverlay({
   state,
   frameUris,
   captureOrientation,
+  vertical = false,
 }: PanoramaBandOverlayProps): React.JSX.Element | null {
   // 2026-05-18 (Issue #3 fix) — orientation source priority:
   //   1. `captureOrientation` prop from the host (4-way; correct
@@ -280,8 +324,8 @@ export function PanoramaBandOverlay({
     captureOrientation
     ?? (state?.isLandscape ? 'landscape-left' : 'portrait');
   const layout = useMemo(
-    () => layoutFor(resolvedOrientation),
-    [resolvedOrientation],
+    () => layoutFor(resolvedOrientation, vertical),
+    [resolvedOrientation, vertical],
   );
 
   const scrollRef = useRef<ScrollView | null>(null);
@@ -299,24 +343,21 @@ export function PanoramaBandOverlay({
 
   const hasMultiThumb = cappedFrameUris.length > 0;
 
-  // Auto-scroll on content-size change.
-  //
-  // 2026-05-18 (Issue #4 fix-b): the direction depends on flex
-  // direction.  In `row` (portrait, landscape-right) the LATEST
-  // item is at JS-rightmost → scrollToEnd shows it.  In
-  // `row-reverse` (landscape-left) the latest is at JS-leftmost →
-  // scrollTo({x: 0}) shows it.  The earlier always-scrollToEnd
-  // behaviour scrolled to OLDEST in row-reverse, which hid the
-  // just-captured frame off-screen at user-bottom.
+  // Auto-scroll on content-size change.  `*-reverse` puts latest at
+  // scroll origin (scrollTo {0,0}); normal `row`/`column` puts
+  // latest at scroll end (scrollToEnd).
+  const isReverse =
+    layout.flexDirection === 'row-reverse' ||
+    layout.flexDirection === 'column-reverse';
   const onContentSizeChange = useCallback(() => {
     const sv = scrollRef.current;
     if (!sv) return;
-    if (layout.flexDirection === 'row-reverse') {
+    if (isReverse) {
       sv.scrollTo({ x: 0, y: 0, animated: false });
     } else {
       sv.scrollToEnd({ animated: false });
     }
-  }, [layout.flexDirection]);
+  }, [isReverse]);
 
   // ── Single cumulative thumbnail (live-engine fallback) ──────────
   //
@@ -339,27 +380,70 @@ export function PanoramaBandOverlay({
     return Math.max(SINGLE_THUMB_INNER, SINGLE_THUMB_MAX_PAN_LEN * fillRatio);
   }, [fillRatio]);
 
-  // V12.14.9 — rotate the panorama image 90° in landscape mode so
-  // the captured scene reads UPRIGHT to the user in landscape head-up
-  // view.  See original comment in the pre-V16 PanoramaBandOverlay for
-  // the full reasoning.  Portrait+horizontal-pan mode (the other
-  // supported mode) doesn't need rotation.
+  // Image rotation transform for thumbnails.  Captured frames are in
+  // user-perspective orientation (the capture pipeline rotates the
+  // sensor-native bytes via `outputOrientation="device"` + EXIF
+  // baking in `normaliseOrientation`).  The thumbnail BOX is in
+  // JS coords.  When JS coords are device-aligned (portrait-lock,
+  // i.e. vertical=false here) and the device is in landscape, the
+  // image content is rotated 90° from the box's axes → appears
+  // sideways without compensation.  Apply a counter-rotation to
+  // line content up with the box's perceived "top".
   //
-  // 2026-05-18 (Issue #3) — derive from `resolvedOrientation` instead
-  // of the deprecated 2-way `isLandscape`.  In landscape-RIGHT we
-  // rotate −90° so the captured scene still reads upright (the
-  // opposite sense from landscape-LEFT).
+  // When vertical=true (non-locked + device-landscape; JS coords
+  // rotated with screen), the box IS user-aligned already.  No
+  // rotation needed — the image is already correctly oriented for
+  // direct display.
+  //
+  // V12.14.9 → v0.12.0 — extended from single-thumb (cumulative
+  // panorama image fallback) to the multi-thumb path too.  Pre-
+  // v0.12 the multi-thumb keyframe thumbnails had no rotation
+  // transform, so they appeared sideways in portrait-locked
+  // landscape captures (the case the example app's batch-keyframe
+  // engine hits).
+  const thumbRotationTransform = useMemo<
+    Array<{ rotate: string }> | undefined
+  >(() => {
+    // Empirical observation (on-device test 2026-05-28): captured
+    // per-keyframe JPEGs ARE saved in sensor-native landscape (not
+    // user-perspective), despite the cumulative panorama getting
+    // device-orientation rotation via finalize().  So:
+    //
+    //   jsPortrait box + landscape device: box is device-aligned;
+    //     image's "up" is at file-right (sensor convention).  Rotate
+    //     90° CW (landscape-left) / 90° CCW (landscape-right) to
+    //     align image up with box up.
+    //   jsLandscape box + landscape device: box is user-aligned via
+    //     OS screen rotation; image's "up" still at file-right.  To
+    //     align image up with box up, rotate the OPPOSITE direction
+    //     from the jsPortrait case — the screen-rotation already
+    //     handles half the work; we just need to compensate for the
+    //     remaining mismatch.
+    if (vertical) {
+      if (resolvedOrientation === 'landscape-left') return [{ rotate: '-90deg' }];
+      if (resolvedOrientation === 'landscape-right') return [{ rotate: '90deg' }];
+      return undefined;
+    }
+    if (resolvedOrientation === 'landscape-left') return [{ rotate: '90deg' }];
+    if (resolvedOrientation === 'landscape-right') return [{ rotate: '-90deg' }];
+    return undefined;
+  }, [resolvedOrientation, vertical]);
+
   const singleImageStyle = useMemo(
-    () => {
-      if (resolvedOrientation === 'landscape-left') {
-        return [StyleSheet.absoluteFill, { transform: [{ rotate: '90deg' }] }];
-      }
-      if (resolvedOrientation === 'landscape-right') {
-        return [StyleSheet.absoluteFill, { transform: [{ rotate: '-90deg' }] }];
-      }
-      return StyleSheet.absoluteFill;
-    },
-    [resolvedOrientation],
+    () =>
+      thumbRotationTransform
+        ? [StyleSheet.absoluteFill, { transform: thumbRotationTransform }]
+        : StyleSheet.absoluteFill,
+    [thumbRotationTransform],
+  );
+
+  // Same rotation applied to the per-keyframe (multi-thumb) tiles.
+  const multiThumbStyle = useMemo(
+    () =>
+      thumbRotationTransform
+        ? [styles.multiThumb, { transform: thumbRotationTransform }]
+        : styles.multiThumb,
+    [thumbRotationTransform],
   );
 
   return (
@@ -378,7 +462,9 @@ export function PanoramaBandOverlay({
         // looked detached when there were only a few thumbnails.
         <ScrollView
           ref={scrollRef}
-          horizontal
+          // Horizontal scroll in JS-portrait bands; vertical scroll
+          // in JS-landscape (non-locked host) bands.
+          horizontal={layout.kind === 'portrait'}
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           style={styles.thumbScroll}
@@ -395,7 +481,7 @@ export function PanoramaBandOverlay({
               // defensive).  URI segment helps RN's image cache key.
               key={`${idx}-${uri}`}
               source={{ uri }}
-              style={styles.multiThumb}
+              style={multiThumbStyle}
               resizeMode="cover"
               fadeDuration={0}
             />

package/src/camera/PanoramaSettingsModal.tsx

@@ -164,6 +164,20 @@ export function PanoramaSettingsModal({
       transparent
       statusBarTranslucent
       onRequestClose={onClose}
+      // v0.12.0 — RN's iOS Modal defaults to portrait-only.  When a
+      // host removes its UIInterfaceOrientations portrait lock to
+      // support landscape capture, opening this modal while in
+      // landscape would force iOS to rotate the window scene to
+      // portrait, then the underlying <Camera>'s ARSession can end
+      // up with stale display-transform state on dismiss (preview
+      // renders sideways).  Declaring all orientations keeps the
+      // window aligned with the device throughout the modal cycle.
+      supportedOrientations={[
+        'portrait',
+        'portrait-upside-down',
+        'landscape-left',
+        'landscape-right',
+      ]}
     >
       <View style={styles.backdrop}>
         <View style={styles.sheet}>

package/src/camera/ViewportCropOverlay.tsx

@@ -1,43 +1,49 @@
 // SPDX-License-Identifier: Apache-2.0
 /**
- * ViewportCropOverlay — V12.12.
+ * ViewportCropOverlay — V12.12 + v0.12.0 orientation-aware (R2-lite).
  *
  * Translucent dim bars on the camera preview's PAN-AXIS edges
- * showing where the panorama engine's source-crop is.  Earlier
- * versions (V12.11 Step B) put the bars on JS-top/bottom because
- * the engine clipped the long sensor axis (perpendicular to pan
- * in landscape, along pan in portrait) — that produced visible
- * bars on the user-LEFT/RIGHT in landscape, which is the WRONG
- * place: those edges aren't what the engine clips.
+ * showing where the panorama engine's source-crop is.  The engine
+ * clips ALONG the pan axis:
  *
- * V12.12: engine now clips ALONG the pan axis.  In sensor-native
- * coords:
- *   • landscape capture (vertical pan): clip = sensor Y (rows).
- *     User perceives this as TOP and BOTTOM of their landscape view.
- *   • portrait capture (horizontal pan): clip = sensor X (cols).
- *     User perceives this as LEFT and RIGHT of their portrait view.
+ *   • Portrait capture (horizontal pan / Mode B):
+ *     clip = sensor X (cols).  User perceives this as LEFT and RIGHT
+ *     of their portrait view.
  *
- * In JS coords (the host app is portrait-locked):
- *   • portrait device: user-left/right == JS-left/right.  Bars on
- *                       JS-left/right.
- *   • landscape device: user-top/bottom == JS-left/right (because
- *                       the user's vertical maps to JS-horizontal
- *                       under portrait-lock).  Bars on JS-left/right.
+ *   • Landscape capture (vertical pan / Mode A):
+ *     clip = sensor Y (rows).  User perceives this as TOP and BOTTOM
+ *     of their landscape view.
  *
- * So in BOTH device orientations the bars sit at JS-left and JS-right.
- * **No orientation detection needed in this component.**  The
- * engine has already arranged for the clip to manifest at the same
- * JS edges regardless of physical device orientation.
+ * ## v0.12.0 update (R2-lite)
  *
- * Bar width = `(1 - panFraction) / 2` of the JS-horizontal extent.
- * For the default `kPanAxisFractionRect = 0.70` engine constant,
- * each bar is 15 % wide — visibly substantial, matching what the
- * engine clips out per frame.
+ * Pre-v0.12 this component assumed the host app was orientation-
+ * locked to portrait, in which case ALL device orientations mapped
+ * to JS-left + JS-right for the bars (because the user's vertical
+ * mapped to JS-horizontal under portrait-lock).  Under R2-lite the
+ * SDK no longer holds the UI in portrait, so JS coordinates align
+ * with the physical device orientation reported by
+ * `useDeviceOrientation()`.  The bars now live at:
+ *
+ *   portrait, portrait-upside-down → JS-left + JS-right  (horizontal pan)
+ *   landscape-left, landscape-right → JS-top  + JS-bottom (vertical pan)
+ *
+ * Mounting: the flagship `<Camera>` component mounts this overlay
+ * by default in v0.12.0 (PR-3 wiring); Layer-2 hosts can mount it
+ * themselves via the public export.
+ *
+ * ## Bar dimensions
+ *
+ * Bar `(1 - panFraction) / 2` of the pan-axis extent.  For the
+ * default engine constant `kPanAxisFractionRect = 0.70`, each bar
+ * is 15 % of the pan-axis extent — visibly substantial, matching
+ * what the engine clips out per frame.
  */
 
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useDeviceOrientation } from './useDeviceOrientation';
+
 
 export interface ViewportCropOverlayProps {
   /**
@@ -52,15 +58,31 @@ export interface ViewportCropOverlayProps {
 export function ViewportCropOverlay({
   panFraction,
 }: ViewportCropOverlayProps): React.JSX.Element | null {
+  const orientation = useDeviceOrientation();
+
   if (panFraction >= 1) return null;
 
-  // (1 - panFraction) / 2 of the JS-horizontal extent on each side.
+  // (1 - panFraction) / 2 of the pan-axis extent on each side.
   const barPercent = `${((1 - panFraction) / 2) * 100}%` as const;
 
+  const isLandscape =
+    orientation === 'landscape-left' || orientation === 'landscape-right';
+
   return (
     <View pointerEvents="none" style={styles.root}>
-      <View style={[styles.bar, { left: 0, top: 0, bottom: 0, width: barPercent }]} />
-      <View style={[styles.bar, { right: 0, top: 0, bottom: 0, width: barPercent }]} />
+      {isLandscape ? (
+        <>
+          {/* Vertical-pan capture: bars at JS-top + JS-bottom. */}
+          <View style={[styles.bar, { left: 0, right: 0, top: 0, height: barPercent }]} />
+          <View style={[styles.bar, { left: 0, right: 0, bottom: 0, height: barPercent }]} />
+        </>
+      ) : (
+        <>
+          {/* Horizontal-pan capture: bars at JS-left + JS-right. */}
+          <View style={[styles.bar, { left: 0, top: 0, bottom: 0, width: barPercent }]} />
+          <View style={[styles.bar, { right: 0, top: 0, bottom: 0, width: barPercent }]} />
+        </>
+      )}
     </View>
   );
 }