react-native-web-swiper
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.2 • Public • Published

    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 slide automatically gets props.activeIndex and props.index.

    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) => (
      <View>
        <Text>{props.activeIndex}/{props.index}</Text>
      </View>
    )
    
    export default () => (
      <Swiper>
        <SomeSlide />
        <SomeSlide />
      </Swiper>
    )

    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 😆. 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:

    <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

    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();
    };

    Install

    npm i react-native-web-swiper

    DownloadsWeekly Downloads

    6,578

    Version

    2.2.2

    License

    MIT

    Unpacked Size

    53 kB

    Total Files

    20

    Last publish

    Collaborators

    • jarvisluong
    • oxyii