react-native-sg-basic-carousel 1.0.6 → 1.0.7

package/index.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react-native/no-inline-styles */
+import { useState, useRef, useEffect, JSX } from "react";
+import {
+  View,
+  FlatList,
+  Dimensions,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+  ImageBackground,
+} from "react-native";
+
+interface CarouselProps {
+  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;
+  containerStyle?: StyleProp<ViewStyle>;
+  paginationContainerStyle?: StyleProp<ViewStyle>;
+  paginationDotStyle?: StyleProp<ViewStyle>;
+}
+
+const { width: screenWidth } = Dimensions.get("window");
+
+const BasicCarousel = ({
+  data,
+  renderItem,
+  autoScroll = true,
+  scrollInterval = 3000,
+  showPagination = true,
+  containerStyle,
+  paginationContainerStyle,
+  paginationDotStyle,
+}: CarouselProps) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  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 });
+        } else {
+          setActiveIndex(activeIndex + 1);
+          flatListRef.current?.scrollToIndex({
+            index: activeIndex + 1,
+            animated: true,
+          });
+        }
+      }, scrollInterval);
+
+      return () => clearInterval(timerId);
+    }
+  }, [activeIndex, autoScroll, scrollInterval, data.length]);
+
+  const onViewableItemsChanged = useRef(
+    ({ viewableItems }: { viewableItems: any }) => {
+      if (viewableItems.length > 0) {
+        setActiveIndex(viewableItems[0].index);
+      }
+    },
+  ).current;
+
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={containerStyle}>
+      <FlatList
+        ref={flatListRef}
+        data={data}
+        renderItem={({ item }) =>
+          renderItem ? renderItem(item) : <DefaultCarouselCard item={item} />
+        }
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onViewableItemsChanged={onViewableItemsChanged}
+        scrollEventThrottle={16}
+        viewabilityConfig={{ viewAreaCoveragePercentThreshold: 50 }}
+        keyExtractor={(_, index) => index.toString()}
+      />
+
+      {showPagination && (
+        <View style={[styles.paginationContainer, paginationContainerStyle]}>
+          {data.map((_, index) => (
+            <View
+              key={index}
+              style={[
+                styles.paginationDot,
+                paginationDotStyle,
+                {
+                  width: index === activeIndex ? 20 : 8,
+                  opacity: index === activeIndex ? 1 : 0.5,
+                },
+              ]}
+            />
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+// Default Carousel Card: Used if no custom renderer is provided
+const DefaultCarouselCard = ({ item }: { item: any }) => {
+  const imageUri =
+    typeof item === "object" && item?.image
+      ? item.image
+      : "https://www.sciencealert.com/images/2026/01/ai_psychosis_header-3.jpg";
+
+  return (
+    <View style={styles.defaultCard}>
+      <ImageBackground
+        source={{ uri: imageUri }}
+        style={styles.imageBackground}
+        resizeMode="cover"
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  paginationContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 15,
+  },
+  paginationDot: {
+    height: 8,
+    backgroundColor: "#2196F3",
+    marginHorizontal: 4,
+    borderRadius: 4,
+  },
+  defaultCard: {
+    width: screenWidth * 0.9,
+    height: 200,
+    marginHorizontal: screenWidth * 0.05,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 12,
+    padding: 1,
+    borderWidth: 0.5,
+    overflow: "hidden",
+  },
+  imageBackground: {
+    width: "100%",
+    borderRadius: 12,
+    overflow: "hidden",
+    height: "100%",
+  },
+});
+
+export default BasicCarousel;

package/package.json

@@ -1,19 +1,32 @@
 {
   "name": "react-native-sg-basic-carousel",
-  "version": "1.0.6",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
+  "version": "1.0.7",
+  "description": "An npm package to display basic carousel on react native applications",
+  "main": "index.tsx",
+  "scripts": {
+    "test": "npm run test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/siddhant124/react-native-sg-basic-carousel.git"
+  },
+  "keywords": [
+    "npm",
+    "carousel",
+    "mobile",
+    "react",
+    "native"
   ],
-  "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-native": ">=0.68.0"
+  "author": "Siddhant Goyal",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/siddhant124/react-native-sg-basic-carousel/issues"
   },
-  "devDependencies": {
-    "react": "19.2.0",
-    "react-native": "0.83.0",
-    "@types/react": "^19.2.0",
-    "typescript": "^5.0.0"
+  "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"
   }
 }

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "jsx": "react-native",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node"
+  },
+  "include": ["index.tsx"]
+}