Fix DeckSwiper and Swiper with stateful children (#678)

* Re-render deck swiper cards on state change

* Added monkey patch for swiper to allow state-changing components

* Remove unneeded chain operator

Author: YoussefHenna

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

@@ -53,6 +53,8 @@ const DeckSwiper = <T extends object>({
     );
   }
 
+  const deckSwiperRef = React.useRef<DeckSwiperComponent<T>>(null);
+
   const childrenArray = React.useMemo(
     () => React.Children.toArray(children),
     [children]
@@ -89,6 +91,14 @@ const DeckSwiper = <T extends object>({
     }
   };
 
+  /* 
+  react-native-deck-swiper does not re-render cards when parent state changes
+  This forces an update on every re-render to reflect any parent state changes
+  */
+  React.useEffect(() => {
+    deckSwiperRef.current?.forceUpdate();
+  });
+
   /**
    * By default react-native-deck-swiper positions everything with absolute position.
    * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
@@ -103,6 +113,7 @@ const DeckSwiper = <T extends object>({
     <View>
       <View style={styles.containerHeightFiller}>{renderFirstCard()}</View>
       <DeckSwiperComponent
+        ref={deckSwiperRef}
         cards={cardsData as any[]}
         renderCard={renderCard}
         keyExtractor={cardKeyExtractor}

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

@@ -40,15 +40,16 @@ const Swiper = ({
   data,
   keyExtractor,
   renderItem,
-  children,
+  children: childrenProp,
   onIndexChanged: onIndexChangedProp,
   onSwipe,
   onSwipedNext,
   onSwipedPrevious,
   style,
 }: SwiperProps<any>) => {
   const [currentIndex, setCurrentIndex] = React.useState(0);
-  const numberOfItems = data?.length ?? React.Children.count(children);
+  const numberOfItems = data?.length ?? React.Children.count(childrenProp);
+  const swiperRef = React.useRef<any>(null);
 
   const onIndexChanged = (index: number) => {
     const previous = currentIndex;
@@ -71,10 +72,48 @@ const Swiper = ({
     onSwipe?.(previous);
   };
 
+  const children: React.ReactNode = React.useMemo(
+    () =>
+      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,
+            });
+          })
+        : childrenProp,
+    [childrenProp, data, renderItem, keyExtractor]
+  );
+
+  /*
+  react-native-web-swiper assigns it's 'children' attribute as follows: `children = (() => React.Children.toArray(this.props.children))();`
+  This is probelematic when state is involved due to anoynmous function effectivley creating new components everytime, losing any state
+  
+  This is a monkey patch that updates the 'children' attribute to just use the children from the props
+  Can be removed when/if https://github.com/reactrondev/react-native-web-swiper/pull/102 is merged
+  */
+  React.useEffect(() => {
+    const childrenArray = React.Children.toArray(
+      swiperRef.current?.props?.children
+    );
+    if (swiperRef.current) {
+      swiperRef.current.children = childrenArray;
+      swiperRef.current.count = childrenArray.length;
+      swiperRef.current.forceUpdate();
+    }
+  }, [children]);
+
   return (
     <View style={style}>
       {/* @ts-ignore */}
       <SwiperComponent
+        ref={swiperRef}
         from={from}
         loop={loop}
         timeout={timeout}
@@ -94,20 +133,7 @@ const Swiper = ({
             : {}),
         }}
       >
-        {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}
+        {children}
       </SwiperComponent>
     </View>
   );