2.2.1 • Published 4 months ago

react-native-web-swiper v2.2.1

Weekly downloads
5,810
License
MIT
Repository
github
Last release
4 months ago

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.

keys are automatically set for each child of Swiper (when injecting props), if activeIndex - index is 0, it will set the key to -1. This will cause the new active slide to rerender


Props

PropDefaultTypeDescription
verticalfalsebooleanSwiper vertical layout
from0numberInitial slide index
loopfalsebooleanSet to true to enable continuous loop mode
timeout0numberDelay between auto play transitions (in second). Set negative value for reverse autoplay :satisfied:. Autoplay disabled by default
gesturesEnabledtruebooleanFunction that returns boolean value. Set to false to disable swiping mechanism. Allow to use Prev / Next buttons only
springConfigAnimated.springTune spring animation on autoplay, touch release or slides changes via buttons
minDistanceToCapture5numberInitiate animation after swipe this distance. It fix gesture collisions inside ScrollView
minDistanceForAction0.2numberMinimal 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
positionFixedfalsebooleanSwiper inner container position fixed instead relative. Fix mobile safari vertical bounce
containerStyleViewPropTypes.styleOuter (root) container style
innerContainerStyleViewPropTypes.styleInner container style
swipeAreaStyleViewPropTypes.styleSwipe area style
slideWrapperStyleViewPropTypes.styleEach slide wrapper style
controlsEnabledtruebooleanDots and control buttons visible and enabled
ControlsReact.ComponentCustom controls component
onAnimationStartfunctionAny swiper animation start
onAnimationEndfunctionAny swiper animation end
onIndexChangedfunctionCalled when active index changed
controlsPropsobjectsee 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 */}
    }
  }}
/>
PropDefaultTypeDescription
cellsStyleobjectControls 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
cellsContentobjectControls 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 verticalboolean OR enum('top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right')Dots position
prevPos'bottom-left' OR 'top-right' if verticalboolean 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'stringPrev button title
nextTitle'Next'stringNext button title
prevTitleStyleText.propTypes.styleCustomize prev button title
nextTitleStyleText.propTypes.styleCustomize next button title
PrevComponentReact.ComponentCustom prev button component
NextComponentReact.ComponentCustom next button component
firstPrevElementelementCustom prev element on first slide (if not loop)
lastNextElementelementCustom next element on last slide (if not loop)
dotsTouchablefalsebooleanTouches over dots will move swiper to relative slide
dotsWrapperStyleViewPropTypes.styleDots wrapper View style
dotPropsobjectreact-native-elements Badge props
dotActiveStyleobjectAdditional style to active dot. Will be added to dot badgeStyle
DotComponentReact.ComponentCustom 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();
};
2.2.1

4 months ago

2.2.0

4 months ago

2.1.9

5 months ago

2.1.8

5 months ago

2.1.7

11 months ago

2.1.6

11 months ago

2.1.4

11 months ago

2.1.5

11 months ago

2.1.3

1 year ago

2.1.2

1 year ago

2.1.1

1 year ago

2.1.0

2 years ago

2.0.6

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

2.0.0-rc7

2 years ago

2.0.0-rc6

2 years ago

2.0.0-rc5

2 years ago

2.0.0-rc4

2 years ago

2.0.0-rc3

2 years ago

2.0.0-rc2

2 years ago

2.0.0-rc1

2 years ago

1.16.2

2 years ago

1.16.1

2 years ago

1.16.0

2 years ago

1.15.1

2 years ago

1.15.0

2 years ago

1.14.0

2 years ago

1.13.0

2 years ago

1.12.0

2 years ago

1.11.1

2 years ago

1.11.0

2 years ago

1.10.0

2 years ago

1.9.0

2 years ago

1.8.0

2 years ago

1.7.0

2 years ago

1.6.1

2 years ago

1.6.0

2 years ago

1.5.0

2 years ago

1.4.0

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago