SwipeALot

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

Table of Contents

• Why create this?
• Features
• Getting started
• Running the demo
• Configuration
• API
  • How to use
  • Methods
• License

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