feat: change Text with ReactNode

example/src/App.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { Text, View, StyleSheet } from 'react-native';
 import { SwipeableDeck } from '@frknltrk/react-native-swipeable-cards';
 
-const data = ['Card 1', 'Card 2', 'Card 3', 'Card 4', 'Card 5'];
+const data = [
+  <Text key="1">Card 1 Content</Text>,
+  <Text key="2">Card 2</Text>,
+  <View key="3">
+    <Text>Custom View</Text>
+    <Text>More Custom Content</Text>
+  </View>,
+  // Add more custom content as needed
+];
 
 const App: React.FC = () => {
   return (
     <View style={styles.container}>
-      <SwipeableDeck data={data} />
+      <SwipeableDeck card_contents={data} />
     </View>
   );
 };

src/Card.tsx

@@ -1,24 +1,18 @@
 import React from 'react';
-import {
-  Text,
-  Animated,
-  PanResponder,
-  Dimensions,
-  StyleSheet,
-} from 'react-native';
+import { Animated, PanResponder, Dimensions, StyleSheet } from 'react-native';
 
 const SCREEN_WIDTH = Dimensions.get('window').width;
 const SWIPE_THRESHOLD = 0.25 * SCREEN_WIDTH;
 const SWIPE_OUT_DURATION = 250;
 
 interface CardProps {
-  text: string;
+  children: React.ReactNode;
   onSwipeLeft: () => void;
   onSwipeRight: () => void;
 }
 
-const SwipeableCard: React.FC<CardProps> = ({
-  text,
+const CardView: React.FC<CardProps> = ({
+  children,
   onSwipeLeft,
   onSwipeRight,
 }) => {
@@ -79,7 +73,7 @@ const SwipeableCard: React.FC<CardProps> = ({
       style={[styles.cardStyle, getCardStyle()]}
       {...panResponder.panHandlers}
     >
-      <Text>{text}</Text>
+      {children}
     </Animated.View>
   );
 };
@@ -95,4 +89,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default SwipeableCard;
+export default CardView;

src/Deck.tsx

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 import { View, StyleSheet } from 'react-native';
-import Card from './Card';
+import CardView from './Card';
 
 interface DeckProps {
-  data: string[];
+  card_contents: React.ReactNode[]; // Allow any ReactNode as content
 }
 
-const SwipeableDeck: React.FC<DeckProps> = ({ data }) => {
+const SwipeableDeck: React.FC<DeckProps> = ({ card_contents }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const onSwipeLeft = () => {
-    if (currentIndex < data.length - 1) {
+    if (currentIndex < card_contents.length - 1) {
       setCurrentIndex((prevIndex: number) => prevIndex + 1);
       console.log('Deck.onSwipeLeft works');
     } else {
@@ -33,12 +33,13 @@ const SwipeableDeck: React.FC<DeckProps> = ({ data }) => {
   // avoid using Non-null assertion operator (!): line 36. find another way to overcome TS2322
   return (
     <View style={styles.deckContainer}>
-      <Card
+      <CardView
         key={currentIndex}
-        text={data[currentIndex]!}
         onSwipeLeft={onSwipeLeft}
         onSwipeRight={onSwipeRight}
-      />
+      >
+        {card_contents[currentIndex]}
+      </CardView>
     </View>
   );
 };