Nourishing Pear Medley

    react-native-swipe-a-lot

    0.2.1 • Public • Published

    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 --save-dev
    

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

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

    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
    }
    

    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

    Install

    npm i react-native-swipe-a-lot

    DownloadsWeekly Downloads

    6

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • nickjanssen