Guide · Open source

How to use react-native-swiper: setup, props and examples

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

react-native-swiper is an MIT-licensed JavaScript component for React Native that lets users swipe horizontally or vertically through a set of pages, such as image carousels or onboarding screens. This guide shows you how to add it to a React Native project, render a basic set of slides, and use the documented props for looping, buttons, autoplay and pagination. You need Node.js and an existing React Native project to follow along.

react-native-swiperleecade/react-native-swiper · ★ 10.5k · MIT Install options & downloads

Quick start

1Install the package. Run npm i react-native-swiper --save in your React Native project folder.
2Import Swiper. Add import Swiper from 'react-native-swiper' to the file where you want the carousel.
3Wrap your pages. Place one View per page as children of a Swiper element.
4Style the slides. Give each slide a flex: 1 layout and background so it fills the screen.
5Set display options. Use showsButtons, loop, index and horizontal to match your design.
6Enable autoplay and dots. Set autoplay to true and adjust dotColor, activeDotColor, dotStyle or activeDotStyle as needed.
7Run and test. Start your React Native app and swipe through the pages on the device or simulator you use.

Install react-native-swiper in your project

react-native-swiper is a developer tool, so you add it to a React Native project rather than running it on its own. The README installs it with npm from your project folder.

Make sure Node.js is installed.
Have a React Native project ready. The README shows creating one with react-native-cli, which it references for setup.
Check the version you need: the README lists separate install lines for the stable release and the 1.6.0 release candidate.

npm i react-native-swiper --save

Create a basic swipeable carousel

Import Swiper and wrap your views in a Swiper element. Each direct child becomes one page. The README example sets showsButtons to true so previous and next buttons are visible.

Give the Swiper a style so it can size itself. If you don't pass width or height, it fills the screen using flex: 1, according to the README.

Import the component with import Swiper from 'react-native-swiper'.
Wrap your slides in <Swiper> and add one View per page.
Style each slide, for example with flex: 1 and centered content, so it fills the page.

import Swiper from 'react-native-swiper'

<Swiper style={styles.wrapper} showsButtons={true}>
  <View style={styles.slide1}>
    <Text style={styles.text}>Hello Swiper</Text>
  </View>
  <View style={styles.slide2}>
    <Text style={styles.text}>Beautiful</Text>
  </View>
  <View style={styles.slide3}>
    <Text style={styles.text}>And simple</Text>
  </View>
</Swiper>

Control looping, starting slide and direction

The Basic props table in the README covers the core behaviour. Looping is on by default, so the carousel wraps from the last slide back to the first. Set loop to false to turn that off. Use index to choose the first slide shown, and horizontal to switch between horizontal and vertical layout.

horizontal (default true): arranges children in a row when true, in a column when false.
loop (default true): set to false to disable continuous looping.
index (default 0): the index of the initial slide.
showsButtons (default false): set to true to show control buttons.
onIndexChanged: a function called with the new index when the user swipes.

Turn on autoplay and dot pagination

Autoplay is off by default. Set the autoplay prop to true to enable automatic sliding. The changelog for 1.5.3 notes that the autoplay timer is disabled when the prop changes to false, and 1.6.0-rc notes a fix for replay when autoplay is set to true.

Pagination indicators are dots. The changelog for 1.5.4 describes props for changing their look: dotColor and activeDotColor, plus dotStyle and activeDotStyle.

Set autoplay={true} on the Swiper for automatic slides.
Use dotColor and activeDotColor to color the inactive and active dots.
Use dotStyle and activeDotStyle for more detailed dot styling.

<Swiper autoplay={true} dotColor="#ccc" activeDotColor="#fff">
  {/* slides */}
</Swiper>

Customize size, container style and child props

The README documents width and height props for fixed sizes, and the changelog for 1.5.6 adds containerStyle to customize the view container. The Properties section also includes tables for children props, props of ScrollView and supported ScrollResponder methods; check those tables in the README for the full list before relying on a specific option.

The 1.6.0-rc changelog adds a scrollTo method and a prop to disable the previous button. Check the README for how these are called in your code.

width and height: fixed sizes, as numbers.
containerStyle: customizes the view container.
Consult the README's ScrollView and ScrollResponder tables for other supported options.

What people use it for

Image carousels on a product or home screen.
Onboarding or welcome screens with several pages.
Looping promotional banners with autoplay and dot indicators.
Vertical page-through layouts by setting horizontal to false.

Frequently asked questions

How do I install react-native-swiper?

Run npm i react-native-swiper --save in your React Native project folder. The README also lists a separate install line for the 1.6.0 release candidate, which uses the @next tag.

Is react-native-swiper free to use?

Yes. The project is licensed under the MIT licence, according to the repository summary.

Does react-native-swiper work with my React Native version?

The README examples target React Native 0.60.x, and the changelog mentions migrating examples to that version. Check compatibility with your own React Native version before you start.

How do I turn on autoplay in react-native-swiper?

Set the autoplay prop to true on the Swiper element. The README says autoplay is off by default.

Why are my dots not showing or not styled the way I want?

Pagination dots are on by default in the examples. Use dotColor, activeDotColor, dotStyle and activeDotStyle to change their appearance, as described in the changelog.

What are the alternatives to react-native-swiper?

Comparable projects include react-native-snap-carousel, react-native-pager-view and react-native-reanimated-carousel. Pick based on how much gesture customization your project needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use react-native-swiper if you are a React Native developer who needs a swipeable image carousel or onboarding flow with autoplay and dot pagination out of the box. Pick a different component if you need gesture behaviour beyond the documented props, or if your React Native version is far from the 0.60-era examples and you are not ready to check compatibility yourself.

Install options & downloads