{"_id":"@ducnq2398/react-native-snap-carousel-v4","_rev":"2-7def527e31034b4445e6ff532f28a2a3","name":"@ducnq2398/react-native-snap-carousel-v4","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@ducnq2398/react-native-snap-carousel-v4","version":"1.0.0","keywords":["react-native","carousel","swiper","snap","parallax","flatlist","scrollview","typescript"],"author":"","license":"BSD-3-Clause","_id":"@ducnq2398/react-native-snap-carousel-v4@1.0.0","maintainers":[{"name":"ducnq2398","email":"ducnq2398@gmail.com"}],"homepage":"https://github.com/ducnq2398/react-native-snap-carousel-v4#readme","bugs":{"url":"https://github.com/ducnq2398/react-native-snap-carousel-v4/issues"},"dist":{"shasum":"1f3b438615963f74213908f9a3206317063203e9","tarball":"https://registry.npmjs.org/@ducnq2398/react-native-snap-carousel-v4/-/react-native-snap-carousel-v4-1.0.0.tgz","fileCount":48,"integrity":"sha512-8+KZYawY3sGIZ6e1Fbdq3lXPC5qRkzQZPS3K2bAUippqr0x5PD31h5IV7sfO7qJTWyXgdNwfMjnkPb4Fm6/47w==","signatures":[{"sig":"MEUCIQDvuqX3lM2mhY9UbpDTtFNjEnsHIMzaIuEfxJMLSBkQmQIgczYT3QjD08BMiZNDqbsuiA0uNXXSSmpRUCbYpJa1i8U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":274373},"main":"lib/index.js","types":"lib/index.d.ts","gitHead":"5e40eb56f0ba566f845e10fc726e2c10c7e8e475","scripts":{"build":"tsc","prepare":"npm run build","typecheck":"tsc --noEmit"},"_npmUser":{"name":"ducnq2398","email":"ducnq2398@gmail.com"},"repository":{"url":"git+https://github.com/ducnq2398/react-native-snap-carousel-v4.git","type":"git"},"_npmVersion":"10.9.3","description":"Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. TypeScript rewrite compatible with latest React Native.","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","react-native":"^0.73.0","@types/react-native":"^0.72.0"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.71.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-snap-carousel-v4_1.0.0_1775013749331_0.6848589559567979","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ducnq2398/react-native-snap-carousel-v4","version":"1.0.1","description":"Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. TypeScript rewrite compatible with latest React Native.","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc","prepare":"npm run build","typecheck":"tsc --noEmit"},"keywords":["react-native","carousel","swiper","snap","parallax","flatlist","scrollview","typescript"],"author":"","license":"BSD-3-Clause","peerDependencies":{"react":">=18.0.0","react-native":">=0.71.0"},"devDependencies":{"@types/react":"^18.2.0","@types/react-native":"^0.72.0","react":"^18.2.0","react-native":"^0.73.0","typescript":"^5.3.0"},"repository":{"type":"git","url":"git+https://github.com/ducnq2398/react-native-snap-carousel-v4.git"},"homepage":"https://github.com/ducnq2398/react-native-snap-carousel-v4#readme","bugs":{"url":"https://github.com/ducnq2398/react-native-snap-carousel-v4/issues"},"_id":"@ducnq2398/react-native-snap-carousel-v4@1.0.1","gitHead":"f7d0f227494ea06c6a13f48d2debe0fbafcf9a00","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-Ak+QJYqBSXq3a9GDD8DLRTwL9NXQ/a1Pxgv60okjByv2OUpsEjL/llKr3ojzqfncznrc1YQ4oDbryus14cnkIg==","shasum":"69f90dbdb82f214a7363a26adb63044013f08975","tarball":"https://registry.npmjs.org/@ducnq2398/react-native-snap-carousel-v4/-/react-native-snap-carousel-v4-1.0.1.tgz","fileCount":48,"unpackedSize":275805,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDdpVUlYHS60+BcMsKwe1O/2lNQc9W48C0wGZLZn3sYwwIgfs5+0tQ4Q0su1kqrdjPn11hev9RrzhC5O+/uR+kNIt4="}]},"_npmUser":{"name":"ducnq2398","email":"ducnq2398@gmail.com"},"directories":{},"maintainers":[{"name":"ducnq2398","email":"ducnq2398@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-snap-carousel-v4_1.0.1_1775014484598_0.5278727718522609"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-01T03:22:29.272Z","modified":"2026-04-01T03:34:44.859Z","1.0.0":"2026-04-01T03:22:29.473Z","1.0.1":"2026-04-01T03:34:44.744Z"},"bugs":{"url":"https://github.com/ducnq2398/react-native-snap-carousel-v4/issues"},"license":"BSD-3-Clause","homepage":"https://github.com/ducnq2398/react-native-snap-carousel-v4#readme","keywords":["react-native","carousel","swiper","snap","parallax","flatlist","scrollview","typescript"],"repository":{"type":"git","url":"git+https://github.com/ducnq2398/react-native-snap-carousel-v4.git"},"description":"Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. TypeScript rewrite compatible with latest React Native.","maintainers":[{"name":"ducnq2398","email":"ducnq2398@gmail.com"}],"readme":"# react-native-snap-carousel-v4\n\n> TypeScript rewrite of [react-native-snap-carousel](https://github.com/meliorence/react-native-snap-carousel) with full support for modern React Native (0.71+).\n\n[![npm version](https://badge.fury.io/js/react-native-snap-carousel-v4.svg)](https://www.npmjs.com/package/react-native-snap-carousel-v4)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n\nSwiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.\n\n## ✨ What's New in v4\n\n- 🔷 **Native TypeScript** — Written entirely in TypeScript with full type definitions\n- 🚀 **Modern React Native** — Compatible with React Native 0.71+ (including New Architecture)\n- 🧹 **No Deprecated APIs** — Removed `ViewPropTypes`, `PropTypes`, `react-addons-shallow-compare`, `findNodeHandle`\n- 📦 **Drop-in Replacement** — Same API surface as `react-native-snap-carousel` v3.9.1\n- 🎯 **Generic Types** — `Carousel<T>` provides type-safe data and renderItem\n\n## 📦 Installation\n\n```bash\nnpm install @ducnq2398/react-native-snap-carousel-v4\n# or\nyarn add @ducnq2398/react-native-snap-carousel-v4\n```\n\n**No need to install `@types/react-native-snap-carousel`** — types are included!\n\n## 🔄 Migration from react-native-snap-carousel\n\n### 1. Update imports\n\n```diff\n- import Carousel from 'react-native-snap-carousel';\n- import { Pagination, ParallaxImage } from 'react-native-snap-carousel';\n+ import Carousel from '@ducnq2398/react-native-snap-carousel-v4';\n+ import { Pagination, ParallaxImage } from '@ducnq2398/react-native-snap-carousel-v4';\n```\n\n### 2. Remove @types package\n\n```bash\nnpm uninstall @types/react-native-snap-carousel react-native-snap-carousel\n```\n\n### 3. That's it! 🎉\n\nThe API is fully backward-compatible. All existing props, methods, and callbacks work as before.\n\n## 📖 Usage\n\n### Basic Example\n\n```tsx\nimport React, { useRef } from \"react\";\nimport { View, Text, Dimensions } from \"react-native\";\nimport Carousel from \"@ducnq2398/react-native-snap-carousel-v4\";\nimport type { CarouselRenderItemInfo } from \"@ducnq2398/react-native-snap-carousel-v4\";\n\nconst { width: screenWidth } = Dimensions.get(\"window\");\n\ninterface CarouselItem {\n  title: string;\n  text: string;\n}\n\nconst MyCarousel: React.FC = () => {\n  const carouselRef = useRef<Carousel<CarouselItem>>(null);\n\n  const data: CarouselItem[] = [\n    { title: \"Item 1\", text: \"Description 1\" },\n    { title: \"Item 2\", text: \"Description 2\" },\n    { title: \"Item 3\", text: \"Description 3\" },\n  ];\n\n  const renderItem = ({\n    item,\n    index,\n  }: CarouselRenderItemInfo<CarouselItem>) => {\n    return (\n      <View style={{ backgroundColor: \"white\", borderRadius: 8, padding: 20 }}>\n        <Text style={{ fontSize: 20 }}>{item.title}</Text>\n        <Text>{item.text}</Text>\n      </View>\n    );\n  };\n\n  return (\n    <Carousel<CarouselItem>\n      ref={carouselRef}\n      data={data}\n      renderItem={renderItem}\n      sliderWidth={screenWidth}\n      itemWidth={screenWidth * 0.75}\n      layout={\"default\"}\n    />\n  );\n};\n```\n\n### With Pagination\n\n```tsx\nimport Carousel, { Pagination } from \"@ducnq2398/react-native-snap-carousel-v4\";\n\nconst MyCarouselWithPagination: React.FC = () => {\n  const [activeSlide, setActiveSlide] = React.useState(0);\n\n  return (\n    <View>\n      <Carousel\n        data={data}\n        renderItem={renderItem}\n        sliderWidth={screenWidth}\n        itemWidth={screenWidth * 0.75}\n        onSnapToItem={(index) => setActiveSlide(index)}\n      />\n      <Pagination\n        dotsLength={data.length}\n        activeDotIndex={activeSlide}\n        dotStyle={{\n          width: 10,\n          height: 10,\n          borderRadius: 5,\n          backgroundColor: \"rgba(0, 0, 0, 0.92)\",\n        }}\n        inactiveDotOpacity={0.4}\n        inactiveDotScale={0.6}\n      />\n    </View>\n  );\n};\n```\n\n### With Parallax Images\n\n```tsx\nimport Carousel, {\n  ParallaxImage,\n} from \"@ducnq2398/react-native-snap-carousel-v4\";\n\nconst renderItem = (\n  { item }: CarouselRenderItemInfo<MyItem>,\n  parallaxProps?: ParallaxProps,\n) => {\n  return (\n    <View style={{ width: itemWidth, height: 200 }}>\n      <ParallaxImage\n        source={{ uri: item.imageUrl }}\n        containerStyle={{ flex: 1, borderRadius: 8 }}\n        parallaxFactor={0.4}\n        {...parallaxProps}\n      />\n    </View>\n  );\n};\n\n<Carousel\n  data={data}\n  renderItem={renderItem}\n  hasParallaxImages={true}\n  sliderWidth={screenWidth}\n  itemWidth={screenWidth * 0.75}\n/>;\n```\n\n### Layouts\n\n```tsx\n// Default layout\n<Carousel layout={'default'} />\n\n// Stack layout\n<Carousel layout={'stack'} layoutCardOffset={18} />\n\n// Tinder layout\n<Carousel layout={'tinder'} layoutCardOffset={9} />\n```\n\n## 📋 Props\n\n### Required Props\n\n| Prop           | Type                    | Description                          |\n| -------------- | ----------------------- | ------------------------------------ |\n| `data`         | `T[]`                   | Array of items to loop on            |\n| `renderItem`   | `CarouselRenderItem<T>` | Function to render each item         |\n| `itemWidth`    | `number`                | Width of carousel items (horizontal) |\n| `sliderWidth`  | `number`                | Width of the carousel (horizontal)   |\n| `itemHeight`   | `number`                | Height of carousel items (vertical)  |\n| `sliderHeight` | `number`                | Height of the carousel (vertical)    |\n\n### Behavior\n\n| Prop                      | Type      | Default |\n| ------------------------- | --------- | ------- |\n| `activeSlideOffset`       | `number`  | `20`    |\n| `enableMomentum`          | `boolean` | `false` |\n| `enableSnap`              | `boolean` | `true`  |\n| `firstItem`               | `number`  | `0`     |\n| `lockScrollWhileSnapping` | `boolean` | `false` |\n| `loop`                    | `boolean` | `false` |\n| `loopClonesPerSide`       | `number`  | `3`     |\n| `vertical`                | `boolean` | `false` |\n\n### Autoplay\n\n| Prop               | Type      | Default |\n| ------------------ | --------- | ------- |\n| `autoplay`         | `boolean` | `false` |\n| `autoplayDelay`    | `number`  | `1000`  |\n| `autoplayInterval` | `number`  | `3000`  |\n\n### Style & Animation\n\n| Prop                          | Type                               | Default     |\n| ----------------------------- | ---------------------------------- | ----------- |\n| `layout`                      | `'default' \\| 'stack' \\| 'tinder'` | `'default'` |\n| `layoutCardOffset`            | `number`                           | `18` / `9`  |\n| `inactiveSlideOpacity`        | `number`                           | `0.7`       |\n| `inactiveSlideScale`          | `number`                           | `0.9`       |\n| `activeSlideAlignment`        | `'start' \\| 'center' \\| 'end'`     | `'center'`  |\n| `containerCustomStyle`        | `StyleProp<ViewStyle>`             | `{}`        |\n| `contentContainerCustomStyle` | `StyleProp<ViewStyle>`             | `{}`        |\n\n### Callbacks\n\n| Prop                 | Type                                                       |\n| -------------------- | ---------------------------------------------------------- |\n| `onSnapToItem`       | `(slideIndex: number) => void`                             |\n| `onBeforeSnapToItem` | `(slideIndex: number) => void`                             |\n| `onScroll`           | `(event: NativeSyntheticEvent<NativeScrollEvent>) => void` |\n\n## 🔧 Methods\n\n| Method                                        | Description                   |\n| --------------------------------------------- | ----------------------------- |\n| `snapToItem(index, animated?, fireCallback?)` | Snap to item                  |\n| `snapToNext(animated?, fireCallback?)`        | Snap to next                  |\n| `snapToPrev(animated?, fireCallback?)`        | Snap to previous              |\n| `startAutoplay()`                             | Start autoplay                |\n| `stopAutoplay()`                              | Stop autoplay                 |\n| `currentIndex`                                | Get current active item index |\n| `currentScrollPosition`                       | Get current scroll position   |\n\n## 📝 Types\n\nAll types are exported and available for use:\n\n```typescript\nimport type {\n  CarouselProps,\n  CarouselRef,\n  CarouselRenderItem,\n  CarouselRenderItemInfo,\n  PaginationProps,\n  ParallaxImageProps,\n  CarouselLayout,\n  ActiveSlideAlignment,\n  ScrollInterpolatorFunction,\n  SlideInterpolatedStyleFunction,\n} from \"react-native-snap-carousel-v4\";\n```\n\n## 🙏 Credits\n\nBased on the original [react-native-snap-carousel](https://github.com/meliorence/react-native-snap-carousel) by [Benoît Delmaire](https://github.com/bd-arc) and [Maxime Bertonnier](https://github.com/Exilz) at [Meliorence](https://www.meliorence.com/).\n\n## 📄 License\n\nBSD-3-Clause — Same as the original package.\n","readmeFilename":"README.md"}