feat(slider): add before and after labels

README.md

@@ -71,6 +71,8 @@ const styles = StyleSheet.create({
 | `renderLine` | `ReactNode` | — | Divider line |
 | `beforeImageProps` | `PassThroughImageProps` | — | `before` (`expo-image`, minus `source` / `style` / `contentFit`) |
 | `afterImageProps` | `PassThroughImageProps` | — | `after` |
+| `beforeLabel` | `string` | — | `Label on the before image` |
+| `afterLabel` | `string` | — | `Label on the after image` |
 
 ## License
 

example/App.tsx

@@ -8,15 +8,19 @@ export default function App() {
       <View style={styles.container}>
         <ImageComparisonSlider
           before={require("./assets/android-icon-background.png")}
+          beforeLabel="Before"
           after={require("./assets/android-icon-foreground.png")}
+          afterLabel="After"
           borderRadius={16}
           style={{ width: 200, height: 300, backgroundColor: "black" }}
           knobContent={<View style={{ backgroundColor: "red", flex: 1, width: "100%" }} />}
         />
 
         <ImageComparisonSlider
           before={require("./assets/android-icon-background.png")}
+          beforeLabel="Before"
           after={require("./assets/android-icon-foreground.png")}
+          afterLabel="After"
           borderRadius={16}
           style={{ width: 200, height: 300, backgroundColor: "black" }}
           knobContent={<View style={{ backgroundColor: "red", flex: 1, width: "100%" }} />}

src/BeforeClip.tsx

@@ -1,7 +1,9 @@
 import { Image, type ImageProps, type ImageSource } from "expo-image";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Animated, { useAnimatedStyle, type DerivedValue } from "react-native-reanimated";
 
+import { Label } from "./Label";
+
 type PassThroughImageProps = Omit<ImageProps, "source" | "style" | "contentFit">;
 
 interface BeforeClipProps {
@@ -10,23 +12,31 @@ interface BeforeClipProps {
   imageProps?: PassThroughImageProps;
   measuredWidth: number;
   splitPx: DerivedValue<number>;
+  beforeLabel?: string;
 }
 
 export function BeforeClip(props: BeforeClipProps) {
-  const { measuredWidth, splitPx, source, contentFit, imageProps } = props;
+  const { measuredWidth, splitPx, source, contentFit, imageProps, beforeLabel } = 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 }]}
-        />
+        <>
+          <Image
+            {...imageProps}
+            accessible={false}
+            source={source}
+            contentFit={contentFit}
+            style={[styles.leftImage, { width: measuredWidth }]}
+          />
+          {beforeLabel && (
+            <View style={{ width: measuredWidth }}>
+              <Label text={beforeLabel} alignSelf="flex-start" testID="before-label" />
+            </View>
+          )}
+        </>
       )}
     </Animated.View>
   );

src/ImageComparisonSlider.test.tsx

@@ -75,6 +75,8 @@ describe("ImageComparisonSlider", () => {
       renderLine: <Text>Custom line</Text>,
       beforeImageProps: { testID: "before-image" },
       afterImageProps: { testID: "after-image" },
+      beforeLabel: "Before",
+      afterLabel: "After",
     });
 
     expect(getSlider()).toHaveProp("accessibilityState", { disabled: true });
@@ -83,6 +85,8 @@ describe("ImageComparisonSlider", () => {
     expect(screen.queryByTestId("before-image")).toBeNull();
     expect(screen.queryByText("Custom knob")).toBeNull();
     expect(screen.queryByText("Custom line")).toBeNull();
+    expect(screen.queryByText("Before")).toBeNull();
+    expect(screen.queryByText("After")).toBeNull();
   });
 
   it("renders custom knob and line content", async () => {
@@ -132,4 +136,34 @@ describe("ImageComparisonSlider", () => {
 
     expect(getSlider()).toHaveProp("accessibilityValue", { min: 0, max: 100, now: 50 });
   });
+
+  it("does not render labels by default", async () => {
+    await renderSlider();
+
+    expect(screen.queryByTestId("before-label")).toBeNull();
+    expect(screen.queryByTestId("after-label")).toBeNull();
+  });
+
+  it("renders before and after labels when provided", async () => {
+    await renderSlider({ beforeLabel: "Before", afterLabel: "After" });
+    await layoutSlider();
+
+    expect(screen.getByText("Before")).toBeOnTheScreen();
+    expect(screen.getByText("After")).toBeOnTheScreen();
+  });
+
+  it("renders only the before label", async () => {
+    await renderSlider({ beforeLabel: "Before" });
+    await layoutSlider();
+
+    expect(screen.getByText("Before")).toBeOnTheScreen();
+    expect(screen.queryByTestId("after-label")).toBeNull();
+  });
+
+  it("renders only the after label", async () => {
+    await renderSlider({ afterLabel: "After" });
+
+    expect(screen.getByText("After")).toBeOnTheScreen();
+    expect(screen.queryByTestId("before-label")).toBeNull();
+  });
 });

src/ImageComparisonSlider.tsx

@@ -6,6 +6,7 @@ import { useDerivedValue } from "react-native-reanimated";
 
 import { BeforeClip } from "./BeforeClip";
 import { Handle } from "./Handle";
+import { Label } from "./Label";
 import { useComparisonSlider } from "./useComparisonSlider";
 
 type PassThroughImageProps = Omit<ImageProps, "source" | "style" | "contentFit">;
@@ -44,6 +45,12 @@ export interface ImageComparisonSliderProps {
 
   /** after */
   afterImageProps?: PassThroughImageProps;
+
+  /** Label on the before image */
+  beforeLabel?: string;
+
+  /** Label on the after image */
+  afterLabel?: string;
 }
 
 /**
@@ -63,6 +70,8 @@ export function ImageComparisonSlider({
   renderLine,
   beforeImageProps,
   afterImageProps,
+  beforeLabel,
+  afterLabel,
 }: ImageComparisonSliderProps) {
   const {
     measuredWidth,
@@ -97,13 +106,15 @@ export function ImageComparisonSlider({
             contentFit={contentFit}
             style={styles.fullImage}
           />
+          {afterLabel && enabled && <Label text={afterLabel} testID="after-label" />}
           {enabled && (
             <BeforeClip
               source={before}
               contentFit={contentFit}
               imageProps={beforeImageProps}
               splitPx={splitPx}
               measuredWidth={measuredWidth}
+              beforeLabel={beforeLabel}
             />
           )}
         </View>

src/Label.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View, type ViewStyle } from "react-native";
+
+import { EDGE_MARGIN } from "./utils";
+
+interface LabelProps {
+  text: string;
+  alignSelf?: ViewStyle["alignSelf"];
+  testID?: string;
+}
+
+export function Label({ text, alignSelf = "flex-end", testID }: LabelProps) {
+  return (
+    <View testID={testID} style={[styles.badge, { alignSelf }]}>
+      <Text style={styles.text}>{text}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    margin: EDGE_MARGIN,
+    backgroundColor: "white",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 8,
+  },
+  text: {
+    color: "black",
+    fontSize: 12,
+    lineHeight: 16,
+  },
+});