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

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

Usage

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 (
      <View style={styles.container}>
        <Swiper>
          <View style={[styles.slideContainer,styles.slide1]}>
            <Text>Slide 1</Text>
          </View>
          <View style={[styles.slideContainer,styles.slide2]}>
            <Text>Slide 2</Text>
          </View>
          <View style={[styles.slideContainer,styles.slide3]}>
            <Text>Slide 3</Text>
          </View>
        </Swiper>
      </View>
    );
  }
}

With props

<Swiper
  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, isActive, onPress }) => <Text onPress={onPress}>Your Custom Dot {index+1}</Text>
  }}
>
  <View style={{ flex: 1 }} /> {/* Slide 1 */}
  <View style={{ flex: 1 }} /> {/* Slide 2 */}
  {/* ... */}
</Swiper>

Dynamic content

The Swiper will not be re-rendered if slides state or props have changed. Slides must control their condition.

import React from 'react';
import { Text, View } from 'react-native';

export class SomeDynamicSlide extends React.Component {
  state = {
    someStateItem: 'someValue',
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text onPress={() => this.setState({ someStateItem: 'newValue' })}>
            {this.state.someStateItem}
        </Text>
      </View>
    );
  }
}

...

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 (
      <Swiper>

        <SomeDynamicSlide />

        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>This is static content slide</Text>
        </View>

      </Swiper>
    );
  }
}

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 |

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:

<Swiper
  ...
  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': <AnyComponent /> {/* 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 | | 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):

const swiperRef = useRef(null);

...

<Swiper
  ref={swiperRef}
  ...
/>

Then you can manually trigger swiper from anywhere:

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