npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@maman/react-native-web-swiper

v2.6.0

Published

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

Downloads

2

Readme

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

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