leecade/react-native-swiper

★ 10,493JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it Does
      Swipeable slide shows
      Mobile pagination
      Onboarding screens
    Features
      Dot indicators
      Autoplay timer
      Lazy loading
    Customization
      Horizontal or vertical
      Custom dot colors
      Loop control
    Use Cases
      Onboarding flows
      Image galleries
      Promo carousels

mindmap root((repo)) What it Does Swipeable slide shows Mobile pagination Onboarding screens Features Dot indicators Autoplay timer Lazy loading Customization Horizontal or vertical Custom dot colors Loop control Use Cases Onboarding flows Image galleries Promo carousels

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a three-step onboarding screen to your React Native app where users swipe through pages before reaching the main screen.

USE CASE 2

Build a product image gallery in a shopping app where users swipe left and right through photos with dot indicators showing their position.

USE CASE 3

Create an auto-playing promotional carousel that rotates through slides on a timer without any user interaction.

USE CASE 4

Implement vertical paging in a mobile app where content loads lazily as the user swipes through many pages for better performance.

Tech stack

JavaScriptReact NativeTypeScript

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

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.

Copy-paste prompts

Prompt 1

Add a three-page onboarding screen to my React Native app using react-native-swiper. Show me the complete Swiper setup with custom dot colors and a skip button on the last slide.

Prompt 2

I want to build an image gallery in React Native with react-native-swiper that shows dot indicators and loops back to the first image after the last one. Give me the full component code.

Prompt 3

Set up react-native-swiper with autoplay so slides advance every 3 seconds, then stop autoplay when the user manually swipes. Show me the configuration and callback setup.

Prompt 4

I am using react-native-swiper with many slides and the app is slow to start. How do I enable lazy loading so slides are only rendered when the user is close to them?

Prompt 5

Show me how to make react-native-swiper scroll vertically instead of horizontally, and explain when vertical swiping makes sense in a mobile UI.

Open on GitHub → Explain another repo

← leecade on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.