From c5c3c5f82037fdd754a97d8b58ef25b5ce36a16f Mon Sep 17 00:00:00 2001
From: matcane <mateuszcane@gmail.com>
Date: Fri, 2 Oct 2026 12:49:43 +0200
Subject: [PATCH 1/2] refactor(slider): distinguish layout and shared container
 width

---
 src/BeforeClip.tsx            | 10 +++++-----
 src/ImageComparisonSlider.tsx |  8 ++++----
 src/createSliderPan.ts        |  4 ++--
 src/useComparisonSlider.ts    | 22 +++++++++++-----------
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/BeforeClip.tsx b/src/BeforeClip.tsx
index 0d8407e..622f4e2 100644
--- a/src/BeforeClip.tsx
+++ b/src/BeforeClip.tsx
@@ -10,29 +10,29 @@ interface BeforeClipProps {
   source: ImageSource | number;
   contentFit?: ImageProps["contentFit"];
   imageProps?: PassThroughImageProps;
-  measuredWidth: number;
+  layoutContainerWidth: number;
   splitPx: DerivedValue<number>;
   beforeLabel?: string;
 }
 
 export function BeforeClip(props: BeforeClipProps) {
-  const { measuredWidth, splitPx, source, contentFit, imageProps, beforeLabel } = props;
+  const { layoutContainerWidth, splitPx, source, contentFit, imageProps, beforeLabel } = props;
 
   const clipStyle = useAnimatedStyle(() => ({ width: splitPx.get() }));
 
   return (
     <Animated.View style={[styles.clip, clipStyle]}>
-      {measuredWidth > 0 && (
+      {layoutContainerWidth > 0 && (
         <>
           <Image
             {...imageProps}
             accessible={false}
             source={source}
             contentFit={contentFit}
-            style={[styles.leftImage, { width: measuredWidth }]}
+            style={[styles.leftImage, { width: layoutContainerWidth }]}
           />
           {beforeLabel && (
-            <View style={{ width: measuredWidth }}>
+            <View style={{ width: layoutContainerWidth }}>
               <Label text={beforeLabel} alignSelf="flex-start" testID="before-label" />
             </View>
           )}
diff --git a/src/ImageComparisonSlider.tsx b/src/ImageComparisonSlider.tsx
index 30d9ccf..1415bce 100644
--- a/src/ImageComparisonSlider.tsx
+++ b/src/ImageComparisonSlider.tsx
@@ -74,8 +74,8 @@ export function ImageComparisonSlider({
   afterLabel,
 }: ImageComparisonSliderProps) {
   const {
-    measuredWidth,
-    containerWidth,
+    layoutContainerWidth,
+    sharedContainerWidth,
     splitPercent,
     splitRatio,
     pan,
@@ -83,7 +83,7 @@ export function ImageComparisonSlider({
     onAccessibilityAction,
   } = useComparisonSlider(initialPosition, enabled);
 
-  const splitPx = useDerivedValue(() => splitRatio.get() * containerWidth.get());
+  const splitPx = useDerivedValue(() => splitRatio.get() * sharedContainerWidth.get());
 
   return (
     <GestureDetector gesture={pan}>
@@ -113,7 +113,7 @@ export function ImageComparisonSlider({
               contentFit={contentFit}
               imageProps={beforeImageProps}
               splitPx={splitPx}
-              measuredWidth={measuredWidth}
+              layoutContainerWidth={layoutContainerWidth}
               beforeLabel={beforeLabel}
             />
           )}
diff --git a/src/createSliderPan.ts b/src/createSliderPan.ts
index 1d3cf7c..f74d724 100644
--- a/src/createSliderPan.ts
+++ b/src/createSliderPan.ts
@@ -7,7 +7,7 @@ const PAN_ACTIVE_OFFSET_X = [-0, 0] as [activeOffsetXStart: number, activeOffset
 const PAN_FAIL_OFFSET_Y = [-18, 18] as [failOffsetYStart: number, failOffsetYEnd: number];
 
 export function createSliderPan(
-  containerWidth: SharedValue<number>,
+  sharedContainerWidth: SharedValue<number>,
   splitRatio: SharedValue<number>,
   enabled: boolean,
 ) {
@@ -16,7 +16,7 @@ export function createSliderPan(
     .activeOffsetX(PAN_ACTIVE_OFFSET_X)
     .failOffsetY(PAN_FAIL_OFFSET_Y)
     .onUpdate((e) => {
-      const width = containerWidth.get();
+      const width = sharedContainerWidth.get();
       if (width <= 0) return;
 
       const nextRatio = clampNextRatio(e.x, width, EDGE_MARGIN);
diff --git a/src/useComparisonSlider.ts b/src/useComparisonSlider.ts
index 393f0ad..4b7c79a 100644
--- a/src/useComparisonSlider.ts
+++ b/src/useComparisonSlider.ts
@@ -6,8 +6,8 @@ import { createSliderPan } from "./createSliderPan";
 import { clampInitialRatio, clampNextRatio, EDGE_MARGIN, ratioToPercent } from "./utils";
 
 export function useComparisonSlider(initialPosition: number, enabled: boolean) {
-  const [measuredWidth, setMeasuredWidth] = useState(0);
-  const containerWidth = useSharedValue(0);
+  const [layoutContainerWidth, setLayoutContainerWidth] = useState(0);
+  const sharedContainerWidth = useSharedValue(0);
 
   const initialRatio = clampInitialRatio(initialPosition);
   const initialPercent = ratioToPercent(initialRatio);
@@ -18,10 +18,10 @@ export function useComparisonSlider(initialPosition: number, enabled: boolean) {
     (width: number) => {
       if (width <= 0) return;
 
-      containerWidth.set(width);
-      setMeasuredWidth(width);
+      sharedContainerWidth.set(width);
+      setLayoutContainerWidth(width);
     },
-    [containerWidth],
+    [sharedContainerWidth],
   );
 
   const onAccessibilityAction = useCallback(
@@ -32,22 +32,22 @@ export function useComparisonSlider(initialPosition: number, enabled: boolean) {
       if (actionName !== "increment" && actionName !== "decrement") return;
 
       const nextRatio = clampNextRatio(
-        (splitRatio.get() + (actionName === "increment" ? 0.05 : -0.05)) * measuredWidth,
-        measuredWidth,
+        (splitRatio.get() + (actionName === "increment" ? 0.05 : -0.05)) * layoutContainerWidth,
+        layoutContainerWidth,
         EDGE_MARGIN,
       );
 
       splitRatio.set(nextRatio);
       setSplitPercent(ratioToPercent(nextRatio));
     },
-    [enabled, measuredWidth, splitRatio],
+    [enabled, layoutContainerWidth, splitRatio],
   );
 
-  const pan = createSliderPan(containerWidth, splitRatio, enabled);
+  const pan = createSliderPan(sharedContainerWidth, splitRatio, enabled);
 
   return {
-    measuredWidth,
-    containerWidth,
+    layoutContainerWidth,
+    sharedContainerWidth,
     splitPercent,
     splitRatio,
     pan,

From 8551238e3b8778a95c6dc992f5f27a974c4e6e01 Mon Sep 17 00:00:00 2001
From: matcane <mateuszcane@gmail.com>
Date: Fri, 2 Oct 2026 13:00:56 +0200
Subject: [PATCH 2/2] refactor(slider): move measure guard to
 ImageComparisonSlider

---
 src/BeforeClip.tsx            | 26 +++++++++++---------------
 src/ImageComparisonSlider.tsx |  2 +-
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/BeforeClip.tsx b/src/BeforeClip.tsx
index 622f4e2..8ae4e20 100644
--- a/src/BeforeClip.tsx
+++ b/src/BeforeClip.tsx
@@ -22,21 +22,17 @@ export function BeforeClip(props: BeforeClipProps) {
 
   return (
     <Animated.View style={[styles.clip, clipStyle]}>
-      {layoutContainerWidth > 0 && (
-        <>
-          <Image
-            {...imageProps}
-            accessible={false}
-            source={source}
-            contentFit={contentFit}
-            style={[styles.leftImage, { width: layoutContainerWidth }]}
-          />
-          {beforeLabel && (
-            <View style={{ width: layoutContainerWidth }}>
-              <Label text={beforeLabel} alignSelf="flex-start" testID="before-label" />
-            </View>
-          )}
-        </>
+      <Image
+        {...imageProps}
+        accessible={false}
+        source={source}
+        contentFit={contentFit}
+        style={[styles.leftImage, { width: layoutContainerWidth }]}
+      />
+      {beforeLabel && (
+        <View style={{ width: layoutContainerWidth }}>
+          <Label text={beforeLabel} alignSelf="flex-start" testID="before-label" />
+        </View>
       )}
     </Animated.View>
   );
diff --git a/src/ImageComparisonSlider.tsx b/src/ImageComparisonSlider.tsx
index 1415bce..445bcc0 100644
--- a/src/ImageComparisonSlider.tsx
+++ b/src/ImageComparisonSlider.tsx
@@ -107,7 +107,7 @@ export function ImageComparisonSlider({
             style={styles.fullImage}
           />
           {afterLabel && enabled && <Label text={afterLabel} testID="after-label" />}
-          {enabled && (
+          {enabled && layoutContainerWidth > 0 && (
             <BeforeClip
               source={before}
               contentFit={contentFit}