feat: add hideDots to Swiper in expo 50

draftbit · Dec 9, 2024 · 2a90cbf · 2a90cbf
1 parent 5c8e7ee
commit 2a90cbf
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/example/src/SwiperExample.tsx b/example/src/SwiperExample.tsx
@@ -147,6 +147,24 @@ function SwiperExample() {
           />
         </View>
       </Section>
+
+      <Section title="Hide Dots Example" style={undefined}>
+        <Swiper
+          vertical={false}
+          hideDots
+          style={{ width: "100%", height: 300 }}
+        >
+          <SwiperItem style={[style.item, { backgroundColor: "#fdd3d3" }]}>
+            <Text>Test Slide 1</Text>
+          </SwiperItem>
+          <SwiperItem style={[style.item, { backgroundColor: "#d6d3fd" }]}>
+            <Text>Test Slide 2</Text>
+          </SwiperItem>
+          <SwiperItem style={[style.item, { backgroundColor: "#c9fdd9" }]}>
+            <Text>Test Slide 3</Text>
+          </SwiperItem>
+        </Swiper>
+      </Section>
     </Container>
   );
 }

diff --git a/packages/core/src/components/Swiper/Swiper.tsx b/packages/core/src/components/Swiper/Swiper.tsx
@@ -33,6 +33,7 @@ export interface SwiperProps<T> {
   minDistanceForAction?: number;
   minDistanceToCapture?: number;
   theme: ReadTheme;
+  hideDots?: boolean;
 }
 
 const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
@@ -61,6 +62,7 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
       minDistanceForAction,
       minDistanceToCapture,
       style,
+      hideDots = false,
     }: SwiperProps<any>,
     ref
   ) => {
@@ -157,10 +159,20 @@ const Swiper = forwardRef<SwiperRef, SwiperProps<any>>(
             nextTitleStyle: { color: nextTitleColor },
             dotsTouchable,
             ...(dotColor
-              ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
+              ? {
+                  dotProps: {
+                    badgeStyle: {
+                      backgroundColor: hideDots ? "transparent" : dotColor,
+                    },
+                  },
+                }
               : {}),
             ...(dotActiveColor
-              ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
+              ? {
+                  dotActiveStyle: {
+                    backgroundColor: hideDots ? "transparent" : dotActiveColor,
+                  },
+                }
               : {}),
           }}
         >