react-native-swiper
The best Swiper component for React Native.
A React Native component that adds swipeable slide-show screens to mobile apps with one npm install, covering onboarding flows, image galleries, and auto-playing carousels with dot indicators.
react-native-swiper is a JavaScript component for building mobile apps with React Native. Its job is simple: it gives you a swipeable slide-show screen, the kind where you swipe left or right to move between pages or images. Think of an onboarding screen that walks new users through three steps, or a product image gallery in a shopping app. That is the problem this component solves.
You install it with a single command through npm, then wrap your content in a Swiper tag. Each child inside that tag becomes one slide. Out of the box, you get small dots at the bottom of the screen that show which slide you are on, and you can optionally turn on previous and next buttons so users can tap to advance instead of swiping. There is also an autoplay setting that rotates through the slides automatically on a timer.
The component offers quite a few customization options. You can change the color of the active dot versus the inactive dots, disable the looping so slides stop at the last one instead of wrapping back around, control whether the scrolling is horizontal or vertical, and load slides lazily if you have many pages and want to avoid loading them all at once. Callbacks are available so you can run your own code when a slide changes or when the user finishes scrolling.
The README includes working code examples and animated previews showing different configurations: a basic slider, a numbered pagination style, and a minimal-load mode for performance. Example projects for Xcode are included so you can run a live demo on an iOS device or simulator before adding the component to your own app.
The library has been around long enough to accumulate a detailed changelog across many versions, covering bug fixes for iOS jitter, Android compatibility, and TypeScript type definitions for developers using typed JavaScript.
Where it fits
- Add a three-step onboarding screen to your React Native app where users swipe through pages before reaching the main screen.
- Build a product image gallery in a shopping app where users swipe left and right through photos with dot indicators showing their position.
- Create an auto-playing promotional carousel that rotates through slides on a timer without any user interaction.
- Implement vertical paging in a mobile app where content loads lazily as the user swipes through many pages for better performance.