diff --git a/src/BeforeClip.tsx b/src/BeforeClip.tsx index 0d8407e..8ae4e20 100644 --- a/src/BeforeClip.tsx +++ b/src/BeforeClip.tsx @@ -10,33 +10,29 @@ interface BeforeClipProps { source: ImageSource | number; contentFit?: ImageProps["contentFit"]; imageProps?: PassThroughImageProps; - measuredWidth: number; + layoutContainerWidth: number; splitPx: DerivedValue; 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 ( - {measuredWidth > 0 && ( - <> - - {beforeLabel && ( - - - )} - + + {beforeLabel && ( + + )} ); diff --git a/src/ImageComparisonSlider.tsx b/src/ImageComparisonSlider.tsx index 30d9ccf..445bcc0 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 ( @@ -107,13 +107,13 @@ export function ImageComparisonSlider({ style={styles.fullImage} /> {afterLabel && enabled &&