Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-swipe-a-lot-component with all npm packages installed. Try it out:

var reactNativeSwipeALotComponent = require("react-native-swipe-a-lot-component")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-swipe-a-lot-component v0.0.6

A swipe component for React Native that works on iOS and Android.

SwipeALot

A swipe component for React Native that works on iOS and Android.

Table of Contents

Why create this?

I've found existing swiping components to be buggy and not working fully on both platforms.

Features

  • Autoplay
  • Horizontal swiping
  • Works when orientation changes
  • Cross-platform
  • Works with any view size
  • Custom styling
  • Pressable circle buttons
  • API

Getting started

Install the npm package.

npm i react-native-swipe-a-lot-component --save

Import the SwipeALot component wherever you'd like to use it.

import SwipeALot from 'react-native-swipe-a-lot-component'

In your render method, simply use it as a wrapper around Views.

class Root extends React.Component {
  render() {
    return (
      <SwipeALot>
        <View>
          <Text>This is slide 1</Text>
        </View>
        <View>
          <Text>This is slide 2</Text>
        </View>  
      </SwipeALot>
    )
  }
}

Running the demo

First run npm install

Then simply run react-native run-android or react-native run-ios

Configuration

You can pass these props to the component:

autoplay makes the component automatically swipe to other pages. It is disabled by default. Pass an object as a prop here to configure it:

{
  enabled: false,
  disableOnSwipe: false,
  delayBetweenAutoSwipes: 5000
}

onSetActivePage is a function that returns current index of the page when user swipes or clicks on a circle

<SwipeALot
  onSetActivePage={(index) => { console.log('Current Page is: ', index); }}
>
</SwipeALot>

wrapperStyle defines how the container that contains the swiping views looks. By default no styling is applied.

circleDefaultStyle defines how the inactive circles on your swiper component look. You can pass an object here with style properties that you wish to override.

Default style:

{
  width: PixelRatio.getPixelSizeForLayoutSize(6),
  height: PixelRatio.getPixelSizeForLayoutSize(6),
  margin: 10,
  backgroundColor: 'rgb(158, 158, 158)',
  borderRadius: PixelRatio.getPixelSizeForLayoutSize(3)
}

circleActiveStyle defines how the active circle on your swiper component looks. You can pass an object here with style properties that you wish to override.

Default style:

{
  backgroundColor: 'rgb(245, 245, 245)',
}

API

How to use

Simply save a reference to your component and then call these methods from anywhere in your app.

You can save a reference like this:

<SwipeALot ref={(c) => this.swiper = c}>

Then simply call the following methods on your variable, e.g. this.swiper.swipeToPage(1)

Methods

getPage()

Gets the current page index

swipeToPage(page)

Jump to a page. This can be used to overlay buttons on top that

stopAutoplay()

Stops Autoplay.

startAutoplay()

Starts Autoplay.

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free