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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +12 -24
  2. package/index.tsx +0 -145
package/package.json CHANGED
@@ -1,31 +1,19 @@
1
1
  {
2
2
  "name": "react-native-sg-basic-carousel",
3
- "version": "1.0.4",
4
- "description": "An npm package to display basic carousel on react native applications",
5
- "main": "index.tsx",
6
- "scripts": {
7
- "test": "npm run test"
8
- },
9
- "repository": {
10
- "type": "git",
11
- "url": "git+https://github.com/siddhant124/react-native-sg-basic-carousel.git"
12
- },
13
- "keywords": [
14
- "npm",
15
- "carousel",
16
- "mobile",
17
- "react",
18
- "native"
3
+ "version": "1.0.6",
4
+ "main": "dist/index.js",
5
+ "types": "dist/index.d.ts",
6
+ "files": [
7
+ "dist"
19
8
  ],
20
- "author": "Siddhant Goyal",
21
- "license": "Apache-2.0",
22
- "bugs": {
23
- "url": "https://github.com/siddhant124/react-native-sg-basic-carousel/issues"
9
+ "peerDependencies": {
10
+ "react": ">=17.0.0",
11
+ "react-native": ">=0.68.0"
24
12
  },
25
- "homepage": "https://github.com/siddhant124/react-native-sg-basic-carousel#readme",
26
- "dependencies": {
27
- "@types/react": "^19.2.0",
13
+ "devDependencies": {
28
14
  "react": "19.2.0",
29
- "react-native": "0.83.0"
15
+ "react-native": "0.83.0",
16
+ "@types/react": "^19.2.0",
17
+ "typescript": "^5.0.0"
30
18
  }
31
19
  }
package/index.tsx DELETED
@@ -1,145 +0,0 @@
1
- /* eslint-disable react-native/no-inline-styles */
2
- import { useState, useRef, useEffect, JSX } from "react";
3
- import {
4
- View,
5
- FlatList,
6
- Dimensions,
7
- StyleSheet,
8
- ViewStyle,
9
- StyleProp,
10
- } from "react-native";
11
-
12
- interface CarouselProps {
13
- data: any[]; // Array of items with flexible structure but image is mandatory
14
- renderItem?: (item: any) => JSX.Element; // Custom renderer
15
- autoScroll?: boolean;
16
- scrollInterval?: number;
17
- showPagination?: boolean;
18
- containerStyle?: StyleProp<ViewStyle>;
19
- paginationContainerStyle?: StyleProp<ViewStyle>;
20
- paginationDotStyle?: StyleProp<ViewStyle>;
21
- }
22
-
23
- const { width: screenWidth } = Dimensions.get("window");
24
-
25
- const BasicCarousel = ({
26
- data,
27
- renderItem,
28
- autoScroll = true,
29
- scrollInterval = 3000,
30
- showPagination = true,
31
- containerStyle,
32
- paginationContainerStyle,
33
- paginationDotStyle,
34
- }: CarouselProps) => {
35
- const [activeIndex, setActiveIndex] = useState(0);
36
- const flatListRef = useRef<FlatList<any>>(null);
37
-
38
- useEffect(() => {
39
- if (autoScroll) {
40
- const timerId = setInterval(() => {
41
- if (activeIndex === data.length - 1) {
42
- setActiveIndex(0);
43
- flatListRef.current?.scrollToIndex({ index: 0, animated: true });
44
- } else {
45
- setActiveIndex(activeIndex + 1);
46
- flatListRef.current?.scrollToIndex({
47
- index: activeIndex + 1,
48
- animated: true,
49
- });
50
- }
51
- }, scrollInterval);
52
-
53
- return () => clearInterval(timerId);
54
- }
55
- }, [activeIndex, autoScroll, scrollInterval, data.length]);
56
-
57
- const onViewableItemsChanged = useRef(
58
- ({ viewableItems }: { viewableItems: any }) => {
59
- if (viewableItems.length > 0) {
60
- setActiveIndex(viewableItems[0].index);
61
- }
62
- },
63
- ).current;
64
-
65
- return (
66
- <View style={containerStyle}>
67
- <FlatList
68
- ref={flatListRef}
69
- data={data}
70
- renderItem={({ item }) =>
71
- renderItem ? renderItem(item) : <DefaultCarouselCard item={item} />
72
- }
73
- horizontal
74
- pagingEnabled
75
- showsHorizontalScrollIndicator={false}
76
- onViewableItemsChanged={onViewableItemsChanged}
77
- scrollEventThrottle={16}
78
- viewabilityConfig={{ viewAreaCoveragePercentThreshold: 50 }}
79
- keyExtractor={(_, index) => index.toString()}
80
- />
81
-
82
- {showPagination && (
83
- <View style={[styles.paginationContainer, paginationContainerStyle]}>
84
- {data.map((_, index) => (
85
- <View
86
- key={index}
87
- style={[
88
- styles.paginationDot,
89
- paginationDotStyle,
90
- {
91
- width: index === activeIndex ? 20 : 8,
92
- opacity: index === activeIndex ? 1 : 0.5,
93
- },
94
- ]}
95
- />
96
- ))}
97
- </View>
98
- )}
99
- </View>
100
- );
101
- };
102
-
103
- // Default Carousel Card: Used if no custom renderer is provided
104
- const DefaultCarouselCard = ({ item }: { item: any }) => {
105
- return (
106
- <View style={styles.defaultCard}>
107
- <View style={styles.imageBackground} />
108
- </View>
109
- );
110
- };
111
-
112
- const styles = StyleSheet.create({
113
- paginationContainer: {
114
- flexDirection: "row",
115
- justifyContent: "center",
116
- alignItems: "center",
117
- marginTop: 15,
118
- },
119
- paginationDot: {
120
- height: 8,
121
- backgroundColor: "#2196F3",
122
- marginHorizontal: 4,
123
- borderRadius: 4,
124
- },
125
- defaultCard: {
126
- width: screenWidth * 0.9,
127
- height: 200,
128
- marginHorizontal: screenWidth * 0.05,
129
- justifyContent: "center",
130
- alignItems: "center",
131
- borderRadius: 12,
132
- padding: 1,
133
- borderWidth: 0.5,
134
- overflow: "hidden",
135
- },
136
- imageBackground: {
137
- width: "100%",
138
- borderRadius: 12,
139
- overflow: "hidden",
140
- height: "100%",
141
- backgroundColor: "red",
142
- },
143
- });
144
-
145
- export default BasicCarousel;