rn-snap-carousel-sg 1.0.0

package/Readme.md

@@ -0,0 +1,15 @@
+# react-native-sg-basic-carousel
+
+An npm package to display basic carousel on react native applications
+
+Example:
+
+Android
+
+<img width="347" alt="Screenshot 2024-10-11 at 12 36 06 AM" src="https://github.com/user-attachments/assets/303b35d4-425f-4910-992c-9df671a98dd1">
+
+.
+
+IOS
+
+<img width="400" alt="Screenshot 2024-10-11 at 12 46 37 AM" src="https://github.com/user-attachments/assets/40d68bb1-2beb-44bb-93ca-a53a17d1caa9">

package/index.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, { useState, useRef, useEffect, JSX } from "react";
+import {
+  View,
+  FlatList,
+  Dimensions,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+  ImageBackground,
+} from "react-native";
+
+interface CarouselProps {
+  data: any[];
+  renderItem?: (item: any) => JSX.Element;
+  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>
+  );
+};
+
+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;
+export type { CarouselProps };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "rn-snap-carousel-sg",
+  "version": "1.0.0",
+  "description": "An easiest way to integrate carousels in your react native.",
+  "keywords": [
+    "npm",
+    "react",
+    "native",
+    "carousel",
+    "react",
+    "native",
+    "carousel",
+    "snap",
+    "carousel",
+    "best",
+    "carousel",
+    "for",
+    "react",
+    "native"
+  ],
+  "homepage": "https://github.com/siddhant124/rn-snap-carousel-sg#readme",
+  "bugs": {
+    "url": "https://github.com/siddhant124/rn-snap-carousel-sg/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/siddhant124/rn-snap-carousel-sg.git"
+  },
+  "license": "Apache-2.0",
+  "author": "Siddhant Goyal",
+  "type": "commonjs",
+  "main": "index.tsx",
+  "scripts": {
+    "test": "npm run test"
+  },
+  "peerDependencies": {
+    "react": "19.2.0",
+    "react-native": "0.83.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.8"
+  }
+}