rn-snap-carousel-sg 1.0.0 → 1.0.1

package/Readme.md

@@ -1,15 +1,317 @@
-# react-native-sg-basic-carousel
+# rn-snap-carousel-sg
 
-An npm package to display basic carousel on react native applications
+An easy-to-use, customizable carousel component for React Native with auto-scroll, pagination, and custom rendering support.
 
-Example:
+[![npm version](https://img.shields.io/npm/v/rn-snap-carousel-sg.svg)](https://www.npmjs.com/package/rn-snap-carousel-sg)
+[![license](https://img.shields.io/npm/l/rn-snap-carousel-sg.svg)](https://github.com/siddhant124/rn-snap-carousel-sg/blob/main/LICENSE)
 
-Android
+## Features
 
-<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">
+- ✨ Simple and intuitive API
+- 🔄 Auto-scroll with customizable intervals
+- 📍 Built-in pagination dots
+- 🎨 Fully customizable styling
+- 🖼️ Default image carousel or custom render items
+- 📱 Responsive design
+- ⚡ TypeScript support
+- 🪶 Lightweight with zero dependencies
 
-.
+## Installation
 
-IOS
+```bash
+npm install rn-snap-carousel-sg
+```
 
-<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">
+or with yarn:
+
+```bash
+yarn add rn-snap-carousel-sg
+```
+
+## Compatibility
+
+| Package Version | React Native | React     |
+| --------------- | ------------ | --------- |
+| 1.0.0+          | >= 0.60.0    | >= 16.8.0 |
+
+**Recommended:**
+
+- React Native: 0.83.1
+- React: 19.2.0
+
+## Basic Usage
+
+### Simple Image Carousel
+
+```typescript
+import React from 'react';
+import { View } from 'react-native';
+import BasicCarousel from 'rn-snap-carousel-sg';
+
+const App = () => {
+  const carouselData = [
+    { image: 'https://example.com/image1.jpg' },
+    { image: 'https://example.com/image2.jpg' },
+    { image: 'https://example.com/image3.jpg' },
+  ];
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center' }}>
+      <BasicCarousel data={carouselData} />
+    </View>
+  );
+};
+
+export default App;
+```
+
+### Custom Render Item
+
+```typescript
+import React from 'react';
+import { View, Text, Image, StyleSheet } from 'react-native';
+import BasicCarousel from 'rn-snap-carousel-sg';
+
+const App = () => {
+  const products = [
+    { id: 1, title: 'Product 1', image: 'https://example.com/product1.jpg' },
+    { id: 2, title: 'Product 2', image: 'https://example.com/product2.jpg' },
+    { id: 3, title: 'Product 3', image: 'https://example.com/product3.jpg' },
+  ];
+
+  const renderProduct = (item) => (
+    <View style={styles.card}>
+      <Image source={{ uri: item.image }} style={styles.image} />
+      <Text style={styles.title}>{item.title}</Text>
+    </View>
+  );
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center' }}>
+      <BasicCarousel
+        data={products}
+        renderItem={renderProduct}
+        autoScroll={true}
+        scrollInterval={4000}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    width: 350,
+    height: 200,
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#fff',
+    marginHorizontal: 20,
+  },
+  image: {
+    width: '100%',
+    height: 150,
+  },
+  title: {
+    padding: 10,
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default App;
+```
+
+## Advanced Usage
+
+### Fully Customized Carousel
+
+```typescript
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import BasicCarousel from 'rn-snap-carousel-sg';
+
+const App = () => {
+  const data = [
+    { id: 1, content: 'Slide 1' },
+    { id: 2, content: 'Slide 2' },
+    { id: 3, content: 'Slide 3' },
+  ];
+
+  return (
+    <View style={styles.container}>
+      <BasicCarousel
+        data={data}
+        renderItem={(item) => (
+          <View style={styles.customCard}>
+            <Text style={styles.customText}>{item.content}</Text>
+          </View>
+        )}
+        autoScroll={true}
+        scrollInterval={5000}
+        showPagination={true}
+        containerStyle={styles.carouselContainer}
+        paginationContainerStyle={styles.pagination}
+        paginationDotStyle={styles.dot}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  carouselContainer: {
+    marginVertical: 20,
+  },
+  customCard: {
+    width: 300,
+    height: 200,
+    backgroundColor: '#4CAF50',
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 35,
+  },
+  customText: {
+    fontSize: 24,
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  pagination: {
+    marginTop: 20,
+  },
+  dot: {
+    backgroundColor: '#4CAF50',
+    height: 10,
+  },
+});
+
+export default App;
+```
+
+## API Reference
+
+### Props
+
+| Prop                       | Type                         | Default      | Description                                   |
+| -------------------------- | ---------------------------- | ------------ | --------------------------------------------- |
+| `data`                     | `any[]`                      | **Required** | Array of items to display in the carousel     |
+| `renderItem`               | `(item: any) => JSX.Element` | `undefined`  | Custom render function for each carousel item |
+| `autoScroll`               | `boolean`                    | `true`       | Enable/disable automatic scrolling            |
+| `scrollInterval`           | `number`                     | `3000`       | Time in milliseconds between auto-scrolls     |
+| `showPagination`           | `boolean`                    | `true`       | Show/hide pagination dots                     |
+| `containerStyle`           | `StyleProp<ViewStyle>`       | `undefined`  | Custom style for the carousel container       |
+| `paginationContainerStyle` | `StyleProp<ViewStyle>`       | `undefined`  | Custom style for the pagination container     |
+| `paginationDotStyle`       | `StyleProp<ViewStyle>`       | `undefined`  | Custom style for pagination dots              |
+
+### Types
+
+```typescript
+interface CarouselProps {
+  data: any[];
+  renderItem?: (item: any) => JSX.Element;
+  autoScroll?: boolean;
+  scrollInterval?: number;
+  showPagination?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+  paginationContainerStyle?: StyleProp<ViewStyle>;
+  paginationDotStyle?: StyleProp<ViewStyle>;
+}
+```
+
+## Examples
+
+### Disable Auto-Scroll
+
+```typescript
+<BasicCarousel
+  data={carouselData}
+  autoScroll={false}
+/>
+```
+
+### Custom Scroll Interval
+
+```typescript
+<BasicCarousel
+  data={carouselData}
+  scrollInterval={5000} // 5 seconds
+/>
+```
+
+### Hide Pagination
+
+```typescript
+<BasicCarousel
+  data={carouselData}
+  showPagination={false}
+/>
+```
+
+### Custom Pagination Style
+
+```typescript
+<BasicCarousel
+  data={carouselData}
+  paginationDotStyle={{
+    backgroundColor: '#FF5722',
+    height: 12,
+  }}
+  paginationContainerStyle={{
+    marginTop: 25,
+  }}
+/>
+```
+
+## Default Behavior
+
+When no `renderItem` is provided, the carousel will:
+
+- Look for an `image` property in each data item
+- Display the image in a rounded card
+- Use a fallback image if no image is found
+
+## TypeScript Support
+
+The package is written in TypeScript and includes type definitions. Import types as needed:
+
+```typescript
+import BasicCarousel, { CarouselProps } from "rn-snap-carousel-sg";
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## Issues
+
+Found a bug or have a feature request? Please open an issue on [GitHub](https://github.com/siddhant124/rn-snap-carousel-sg/issues).
+
+## License
+
+Apache-2.0 © [Siddhant Goyal](https://github.com/siddhant124)
+
+## Author
+
+**Siddhant Goyal**
+
+- GitHub: [@siddhant124](https://github.com/siddhant124)
+
+## Changelog
+
+### 1.0.0
+
+- Initial release
+- Auto-scroll functionality
+- Pagination support
+- Custom render support
+- TypeScript support

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-snap-carousel-sg",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "An easiest way to integrate carousels in your react native.",
   "keywords": [
     "npm",
@@ -34,10 +34,10 @@
     "test": "npm run test"
   },
   "peerDependencies": {
-    "react": "19.2.0",
-    "react-native": "0.83.1"
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.8"
+    "@types/react": "*"
   }
 }