Added 'onSwipedX' callbacks to Swiper

Author: YoussefHenna

example/src/SwiperExample.js

@@ -36,7 +36,9 @@ function SwiperExample({ theme }) {
           style={{ width: "100%", height: 300 }}
           dotColor="green"
           dotActiveColor="red"
-          onIndexChanged={index => console.log("onIndexChanged: ", index)}
+          onSwipedLeft={(index) => console.log("Swiped left", index)}
+          onSwipedRight={(index) => console.log("Swiped right", index)}
+          onIndexChanged={(index) => console.log("onIndexChanged: ", index)}
         >
           <SwiperItem style={[style.item, { backgroundColor: "#fdd3d3" }]}>
             <Text>Test Slide 1</Text>
@@ -55,6 +57,8 @@ function SwiperExample({ theme }) {
           style={{ width: "100%", height: 300 }}
           dotColor="#86939e"
           dotActiveColor="#2089dc"
+          onSwipedDown={(index) => console.log("Swiped down", index)}
+          onSwipedUp={(index) => console.log("Swiped up", index)}
         >
           <SwiperItem style={[style.item, { backgroundColor: "#fdd3d3" }]}>
             <Text>Test Slide 1</Text>
@@ -67,7 +71,7 @@ function SwiperExample({ theme }) {
           </SwiperItem>
         </Swiper>
       </Section>
-      <Section title="Data-Driven Example">
+      {/* <Section title="Data-Driven Example">
         <Swiper
           vertical={false}
           loop={true}
@@ -93,7 +97,7 @@ function SwiperExample({ theme }) {
             </SwiperItem>
           )}
         />
-      </Section>
+      </Section> */}
     </Container>
   );
 }

packages/core/src/components/Swiper/Swiper.tsx

@@ -3,6 +3,10 @@ import { View, StyleProp, ViewStyle } from "react-native";
 import SwiperComponent from "react-native-web-swiper";
 
 export interface SwiperProps<T> {
+  onSwipedLeft?: (index: number) => void;
+  onSwipedRight?: (index: number) => void;
+  onSwipedUp?: (index: number) => void;
+  onSwipedDown?: (index: number) => void;
   vertical?: boolean;
   loop?: boolean;
   from?: number;
@@ -38,47 +42,92 @@ const Swiper = ({
   keyExtractor,
   renderItem,
   children,
-  onIndexChanged,
+  onIndexChanged: onIndexChangedProp,
+  onSwipedLeft,
+  onSwipedRight,
+  onSwipedUp,
+  onSwipedDown,
   style,
-}: SwiperProps<any>) => (
-  <View style={style}>
-    {/* @ts-ignore */}
-    <SwiperComponent
-      from={from}
-      loop={loop}
-      timeout={timeout}
-      vertical={vertical}
-      onIndexChanged={onIndexChanged}
-      controlsProps={{
-        prevTitle,
-        nextTitle,
-        prevTitleStyle: { color: prevTitleColor },
-        nextTitleStyle: { color: nextTitleColor },
-        dotsTouchable,
-        ...(dotColor
-          ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
-          : {}),
-        ...(dotActiveColor
-          ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
-          : {}),
-      }}
-    >
-      {data && renderItem
-        ? data.map((item, index) => {
-            const component = renderItem({ item, index });
+}: SwiperProps<any>) => {
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const numberOfItems = data?.length ?? React.Children.count(children);
 
-            if (!component) {
-              return null;
-            }
+  const onIndexChanged = (index: number) => {
+    const previous = currentIndex;
+    const current = index;
 
-            const key = keyExtractor ? keyExtractor(item, index) : index;
-            return React.cloneElement(component, {
-              key,
-            });
-          })
-        : children}
-    </SwiperComponent>
-  </View>
-);
+    onIndexChangedProp?.(index);
+    setCurrentIndex(index);
+
+    if (previous === numberOfItems - 1 && current === 0) {
+      //Last -> first swipe
+      if (vertical) {
+        onSwipedUp?.(previous);
+      } else {
+        onSwipedLeft?.(previous);
+      }
+    } else if (previous === 0 && current === numberOfItems - 1) {
+      //First -> last swipe
+      if (vertical) {
+        onSwipedDown?.(previous);
+      } else {
+        onSwipedRight?.(previous);
+      }
+    } else if (current > previous) {
+      if (vertical) {
+        onSwipedUp?.(previous);
+      } else {
+        onSwipedLeft?.(previous);
+      }
+    } else if (current < previous) {
+      if (vertical) {
+        onSwipedDown?.(previous);
+      } else {
+        onSwipedRight?.(previous);
+      }
+    }
+  };
+
+  return (
+    <View style={style}>
+      {/* @ts-ignore */}
+      <SwiperComponent
+        from={from}
+        loop={loop}
+        timeout={timeout}
+        vertical={vertical}
+        onIndexChanged={onIndexChanged}
+        controlsProps={{
+          prevTitle,
+          nextTitle,
+          prevTitleStyle: { color: prevTitleColor },
+          nextTitleStyle: { color: nextTitleColor },
+          dotsTouchable,
+          ...(dotColor
+            ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
+            : {}),
+          ...(dotActiveColor
+            ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
+            : {}),
+        }}
+      >
+        {data && renderItem
+          ? data.map((item, index) => {
+              const component = renderItem({ item, index });
+
+              if (!component) {
+                return null;
+              }
+
+              const key = keyExtractor ? keyExtractor(item, index) : index;
+              return React.cloneElement(component, {
+                key,
+              });
+            })
+          : children}
+      </SwiperComponent>
+    </View>
+  );
+};
 
 export default Swiper;