Merge pull request #33 from umangloria/main

feat: add callback for onIndexChange
Skipperlla · Aug 28, 2024 · 12b823d · 12b823d
2 parents d6c9866 + fd1c546
commit 12b823d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -44,15 +44,16 @@ yarn add react-native-reanimated react-native-gesture-handler
 
 ## Event callbacks
 
-| Props         | type | description                                                                                    | default             |
-| :------------ | :--- | :--------------------------------------------------------------------------------------------- | :------------------ |
-| onSwipeLeft   | func | Function called when a card is swiped left. It receives the index of the card as a parameter.  | `(cardIndex) => {}` |
-| onSwipeRight  | func | Function called when a card is swiped right. It receives the index of the card as a parameter. | `(cardIndex) => {}` |
-| onSwipeTop    | func | Function called when a card is swiped top. It receives the index of the card as a parameter.   | `(cardIndex) => {}` |
-| onSwipedAll   | func | Function called when all cards have been swiped.                                               | `() => {}`          |
-| onSwipeStart  | func | Function called when a swipe event starts.                                                     | `() => {}`          |
-| onSwipeEnd    | func | Function called when a swipe event ends.                                                       | `() => {}`          |
-| onSwipeActive | func | Function called when a swipe event is active.                                                  | `() => {}`          |
+| Props         | type | description                                                                                           | default             |
+| :------------ | :--- | :---------------------------------------------------------------------------------------------------- | :------------------ |
+| onSwipeLeft   | func | Function called when a card is swiped left. It receives the index of the card as a parameter.         | `(cardIndex) => {}` |
+| onSwipeRight  | func | Function called when a card is swiped right. It receives the index of the card as a parameter.        | `(cardIndex) => {}` |
+| onSwipeTop    | func | Function called when a card is swiped top. It receives the index of the card as a parameter.          | `(cardIndex) => {}` |
+| onSwipedAll   | func | Function called when all cards have been swiped.                                                      | `() => {}`          |
+| onSwipeStart  | func | Function called when a swipe event starts.                                                            | `() => {}`          |
+| onSwipeEnd    | func | Function called when a swipe event ends.                                                              | `() => {}`          |
+| onSwipeActive | func | Function called when a swipe event is active.                                                         | `() => {}`          |
+| onIndexChange | func | Function called when the index of the card changes. It receives the index of the card as a parameter. | `(cardIndex) => {}` |
 
 ## Swipe Animation Props
 
@@ -182,6 +183,9 @@ const App = () => {
           cardStyle={styles.cardStyle}
           data={IMAGES}
           renderCard={renderCard}
+          onIndexChange={(index) => {
+            console.log('Current Active index', index);
+          }}
           onSwipeRight={(cardIndex) => {
             console.log('cardIndex', cardIndex);
           }}

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -94,6 +94,9 @@ const App = () => {
           cardStyle={styles.cardStyle}
           data={IMAGES}
           renderCard={renderCard}
+          onIndexChange={(index) => {
+            console.log('Current Active index', index);
+          }}
           onSwipeRight={(cardIndex) => {
             console.log('cardIndex', cardIndex);
           }}

diff --git a/src/Swiper.tsx b/src/Swiper.tsx
@@ -17,6 +17,7 @@ const Swiper = <T,>(
     onSwipedAll,
     onSwipeTop,
     onSwipeBottom,
+    onIndexChange,
     cardStyle,
     disableRightSwipe,
     disableLeftSwipe,
@@ -80,6 +81,19 @@ const Swiper = <T,>(
     [data]
   );
 
+  //Listen to the activeIndex value
+  useAnimatedReaction(
+    () => {
+      return activeIndex.value;
+    },
+    (currentValue, previousValue) => {
+      if (currentValue !== previousValue && onIndexChange) {
+        runOnJS(onIndexChange)(currentValue);
+      }
+    },
+    []
+  );
+
   return data.map((item, index) => {
     return (
       <SwiperCard

diff --git a/src/index.ts b/src/index.ts
@@ -27,6 +27,8 @@ export type SwiperOptions<T> = {
   onSwipeStart?: () => void;
   onSwipeEnd?: () => void;
   onSwipeActive?: () => void;
+  //* Active Index Change Callback
+  onIndexChange?: (index: number) => void;
   //* Swipe Animation Props
   disableRightSwipe?: boolean;
   disableLeftSwipe?: boolean;