react-native-sg-basic-carousel 1.0.1 → 1.0.4

package/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-native/no-inline-styles */
-import React, {useState, useRef, useEffect} from 'react';
+import { useState, useRef, useEffect, JSX } from "react";
 import {
   View,
   FlatList,
@@ -7,18 +7,11 @@ import {
   StyleSheet,
   ViewStyle,
   StyleProp,
-  ImageBackground,
-} from 'react-native';
-
-// CarouselItem must have at least an image, but other fields can be dynamic
-interface CarouselItem {
-  image: string; // The image field is required
-  [key: string]: any; // Other properties are flexible
-}
+} from "react-native";
 
 interface CarouselProps {
-  data: CarouselItem[]; // Array of items with flexible structure but image is mandatory
-  renderItem?: (item: CarouselItem) => JSX.Element; // Custom renderer
+  data: any[]; // Array of items with flexible structure but image is mandatory
+  renderItem?: (item: any) => JSX.Element; // Custom renderer
   autoScroll?: boolean;
   scrollInterval?: number;
   showPagination?: boolean;
@@ -27,7 +20,7 @@ interface CarouselProps {
   paginationDotStyle?: StyleProp<ViewStyle>;
 }
 
-const {width: screenWidth} = Dimensions.get('window'); 
+const { width: screenWidth } = Dimensions.get("window");
 
 const BasicCarousel = ({
   data,
@@ -40,14 +33,14 @@ const BasicCarousel = ({
   paginationDotStyle,
 }: CarouselProps) => {
   const [activeIndex, setActiveIndex] = useState(0);
-  const flatListRef = useRef<FlatList<CarouselItem>>(null);
+  const flatListRef = useRef<FlatList<any>>(null);
 
   useEffect(() => {
     if (autoScroll) {
       const timerId = setInterval(() => {
         if (activeIndex === data.length - 1) {
           setActiveIndex(0);
-          flatListRef.current?.scrollToIndex({index: 0, animated: true});
+          flatListRef.current?.scrollToIndex({ index: 0, animated: true });
         } else {
           setActiveIndex(activeIndex + 1);
           flatListRef.current?.scrollToIndex({
@@ -62,7 +55,7 @@ const BasicCarousel = ({
   }, [activeIndex, autoScroll, scrollInterval, data.length]);
 
   const onViewableItemsChanged = useRef(
-    ({viewableItems}: {viewableItems: any}) => {
+    ({ viewableItems }: { viewableItems: any }) => {
       if (viewableItems.length > 0) {
         setActiveIndex(viewableItems[0].index);
       }
@@ -74,7 +67,7 @@ const BasicCarousel = ({
       <FlatList
         ref={flatListRef}
         data={data}
-        renderItem={({item}) =>
+        renderItem={({ item }) =>
           renderItem ? renderItem(item) : <DefaultCarouselCard item={item} />
         }
         horizontal
@@ -82,7 +75,7 @@ const BasicCarousel = ({
         showsHorizontalScrollIndicator={false}
         onViewableItemsChanged={onViewableItemsChanged}
         scrollEventThrottle={16}
-        viewabilityConfig={{viewAreaCoveragePercentThreshold: 50}}
+        viewabilityConfig={{ viewAreaCoveragePercentThreshold: 50 }}
         keyExtractor={(_, index) => index.toString()}
       />
 
@@ -108,28 +101,24 @@ const BasicCarousel = ({
 };
 
 // Default Carousel Card: Used if no custom renderer is provided
-const DefaultCarouselCard = ({item}: {item: CarouselItem}) => {
+const DefaultCarouselCard = ({ item }: { item: any }) => {
   return (
     <View style={styles.defaultCard}>
-      {/* Default card layout with the mandatory image field */}
-      <ImageBackground
-        source={{uri: item.image}}
-        style={styles.imageBackground}
-      />
+      <View style={styles.imageBackground} />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   paginationContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
     marginTop: 15,
   },
   paginationDot: {
     height: 8,
-    backgroundColor: '#2196F3',
+    backgroundColor: "#2196F3",
     marginHorizontal: 4,
     borderRadius: 4,
   },
@@ -137,18 +126,19 @@ const styles = StyleSheet.create({
     width: screenWidth * 0.9,
     height: 200,
     marginHorizontal: screenWidth * 0.05,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     borderRadius: 12,
     padding: 1,
     borderWidth: 0.5,
-    overflow: 'hidden',
+    overflow: "hidden",
   },
   imageBackground: {
-    width: '100%',
+    width: "100%",
     borderRadius: 12,
-    overflow: 'hidden',
-    height: '100%',
+    overflow: "hidden",
+    height: "100%",
+    backgroundColor: "red",
   },
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-sg-basic-carousel",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "An npm package to display basic carousel on react native applications",
   "main": "index.tsx",
   "scripts": {
@@ -24,9 +24,8 @@
   },
   "homepage": "https://github.com/siddhant124/react-native-sg-basic-carousel#readme",
   "dependencies": {
-    "@types/react": "^18.3.11",
-    "@types/react-native": "^0.72.8",
-    "react": "^18.3.1",
-    "react-native": "^0.75.4"
+    "@types/react": "^19.2.0",
+    "react": "19.2.0",
+    "react-native": "0.83.0"
   }
 }