Added 'onSwipedX' callbacks to DeckSwiper

Author: YoussefHenna

example/src/DeckSwiperExample.tsx

@@ -45,7 +45,23 @@ const DeckSwiperExample: React.FC = () => {
           </DeckSwiperCard>
         </DeckSwiper>
       </Section>
-
+      <Section title="Lazy Rendering (renderItem)" style={{}}>
+        <DeckSwiper
+          infiniteSwiping
+          visibleCardCount={2}
+          data={sampleData}
+          onSwipedDown={(index) => console.log("Swiped down", index)}
+          onSwipedUp={(index) => console.log("Swiped up", index)}
+          onSwipedLeft={(index) => console.log("Swiped left", index)}
+          onSwipedRight={(index) => console.log("Swiped right", index)}
+          renderItem={({ item }) => (
+            <DeckSwiperCard>
+              <Text>{item.fullName}</Text>
+            </DeckSwiperCard>
+          )}
+          keyExtractor={(item) => item.id.toString()}
+        />
+      </Section>
       <Section title="Infinite swiper with images" style={{}}>
         <DeckSwiper infiniteSwiping visibleCardCount={2}>
           <DeckSwiperCard>
@@ -68,20 +84,6 @@ const DeckSwiperExample: React.FC = () => {
           </DeckSwiperCard>
         </DeckSwiper>
       </Section>
-
-      <Section title="Lazy Rendering (renderItem)" style={{}}>
-        <DeckSwiper
-          infiniteSwiping
-          visibleCardCount={2}
-          data={sampleData}
-          renderItem={({ item }) => (
-            <DeckSwiperCard>
-              <Text>{item.fullName}</Text>
-            </DeckSwiperCard>
-          )}
-          keyExtractor={(item) => item.id.toString()}
-        />
-      </Section>
     </Container>
   );
 };

packages/core/src/components/DeckSwiper/DeckSwiper.tsx

@@ -3,6 +3,10 @@ import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
 import DeckSwiperComponent from "react-native-deck-swiper";
 
 export interface DeckSwiperProps<T> {
+  onSwipedLeft?: (index: number) => void;
+  onSwipedRight?: (index: number) => void;
+  onSwipedUp?: (index: number) => void;
+  onSwipedDown?: (index: number) => void;
   onIndexChanged?: (index: number) => void;
   onEndReached?: () => void;
   startCardIndex?: number;
@@ -17,6 +21,10 @@ export interface DeckSwiperProps<T> {
 }
 
 const DeckSwiper = <T extends object>({
+  onSwipedLeft,
+  onSwipedRight,
+  onSwipedUp,
+  onSwipedDown,
   onIndexChanged,
   onEndReached,
   startCardIndex = 0,
@@ -113,6 +121,10 @@ const DeckSwiper = <T extends object>({
         backgroundColor="transparent"
         cardVerticalMargin={0}
         cardHorizontalMargin={0}
+        onSwipedLeft={onSwipedLeft}
+        onSwipedRight={onSwipedRight}
+        onSwipedTop={onSwipedUp}
+        onSwipedBottom={onSwipedDown}
       />
     </View>
   );