From 9017a9968de366b6764c828a74a583c9a184c081 Mon Sep 17 00:00:00 2001
From: matcane <mateuszcane@gmail.com>
Date: Sun, 27 Sep 2026 16:24:15 +0200
Subject: [PATCH 1/7] feat(slider): add labels props

---
 src/ImageComparisonSlider.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/ImageComparisonSlider.tsx b/src/ImageComparisonSlider.tsx
index 0be5890..b986bbf 100644
--- a/src/ImageComparisonSlider.tsx
+++ b/src/ImageComparisonSlider.tsx
@@ -44,6 +44,12 @@ export interface ImageComparisonSliderProps {
 
   /** after */
   afterImageProps?: PassThroughImageProps;
+
+  /** Label on the before image */
+  beforeLabel?: string;
+
+  /** LAbel on the after image */
+  afterLabel?: string;
 }
 
 /**

From aaad13e0d1f7e85e7c628aaa4e433e44ddfccfa5 Mon Sep 17 00:00:00 2001
From: matcane <mateuszcane@gmail.com>
Date: Sun, 27 Sep 2026 16:24:52 +0200
Subject: [PATCH 2/7] test(slider): add slider labels tests

---
 src/ImageComparisonSlider.test.tsx | 34 ++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/ImageComparisonSlider.test.tsx b/src/ImageComparisonSlider.test.tsx
index f9fba07..d00145f 100644
--- a/src/ImageComparisonSlider.test.tsx
+++ b/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();
+  });
 });

From 38fef804dc099c7a010298b1ea1493a4ed719f4a Mon Sep 17 00:00:00 2001
From: matcane <mateuszcane@gmail.com>
Date: Sun, 27 Sep 2026 19:39:22 +0200
Subject: [PATCH 3/7] feat(slider): add Label component

---
 src/BeforeClip.tsx            | 28 +++++++++++++++++++---------
 src/ImageComparisonSlider.tsx |  5 +++++
 src/Label.tsx                 | 31 +++++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 src/Label.tsx

diff --git a/src/BeforeClip.tsx b/src/BeforeClip.tsx
index f0696dc..5fccbd9 100644
--- a/src/BeforeClip.tsx
+++ b/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" />
+            </View>
+          )}
+        </>
       )}
     </Animated.View>
   );
diff --git a/src/ImageComparisonSlider.tsx b/src/ImageComparisonSlider.tsx
index b986bbf..4da5450 100644
--- a/src/ImageComparisonSlider.tsx
+++ b/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">;
@@ -69,6 +70,8 @@ export function ImageComparisonSlider({
   renderLine,
   beforeImageProps,
   afterImageProps,
+  beforeLabel,
+  afterLabel,
 }: ImageComparisonSliderProps) {
   const {
     measuredWidth,
@@ -103,6 +106,7 @@ export function ImageComparisonSlider({
             contentFit={contentFit}
             style={styles.fullImage}
           />
+          {afterLabel && enabled && <Label text={afterLabel} />}
           {enabled && (
             <BeforeClip
               source={before}
@@ -110,6 +114,7 @@ export function ImageComparisonSlider({
               imageProps={beforeImageProps}
               splitPx={splitPx}
               measuredWidth={measuredWidth}
+              beforeLabel={beforeLabel}
             />
           )}
         </View>
diff --git a/src/Label.tsx b/src/Label.tsx
new file mode 100644
index 0000000..61ba063
--- /dev/null
+++ b/src/Label.tsx
@@ -0,0 +1,31 @@
+import { StyleSheet, Text, View, type ViewStyle } from "react-native";
+
+import { EDGE_MARGIN } from "./utils";
+
+interface LabelProps {
+  text: string;
+  alignSelf?: ViewStyle["alignSelf"];
+}
+
+export function Label({ text, alignSelf = "flex-end" }: LabelProps) {
+  return (
+    <View 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,
+  },
+});

From 4c0d96a1dbff82ae7a4f5615559f9c6698514940 Mon Sep 17 00:00:00 2001
From: matcane <mateuszcane@gmail.com>
Date: Sun, 27 Sep 2026 22:20:53 +0200
Subject: [PATCH 4/7] chore: update example with new labels

---
 example/App.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/example/App.tsx b/example/App.tsx
index 1e9ed8d..3e4c2de 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -8,7 +8,9 @@ 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%" }} />}
@@ -16,7 +18,9 @@ export default function App() {
 
         <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%" }} />}

From 89017cb7a1356cbc9dbfd928237b2076bb0c7b27 Mon Sep 17 00:00:00 2001
From: matcane <mateuszcane@gmail.com>
Date: Sun, 27 Sep 2026 22:22:54 +0200
Subject: [PATCH 5/7] chore: JSDocs typo in afterLabel prop

---
 src/ImageComparisonSlider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ImageComparisonSlider.tsx b/src/ImageComparisonSlider.tsx
index 4da5450..bb54b5b 100644
--- a/src/ImageComparisonSlider.tsx
+++ b/src/ImageComparisonSlider.tsx
@@ -49,7 +49,7 @@ export interface ImageComparisonSliderProps {
   /** Label on the before image */
   beforeLabel?: string;
 
