Swiper-Slider for React-Native and React-Native-Web

Swiper-Slider for React-Native and React-Native-Web

Simple swiper / slider. Works both on React-Native and React-Native-Web.

react-native-web-swiper

Simple swiper / slider. Works both on React-Native and React-Native-Web.

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

Download Details:

Author: oxyii

Live Demo: https://snack.expo.io/@oxyii/react-native-web-swiper

GitHub: https://github.com/oxyii/react-native-web-swiper

react-native react

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

How to Share Code Between React and React Native

Learn how to share code between React and React Native to avoid duplicating logic. Sharing Code Between React and React-Native: What Not to Share. This question of sharing code between React and React Native, in fact, one of the hot topics among React and React native developers all over the world. React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native.

React Navigation 4.0 | Getting Started with React Navigation in React Native

In this tutorial, I'll show you how you can install reactnavigation v4 to your react native project. This is a getting started guide for react navigation 4.0 to use it for navigation in react native.