react-native-web-swiper

Simple swiper / slider. Works both on React-Native and React-Native-Web.

Demo

Hybrid Snack: https://snack.expo.io/@oxyii/react-native-web-swiper

Installation

``bash
$ npm i react-native-web-swiper --save
`

Usage

`jsx
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Swiper from 'react-native-web-swiper';

const styles = StyleSheet.create({
container: {
flex: 1,
},
slideContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
slide1: {
backgroundColor: 'rgba(20,20,200,0.3)',
},
slide2: {
backgroundColor: 'rgba(20,200,20,0.3)',
},
slide3: {
backgroundColor: 'rgba(200,20,20,0.3)',
},
});

export default class Screen extends React.Component {
render() {
return (



Slide 1


Slide 2


Slide 3



);
}
}
`

$3

`jsx
vertical {/ slide up / down instead left / right /}
from={1} {/ initial slide is second /}
loop {/ back to first slide after last /}
timeout={2} {/ autoplay duration (2 secs) /}
springConfig={{ speed: 11 }} {/ RN Animated.spring config /}
minDistanceForAction={0.15} {/ Swipe less that 15% keep active slide /}
positionFixed {/ Fix mobile safari vertical bounces /}
controlsProps={{
DotComponent: ({ index, activeIndex, isActive, onPress }) => Your Custom Dot {activeIndex+1}/{index+1}
}}
>
{/ Slide 1 /}
{/ Slide 2 /}
{/ ... /}

`

$3

The slide automatically gets props.isActive, props.activeIndex and props.index.

`jsx
import React from 'react';
import { Text, View } from 'react-native';
import Swiper from 'react-native-web-swiper';

type Props = {
index?: number,
activeIndex?: number,
}
export const SomeSlide = (props: Props) => (

{props.activeIndex}/{props.index}{props.isActive ? ' (active)' : ''}

)

export default () => (




)
`

This is possible because Swiper used cloneElement and inject internally the activeIndex and index props to each slide. This also means that all slides will re-render on swipe, since the activeIndex prop value changes on swipe.

---

Props

| Prop | Default | Type | Description |
| :------------------- |:------------:| :--------------------:| :-----------|
| vertical | false | boolean | Swiper vertical layout |
| from | 0 | number | Initial slide index |
| loop | false | boolean | Set to true to enable continuous loop mode |
| timeout | 0 | number | Delay between auto play transitions (in second). Set negative value for reverse autoplay :satisfied:. Autoplay disabled by default |
| gesturesEnabled | () => true | function | Function that returns boolean value. Must return false to disable swiping mechanism. Does not disable Prev / Next buttons |
| springConfig | | Animated.spring | Tune spring animation on autoplay, touch release or slides changes via buttons |
| minDistanceToCapture | 5 | number | Initiate animation after swipe this distance. It fix gesture collisions inside ScrollView |
| minDistanceForAction | 0.2 | number | Minimal part of swiper width (or height for vertical) must be swiped for changing index. Otherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index |
| positionFixed | false | boolean | Swiper inner container position fixed instead relative. Fix mobile safari vertical bounce |
| containerStyle | | ViewPropTypes.style | Outer (root) container style |
| innerContainerStyle | | ViewPropTypes.style | Inner container style |
| swipeAreaStyle | | ViewPropTypes.style | Swipe area style |
| slideWrapperStyle | | ViewPropTypes.style | Each slide wrapper style |
| controlsEnabled | true | boolean | Dots and control buttons visible and enabled |
| Controls | | React.Component | Custom controls component |
| onAnimationStart | | function | Any swiper animation start |
| onAnimationEnd | | function | Any swiper animation end |
| onIndexChanged | | function | Called when active index changed |
| controlsProps | | object | see below |

$3

Over the swiper we need to create a controls layer. But this layer will block the possibility of swiper layer control.
We created 9 controls placeholders to solve this problem:
top-left, top, top-right, left, center, right, bottom-left, bottom and bottom-right.
You can adjust controls position by placing into relevant placeholder:

`jsx
...
controlsProps={{
prevTitle: 'prev button title',
nextTitle: 'next button title',
dotsTouchable: true, {/ touch over dot will make swiper move to rel slide /}
dotsPos: 'top',
prevPos: false, {/ hide prev button /}
nextPos: 'top-right',
cellsStyle: {
'top': { padding: 5, backgroundColor: 'rgba(0, 0, 0, .3)' },
'top-left': { / any custom placeholder style / },
},
cellsContent: {
'bottom-right': {/ Additional content in placeholder /}
}
}}
/>
`

| Prop | Default | Type | Description |
| :------------------- |:------------:| :-----------------------:| :-----------|
| cellsStyle | | object | Controls corners placeholders styles. Allowed keys is: top-left, top, top-right, left, center, right, bottom-left, bottom and bottom-right, allowed values is ViewPropTypes.style |
| cellsContent | | object | Controls corners placeholders additional content. Allowed keys is: top-left, top, top-right, left, center, right, bottom-left, bottom and bottom-right, allowed values is string OR React element |
| dotsPos | 'bottom' OR 'right' if vertical | boolean OR enum('top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right') | Dots position |
| prevPos | 'bottom-left' OR 'top-right' if vertical | boolean OR enum('top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right') | Prev button position |
| nextPos | 'bottom-right' | boolean OR enum('top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right') | Next button position |
| prevTitle | 'Prev' | string | Prev button title |
| nextTitle | 'Next' | string | Next button title |
| prevTitleStyle | | Text.propTypes.style | Customize prev button title |
| nextTitleStyle | | Text.propTypes.style | Customize next button title |
| PrevComponent | | React.Component | Custom prev button component |
| NextComponent | | React.Component | Custom next button component |
| firstPrevElement | | element | Custom prev element on first slide (if not loop) |
| lastNextElement | | element | Custom next element on last slide (if not loop) |
| dotsTouchable | false | boolean | Touches over dots will move swiper to relative slide |
| dotsWrapperStyle | | ViewPropTypes.style | Dots wrapper View style |
| dotProps | | object | react-native-elements Badge props |
| dotActiveStyle | | object | Additional style to active dot. Will be added to dot badgeStyle |
| DotComponent | | React.Component | Custom dot component |

Interaction methods

Store a reference to the Swiper in your component by using the ref prop
provided by React (see docs):

`jsx
const swiperRef = useRef(null);

...

ref={swiperRef}
...
/>
`

Then you can manually trigger swiper from anywhere:

`jsx
() => {
swiperRef.current.goTo(1);
swiperRef.current.goToPrev();
swiperRef.current.goToNext();
const index = swiperRef.current.getActiveIndex();
};
``