Custom Pagination on ScrollView Horizontal

[TYRONEMICHAEL]

From the docs it does not seem possible to control the scrollView. The default behavior for pagination is the following:

When true, the scroll view stops on multiples of the scroll view's size when scrolling.

Would it be possible to change this value to a custom value? Or would I need to extend the ScrollView and submit a PR.

[ide]

This is just how iOS behaves: size of scroll view viewport == one page. I don't believe it's possible to customize it, so if you want a different pagination distance, you'll have to change the size of your scroll view.

[TYRONEMICHAEL]

Ok great. I think my best bet would be wrapping the scroll view in a container view whose job it is to intercept touches and hand them off to the scroll view? That way I can resize the scroll view while still being able to scroll outside of the scrollView.

By the way RN changes the game. Awesome stuff.

[TYRONEMICHAEL]

I guess then my question is how do I pass down touches to a child component. So how can I let the ScrollView inside of a View become the responder?

[ide]

I haven't thought about your specific use case but this documentation may provide helpful: https://facebook.github.io/react-native/docs/gesture-responder-system.html

[TYRONEMICHAEL]

No worries, I think I came across a solution when I started looking at the source of the following react-native project => https://github.com/appintheair/react-native-looped-carousel/blob/master/index.js.

By looking at the source I noticed a few properties not covered in the documentation for the ScrollView:

• onScrollBeginDrag
• onMomentumScrollEnd
• onScroll

I don't see the events covered in the gesture-responder-system as well. Sorry if I am missing something.

[brentvatne]

@TYRONEMICHAEL - I opened issue #1410 to address the documentation problems. Check out the ScrollResponder source for more info on these events - there are some pretty good comments documenting how they work.

Also, let me know if you come up with custom horizontal ScrollView pager, would be curious to see your implementation - I'll need to do something like that myself soon.

[rxb]

This is a very dirty implementation of snap scrolling, but maybe it will inspire someone to actually make it legit:

 <ScrollView 
  ref={(snapScroll) => { this.snapScroll = snapScroll; }}
  horizontal={true} 
  decelerationRate={0}
  onResponderRelease={()=>{

    var interval = 300; // WIDTH OF 1 CHILD COMPONENT 

    var snapTo = (this.scrollingRight)? Math.ceil(this.lastx / interval) : Math.floor(this.lastx / interval);
    var scrollTo = snapTo * interval;
    this.snapScroll.scrollTo(0,scrollTo);
  }}
  scrollEventThrottle={32}
  onScroll={(event)=>{
    var nextx = event.nativeEvent.contentOffset.x;
    this.scrollingRight = (nextx > this.lastx);
    this.lastx = nextx;
  }}
  showsHorizontalScrollIndicator={false} 
  style={styles.listViewHorizontal}
  >

  {/* scroll-children here */}

</ScrollView>

Issues with this:

• Isn't taking user's scroll velocity into account, so you see a jump in velocity when scrollTo takes over.
• You get this warning: "ScrollView doesn't take rejection well - scrolls anyway" which I assume means I'm doing something frowned upon

[rxb]

@brentvatne I managed to get some pretty good scroll-snapping action going by adding some code to scrollViewWillEndDragging in RCTScrollView.m . As far as I can tell, it's bad news to try to take control of the scroll with JS once the ScrollView is moving. Jumping in to redirect the place where the contentOffset lands in the objective-c feels a million times nicer. Here's a video of it in action with different sizes and alignments:

https://vid.me/aoby

I'd definitely put together a pull request if this is something that might get considered for ScrollView.

[TYRONEMICHAEL]

That is awesome. I would love to take a look how you implemented it in RCTScrollView. Do you have it up on a repo yet? Exactly what I was looking for.

[brentvatne]

@rxb - that looks so cool! If you'd like to put together a PR for it, that would be much appreciated 😄

[rxb]

@brentvatne Awesome! I'll do it. Looks like ScrollView might be broken right now on master? Can't scroll even normally and getting a red outline around my ScrollView.

@TYRONEMICHAEL You can see the additions here: master...rxb:snap .

[brentvatne]

@rxb - try restarting Xcode and packager. if that doesn't fix it, vjeux/react-native#a5cabd17 works fine, just tried it

[brentvatne]

@rxb - one thing I didn't see there in the video, can you cancel the snap by starting to scroll again? That's something that's very missed from the current snap implementation

[brentvatne]

@rxb - including this in my newsletter this week 😄

[rxb]

@brentvatne Awesome! Is this the kind of thing you mean with the canceling? https://vid.me/O3wB

@TYRONEMICHAEL Still having trouble with ScrollView on master. I'll dig in more to see if I can figure out what's up with that.

[brentvatne]

@rxb - yeah, like that but also in the opposite direction - so if it starts to snap you can cancel it and scroll back

[rxb]

@brentvatne How about this one: https://vid.me/yKVY

[brentvatne]

@rxb - awesome 😄

[prashanth1509]

@rxb But what if pagination is enabled and we just want to show only one next/prev card irrespective of scroll velocity.