DOCSEARCHbyAlgolia
Submit Docs

react-swipeable-views

repository·master·Indexed 26 days ago

https://github.com/oliviertassinari/react-swipeable-views

A lightweight React component library for creating swipeable views supporting web browsers and React Native (experimental). It features lazy-loading, RTL support, and circular swiping. The library includes the core SwipeableViews component and several Higher-Order Components (HOCs) such as virtualize for performance, autoPlay for automatic transitions, and bindKeyboard for keyboard navigation.

Tokens
7.4K
Snippets
14
Records
44
Agent score
87%

What's inside react-swipeable-views

  1. Understand the react-swipeable-views package structure

    master

    The project is split into multiple specialized packages to allow for code sharing and isolation. Depending on your target platform or required functionality, you may need to install different packages:

    • react-swipeable-views: The browser implementation of the <SwipeableViews /> component.
    • react-swipeable-views-native: Native implementations of the <SwipeableViews /> component.
    • react-swipeable-views-utils: Higher order Components (HOCs) providing additional functionalities, such as virtualize().
    • react-swipeable-views-core: Core modules shared between the different packages (internal use).

  4. Compose multiple Higher Order Components (HOCs)

    master

    When using multiple HOCs from react-swipeable-views-utils, the composition order is important. The virtualize HOC must be the first one called (the outermost wrapper) to function correctly.

    // creates a function that invokes the given functions from right to left.
import flowRight from 'lodash/flowRight';

const EnhancedSwipeableViews = flowRight(
  bindKeyboard,
  autoPlay,
  virtualized,
)(SwipeableViews);

  12. Basic usage of react-swipeable-views-native (Experimental)

    master

    In React Native, use SwipeableViews from react-swipeable-views-native. Wrap your slide components (e.g., Views) inside it. You can also use the scroll-based implementation by importing from react-swipeable-views-native/lib/SwipeableViews.scroll if preferred for UX.

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

import SwipeableViews from 'react-swipeable-views-native';
// There is another version using the scroll component instead of animated.
// I'm unsure which one give the best UX. Please give us some feedback.
// import SwipeableViews from 'react-swipeable-views-native/lib/SwipeableViews.scroll';

const styles = StyleSheet.create({
  slideContainer: {
    height: 100,
  },
  slide: {
    padding: 15,
    height: 100,
  },
  slide1: {
    backgroundColor: '#FEA900',
  },
  slide2: {
    backgroundColor: '#B3DC4A',
  },
  slide3: {
    backgroundColor: '#6AC0FF',
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
});

const MyComponent = () => (
  <SwipeableViews style={styles.slideContainer}>
    <View style={[styles.slide, styles.slide1]}>
      <Text style={styles.text}>
        slide n°1
      </Text>
    </View>
    <View style={[styles.slide, styles.slide2]}>
      <Text style={styles.text}>
        slide n°2
      </Text>
    </View>
    <View style={[styles.slide, styles.slide3]}>
      <Text style={styles.text}>
        slide n°3
      </Text>
    </View>
  </SwipeableViews>
);

export default MyComponent;