Simple swiper / slider. Works both on React-Native and React-Native-Web.
npm install @softmedialab/react-native-web-swiperbash
$ 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
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, isActive, onPress }) => Your Custom Dot {index+1}
}}
>
{/ ... /}
`
$3
The Swiper will not be re-rendered if slides state or props have changed. Slides must control their condition.
`jsx
import React from 'react';
import { Text, View } from 'react-native';
export class SomeDynamicSlide extends React.Component {
state = {
someStateItem: 'someValue',
};
render() {
return (
this.setState({ someStateItem: 'newValue' })}>
{this.state.someStateItem}
);
}
}
...
import React from 'react';
import { Text, View } from 'react-native';
import Swiper from 'react-native-web-swiper';
import { SomeDynamicSlide } from 'someDynamicSlideFile';
class SwiperWrapper extends React.Component {
render() {
return (
This is static content slide
);
}
}
`
---
Props
| Prop | Default | Type | Description |
| :------------------- |:------------:| :--------------------:| :-----------|
| alternatePan | false | boolean | Alternate PAN area |
| vertical | false | boolean | Swiper vertical layout |
| from | 0 | number | Initial slide index |
| loop | false | boolean | Set to true to enable continuous loop mode |
| loopAnimation | spring | spring \| extension | Loop animation variant |
| timeout | 0 | number | Delay between auto play transitions (in second). Set negative value for reverse autoplay :satisfied:. Autoplay disabled by default |
| gesturesEnabled | true | boolean | Function that returns boolean value. Set to false to disable swiping mechanism. Allow to use Prev / Next buttons only |
| 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 |
| slidesPerView | 1 | number | Number of slides per view (slides visible at the same time on slider's container). |
| 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 |
| autoHeight | false | boolean | Calculate height from children elements |
$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':
}
}}
/>
`
| 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 |
| topRow | true | boolean | Render top row |
| centerRow | true | boolean | Render center row |
| bottomRow | true | boolean | Render bottom row |
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);
...
...
/>
`
Then you can manually trigger swiper from anywhere:
`jsx
() => {
swiperRef.current.goTo(1);
swiperRef.current.goToPrev();
swiperRef.current.goToNext();
const index = swiperRef.current.getActiveIndex();
};
``