refactor(slider): extract BeforeClip and Handle

src/BeforeClip.tsx

@@ -0,0 +1,49 @@
+import { Image, type ImageProps, type ImageSource } from "expo-image";
+import { StyleSheet } from "react-native";
+import Animated, { useAnimatedStyle, type DerivedValue } from "react-native-reanimated";
+
+type PassThroughImageProps = Omit<ImageProps, "source" | "style" | "contentFit">;
+
+interface BeforeClipProps {
+  source: ImageSource | number;
+  contentFit?: ImageProps["contentFit"];
+  imageProps?: PassThroughImageProps;
+  measuredWidth: number;
+  splitPx: DerivedValue<number>;
+}
+
+export function BeforeClip(props: BeforeClipProps) {
+  const { measuredWidth, splitPx, source, contentFit, imageProps } = props;
+
+  const clipStyle = useAnimatedStyle(() => ({ width: splitPx.get() }));
+
+  return (
+    <Animated.View style={[styles.clip, clipStyle]}>
+      {measuredWidth > 0 && (
+        <Image
+          {...imageProps}
+          accessible={false}
+          source={source}
+          contentFit={contentFit}
+          style={[styles.leftImage, { width: measuredWidth }]}
+        />
+      )}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  clip: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    overflow: "hidden",
+  },
+  leftImage: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    height: "100%",
+  },
+});

src/Handle.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, { useAnimatedStyle, type DerivedValue } from "react-native-reanimated";
+
+const HANDLE_KNOB = 40;
+const LINE_WIDTH = 3;
+
+interface HandleProps {
+  knobContent?: ReactNode;
+  renderLine?: ReactNode;
+  splitPx: DerivedValue<number>;
+}
+
+export function Handle(props: HandleProps) {
+  const { knobContent, renderLine, splitPx } = props;
+
+  const handleGroupStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: splitPx.get() - HANDLE_KNOB / 2 }],
+  }));
+
+  return (
+    <Animated.View style={[styles.handleColumn, handleGroupStyle]} pointerEvents="none">
+      {renderLine ?? <View style={styles.line} />}
+      <View style={styles.knob}>{knobContent}</View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  handleColumn: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: HANDLE_KNOB,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  line: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: LINE_WIDTH,
+    alignSelf: "center",
+    backgroundColor: "#ffffff",
+  },
+  knob: {
+    width: HANDLE_KNOB,
+    height: HANDLE_KNOB,
+    borderRadius: HANDLE_KNOB / 2,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#ffffff",
+  },
+});

src/ImageComparisonSlider.tsx

@@ -2,13 +2,12 @@ import { Image, type ImageProps, type ImageSource } from "expo-image";
 import { type ReactNode } from "react";
 import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
-import Animated, { useAnimatedStyle, useDerivedValue } from "react-native-reanimated";
+import { useDerivedValue } from "react-native-reanimated";
 
+import { BeforeClip } from "./BeforeClip";
+import { Handle } from "./Handle";
 import { useComparisonSlider } from "./useComparisonSlider";
 
-const HANDLE_KNOB = 40;
-const LINE_WIDTH = 3;
-
 type PassThroughImageProps = Omit<ImageProps, "source" | "style" | "contentFit">;
 
 /** Props for {@link ImageComparisonSlider}. */
@@ -77,12 +76,6 @@ export function ImageComparisonSlider({
 
   const splitPx = useDerivedValue(() => splitRatio.get() * containerWidth.get());
 
-  const clipStyle = useAnimatedStyle(() => ({ width: splitPx.get() }));
-
-  const handleGroupStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: splitPx.get() - HANDLE_KNOB / 2 }],
-  }));
-
   return (
     <GestureDetector gesture={pan}>
       <View
@@ -105,26 +98,17 @@ export function ImageComparisonSlider({
             style={styles.fullImage}
           />
           {enabled && (
-            <Animated.View style={[styles.clip, clipStyle]}>
-              {measuredWidth > 0 && (
-                <Image
-                  {...beforeImageProps}
-                  accessible={false}
-                  source={before}
-                  contentFit={contentFit}
-                  style={[styles.leftImage, { width: measuredWidth }]}
-                />
-              )}
-            </Animated.View>
+            <BeforeClip
+              source={before}
+              contentFit={contentFit}
+              imageProps={beforeImageProps}
+              splitPx={splitPx}
+              measuredWidth={measuredWidth}
+            />
           )}
         </View>
 
-        {enabled && (
-          <Animated.View style={[styles.handleColumn, handleGroupStyle]} pointerEvents="none">
-            {renderLine ?? <View style={styles.line} />}
-            <View style={styles.knob}>{knobContent}</View>
-          </Animated.View>
-        )}
+        {enabled && <Handle knobContent={knobContent} renderLine={renderLine} splitPx={splitPx} />}
       </View>
     </GestureDetector>
   );
@@ -143,43 +127,4 @@ const styles = StyleSheet.create({
     width: "100%",
     height: "100%",
   },
-  clip: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    overflow: "hidden",
-  },
-  leftImage: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    height: "100%",
-  },
-  handleColumn: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    width: HANDLE_KNOB,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  line: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    width: LINE_WIDTH,
-    alignSelf: "center",
-    backgroundColor: "#ffffff",
-  },
-  knob: {
-    width: HANDLE_KNOB,
-    height: HANDLE_KNOB,
-    borderRadius: HANDLE_KNOB / 2,
-    overflow: "hidden",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#ffffff",
-  },
 });