React-native-swiper: Detect left, right when swipe

[anbkit]

How can detect left or right when swipe.
Thanks.

[milkers]

I am also in search of catching which direction I swiped and currently which index I am at.

[milkers]

Hey, I read through the issues and found out that using a combination of onMomentumScrollEnd and onScrollBeginDrag props together might be a solution. You can look for the changes on the index field of the state and detect left/right swipe according to the increase and decrease of the intial index which is captured by onScrollBeginDrag.

[tdurand]

I've found a trick that works to disable right / left swipping

In my case I wanted to disable right swipping in the case the user didn't complete the card, for left swipping you could use the same logic:

onMomentumScrollEnd={(e, state, context) => {
            if(state.index > this.currentIndex && this.currentIndex > 0) {
              this._swiper.scrollBy(-1)
            }
            this.currentIndex = state.index;
          }}

You get this:

[dzpt]

@tdurand this way doesn't look good. still see the next slide.
Anyway to stop the scrolling?

[edencakir]

@Tom29 stopping won't work since onMomentumScrollEnd gets called after animation is complete.

[acollazomayer]

I think i found a better solution. I Use the onScrollBeginDrag and the onScroll event. The onScrolBeginDrag fires before the onScroll event, so I save the offset of the slide in the onScrollBeginDrag and when the onScroll event is fired I compare the offset.

onScrollBeginDrag(e) {
    this.setState({ offset: e.nativeEvent.contentOffset.y });
  }

  onScroll(e) {
    const dragOffset = e.nativeEvent.contentOffset.y;
    const { offset, index } = this.state;
    this.setState({ loadingIndex: dragOffset > offset ? index + 1 : index - 1 });
  }

 render() {
    const { channels, navigator } = this.props;
    const { index, loadingIndex } = this.state;

    return (
            <Swiper
              horizontal={false}
              showsButtons={false}
              showsPagination={false}
              ref={(swiper) => { this.swiper = swiper; }}
              loadMinimal
              loadMinimalSize={0}
              loadMinimalLoader={
                <LivePlayerSpinner
                  cover={channels[loadingIndex].cover}
                  title={channels[loadingIndex]['current-schedule-program'].title}
                />
              }
              loop={false}
              onIndexChanged={this.onIndexChange}
              index={index}
              onScrollBeginDrag={this.onScrollBeginDrag}
              onScroll={this.onScroll}
              scrollEventThrottle={16}
            >
              { channels.map(channel => <VideoPlayer live key={channel['content-id']} content={channel} navigator={navigator} />) }
            </Swiper>
);

[femiveys]

@acollazomayer onScroll doesn't work for me, how do you get that event?

[acollazomayer]

@femiveys the onScroll events comes with the swiper component

[femiveys]

That's strange. I cannot access them. In the latest version onScroll is never called for me. Maybe it is because the pages are WebViews

[jonathanmachado]

@acollazomayer same here onScroll doesn't work for me