Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nickjanssen/react-native-swipe-a-lot

A swipe component for React Native that works on iOS and Android.
https://github.com/nickjanssen/react-native-swipe-a-lot

Last synced: 27 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
# SwipeALot



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



![](http://i.imgur.com/P11FPpR.gif)



#### Table of Contents



* [Why create this?](#why-create-this)

* [Features](#features)

* [Getting started](#getting-started)

* [Running the demo](#running-the-demo)

* [Configuration](#configuration)

* [API](#api)

  * [How to use](#how-to-use)

  * [Methods](#methods)

* [License](#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 --save

```



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 (

      

        

          This is slide 1

        

        

          This is slide 2

          

      

    )

  }

}

```



## 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

```

 { console.log('Current Page is: ', index); }}

>



```



`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:



```

 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