How to use react-swipeable-views-core - 10 common examples

default:
          break;
      }

      if (action) {
        const indexLatest = this.state.index;
        let indexNew = indexLatest;

        if (action === 'increase') {
          indexNew += 1;
        } else {
          indexNew -= 1;
        }

        if (slideCount || children) {
          indexNew = mod(indexNew, slideCount || React.Children.count(children));
        }

        // Is uncontrolled
        if (this.props.index === undefined) {
          this.setState({
            index: indexNew,
          });
        }

        if (onChangeIndex) {
          onChangeIndex(indexNew, indexLatest);
        }
      }
    };

handleChangeIndex = (indexContainer, indexLatest) => {
      const { slideCount, onChangeIndex } = this.props;

      const indexDiff = indexContainer - indexLatest;
      let index = this.state.index + indexDiff;

      if (slideCount) {
        index = mod(index, slideCount);
      }

      // Is uncontrolled
      if (this.props.index === undefined) {
        this.setIndex(index, indexContainer, indexDiff);
      }

      if (onChangeIndex) {
        onChangeIndex(index, this.state.index);
      }
    };

constructor(props) {
    super(props);

    if (process.env.NODE_ENV !== 'production') {
      checkIndexBounds(props);
    }

    this.state = {
      indexLatest: props.index,
      // Set to true as soon as the component is swiping.
      // It's the state counter part of this.isSwiping.
      isDragging: false,
      // Help with SSR logic and lazy loading logic.
      renderOnlyActive: !props.disableLazyLoading,
      heightLatest: 0,
      // Let the render method that we are going to display the same slide than previously.
      displaySameSlide: true,
    };
    this.setIndexCurrent(props.index);
  }

componentWillReceiveProps(nextProps) {
    const { index, animateTransitions } = nextProps;

    if (typeof index === 'number' && index !== this.props.index) {
      if (process.env.NODE_ENV !== 'production') {
        checkIndexBounds(nextProps);
      }

      // If true, we are going to change the children. We shoudn't animate it.
      const displaySameSlide = getDisplaySameSlide(this.props, nextProps);

      if (animateTransitions && !displaySameSlide) {
        this.setState(
          {
            indexLatest: index,
          },
          () => {
            this.animateIndexCurrent(index);
          },
        );
      } else {
        this.setState({

UNSAFE_componentWillReceiveProps(nextProps) {
    const { index } = nextProps;

    if (typeof index === 'number' && index !== this.props.index) {
      if (process.env.NODE_ENV !== 'production') {
        checkIndexBounds(nextProps);
      }

      this.setIndexCurrent(index);
      this.setState({
        // If true, we are going to change the children. We shoudn't animate it.
        displaySameSlide: getDisplaySameSlide(this.props, nextProps),
        indexLatest: index,
      });
    }
  }

componentWillReceiveProps(nextProps) {
    const { index } = nextProps;

    if (typeof index === 'number' && index !== this.props.index) {
      if (process.env.NODE_ENV !== 'production') {
        checkIndexBounds(nextProps);
      }

      // If true, we are going to change the children. We shoudn't animate it.
      const displaySameSlide = getDisplaySameSlide(this.props, nextProps);

      this.setState(
        {
          displaySameSlide,
          indexLatest: index,
        },
        () => {
          if (this.scrollViewNode) {
            this.scrollViewNode.scrollTo({
              x: this.state.viewWidth * index,
              y: 0,
              animated: this.props.animateTransitions && !displaySameSlide,

componentWillMount() {
    if (process.env.NODE_ENV !== 'production') {
      checkIndexBounds(this.props);
    }

    const { index = 0 } = this.props;

    this.setState({
      indexLatest: index,
      indexCurrent: new Animated.Value(index),
      viewLength: Dimensions.get('window').width,
    });

    this.panResponder = PanResponder.create({
      // So it's working inside a Modal
      onStartShouldSetPanResponder: () => true,
      // Claim responder if it's a horizontal pan
      onMoveShouldSetPanResponder: (event, gestureState) => {
        const dx = Math.abs(gestureState.dx);

componentWillReceiveProps(nextProps) {
    const { index } = nextProps;

    if (typeof index === 'number' && index !== this.props.index) {
      if (process.env.NODE_ENV !== 'production') {
        checkIndexBounds(nextProps);
      }

      this.setIndexCurrent(index);
      this.setState({
        // If true, we are going to change the children. We shoudn't animate it.
        displaySameSlide: getDisplaySameSlide(this.props, nextProps),
        indexLatest: index,
      });
    }
  }

componentWillReceiveProps(nextProps) {
    const { index } = nextProps;

    if (typeof index === 'number' && index !== this.props.index) {
      if (process.env.NODE_ENV !== 'production') {
        checkIndexBounds(nextProps);
      }

      this.setIndexCurrent(index);
      this.setState({
        // If true, we are going to change the children. We shoudn't animate it.
        displaySameSlide: getDisplaySameSlide(this.props, nextProps),
        indexLatest: index,
      });
    }
  }

componentWillReceiveProps(nextProps) {
    const { index } = nextProps;

    if (typeof index === 'number' && index !== this.props.index) {
      if (process.env.NODE_ENV !== 'production') {
        checkIndexBounds(nextProps);
      }

      // If true, we are going to change the children. We shoudn't animate it.
      const displaySameSlide = getDisplaySameSlide(this.props, nextProps);

      this.setState(
        {
          displaySameSlide,
          indexLatest: index,
        },
        () => {
          if (this.scrollViewNode) {
            this.scrollViewNode.scrollTo({
              x: this.state.viewWidth * index,
              y: 0,
              animated: this.props.animateTransitions && !displaySameSlide,
            });
          }
        },
      );