-  /** LAbel on the after image */
+  /** Label on the after image */
   afterLabel?: string;
 }
 

From 8044069739deef957bf72d35804a7a17039aa31c Mon Sep 17 00:00:00 2001
From: matcane <mateuszcane@gmail.com>
Date: Sun, 27 Sep 2026 22:25:46 +0200
Subject: [PATCH 6/7] docs: add new props to props table

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 8769ef1..89133e3 100644
--- a/README.md
+++ b/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
 

From 22015fa45d9866584d684786620d34505f29b74f Mon Sep 17 00:00:00 2001
From: matcane <mateuszcane@gmail.com>
Date: Sun, 27 Sep 2026 22:40:39 +0200
Subject: [PATCH 7/7] test(slider): add label testIDs

---
 src/BeforeClip.tsx            | 2 +-
 src/ImageComparisonSlider.tsx | 2 +-
 src/Label.tsx                 | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/BeforeClip.tsx b/src/BeforeClip.tsx
index 5fccbd9..0d8407e 100644
--- a/src/BeforeClip.tsx
+++ b/src/BeforeClip.tsx
@@ -33,7 +33,7 @@ export function BeforeClip(props: BeforeClipProps) {
           />
           {beforeLabel && (
             <View style={{ width: measuredWidth }}>
-              <Label text={beforeLabel} alignSelf="flex-start" />
+              <Label text={beforeLabel} alignSelf="flex-start" testID="before-label" />
             </View>
           )}
         </>
diff --git a/src/ImageComparisonSlider.tsx b/src/ImageComparisonSlider.tsx
index bb54b5b..30d9ccf 100644
--- a/src/ImageComparisonSlider.tsx
+++ b/src/ImageComparisonSlider.tsx
@@ -106,7 +106,7 @@ export function ImageComparisonSlider({
             contentFit={contentFit}
             style={styles.fullImage}
           />
-          {afterLabel && enabled && <Label text={afterLabel} />}
+          {afterLabel && enabled && <Label text={afterLabel} testID="after-label" />}
           {enabled && (
             <BeforeClip
               source={before}
diff --git a/src/Label.tsx b/src/Label.tsx
index 61ba063..c4edb8d 100644
--- a/src/Label.tsx
+++ b/src/Label.tsx
@@ -5,11 +5,12 @@ import { EDGE_MARGIN } from "./utils";
 interface LabelProps {
   text: string;
   alignSelf?: ViewStyle["alignSelf"];
+  testID?: string;
 }
 
-export function Label({ text, alignSelf = "flex-end" }: LabelProps) {
+export function Label({ text, alignSelf = "flex-end", testID }: LabelProps) {
   return (
-    <View style={[styles.badge, { alignSelf }]}>
+    <View testID={testID} style={[styles.badge, { alignSelf }]}>
       <Text style={styles.text}>{text}</Text>
     </View>
   );