react-native-web-swiper
Simple swiper / slider. Works both on React-Native and React-Native-Web.
Demo
Hybrid Snack: //snack.expo.io/@oxyii/react-native-web-swiper
Installation
Usage
With props
Dynamic content
The slide automatically gets props.activeIndex and props.index.
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
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. 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 |
Controls Props
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:
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]:
Then you can manually trigger swiper from anywhere: