{"id":15200,"library":"react-native-swiper","title":"React Native Swiper Component","description":"react-native-swiper is a widely used, feature-rich swiper/carousel component designed for React Native applications. As of its latest stable release, v1.6.0, it provides a highly customizable solution for displaying paginated content, supporting both iOS and Android platforms. The library focuses on providing a smooth user experience with features like autoplay, infinite looping, flexible pagination dots, and lazy loading for performance optimization via `loadMinimal`. It supports TypeScript out-of-the-box, shipping with correct type definitions, and has recently moved away from `ViewPagerAndroid` to `ScrollView` for improved compatibility and reduced dependency footprint. The project maintains an active development pace with consistent bug fixes and new features, though no strict release cadence is formally documented. Its key differentiators include extensive prop-based customization for styling and behavior, robust platform support, and a history of addressing common React Native carousel challenges.","status":"active","version":"1.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/leecade/react-native-swiper","tags":["javascript","react-component","react-native","ios"],"install":[{"cmd":"npm install react-native-swiper","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-swiper","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-swiper","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for runtime type checking of component props. Explicitly adopted in v1.5.5 to replace deprecated React.PropTypes.","package":"prop-types","optional":false}],"imports":[{"note":"While CommonJS `require` might work in some React Native setups, `import` is the idiomatic and recommended way, especially for modern ES module environments and TypeScript.","wrong":"const Swiper = require('react-native-swiper')","symbol":"Swiper","correct":"import Swiper from 'react-native-swiper'"},{"note":"When importing only types, use `import type` for better tree-shaking and explicit declaration, especially with TypeScript 3.8+.","wrong":"import { SwiperProps } from 'react-native-swiper'","symbol":"SwiperProps","correct":"import type { SwiperProps } from 'react-native-swiper'"}],"quickstart":{"code":"import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport Swiper from 'react-native-swiper';\n\nconst App = () => {\n  return (\n    <Swiper style={styles.wrapper} showsButtons loop autoplay>\n      <View style={styles.slide1}>\n        <Text style={styles.text}>Hello Swiper</Text>\n      </View>\n      <View style={styles.slide2}>\n        <Text style={styles.text}>Beautiful</Text>\n      </View>\n      <View style={styles.slide3}>\n        <Text style={styles.text}>And simple</Text>\n      </View>\n    </Swiper>\n  );\n};\n\nconst styles = StyleSheet.create({\n  wrapper: {},\n  slide1: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#9DD6EB',\n  },\n  slide2: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#97CAE5',\n  },\n  slide3: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#92BBD9',\n  },\n  text: {\n    color: '#fff',\n    fontSize: 30,\n    fontWeight: 'bold',\n  }\n});\n\nexport default App;","lang":"typescript","description":"This example demonstrates a basic `Swiper` component with three slides, infinite loop, autoplay, and navigation buttons."},"warnings":[{"fix":"Replace `style={...}` with `containerStyle={...}` when targeting the swiper's outer container on Android.","message":"The `style` prop for the Android swiper container was renamed to `containerStyle` in v1.6.0. Directly applying `style` to the `Swiper` component for its container will no longer work on Android.","severity":"breaking","affected_versions":">=1.6.0"},{"fix":"Run `npm install --save react-native-swiper@next` and consider clearing `node_modules` and reinstalling to ensure the old `ViewPagerAndroid` reference is gone.","message":"The internal dependency on `ViewPagerAndroid` was removed in v1.6.0, in favor of using React Native's `ScrollView`. This change may require cleaning old `node_modules` and re-installing dependencies.","severity":"breaking","affected_versions":">=1.6.0"},{"fix":"Upgrade to v1.5.5 or newer. If stuck on an older version, ensure `prop-types` is installed and properly configured, or be aware of console warnings related to deprecated PropTypes usage.","message":"Older versions (prior to v1.5.5) utilized `React.PropTypes`, which has been deprecated in modern React. v1.5.5 updated to use the separate `prop-types` package.","severity":"gotcha","affected_versions":"<1.5.5"},{"fix":"Upgrade to `react-native-swiper` v1.6.0 or newer. If upgrading is not immediately possible, carefully manage parent component re-renders that might affect the Swiper's props or state.","message":"Issues were reported in older versions (fixed in v1.6.0-rc) where the Swiper's internal state could be messed up when a parent component frequently calls `setState`, leading to unexpected behavior or visual glitches.","severity":"gotcha","affected_versions":"<1.6.0"},{"fix":"For optimal module compatibility, especially in modern React Native projects, ensure you are on `react-native-swiper` v1.6.0 or later.","message":"Compatibility for ES6 and CommonJS was improved significantly in `v1.6.0-rc`. Older versions might exhibit less robust behavior in mixed module environments or with specific bundler configurations.","severity":"gotcha","affected_versions":"<1.6.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Upgrade `react-native-swiper` to version 1.5.12 or newer. Ensure your component structure allows for proper ref forwarding if you are wrapping the `Swiper` component.","cause":"This error typically occurred in `react-native-swiper` versions prior to 1.5.12 due to issues with accessing the internal `scrollView` ref or its `scrollTo` method.","error":"Uncaught TypeError: _this.refs.scrollView.scrollTo is not a function"},{"fix":"Upgrade `react-native-swiper` to v1.5.13 or newer, which includes fixes for recalculating dimensions correctly on layout changes and device rotations.","cause":"Incorrect calculation of component width and height after orientation changes, particularly on Android, was a known bug in older versions.","error":"Swiper content not rendering correctly or experiencing layout issues after device rotation on Android."},{"fix":"Upgrade `react-native-swiper` to version 1.5.10 or newer to resolve the `index` prop initialization and update issues on iOS.","cause":"An issue existed in versions prior to 1.5.10 where the `index` prop was not reliably setting or updating the initial slide on iOS.","error":"The `index` prop on iOS does not correctly initialize or update the swiper's current page."}],"ecosystem":"npm"}