Definable distance pagination for ScrollView #1532

rxb · 2015-06-06T02:55:58Z

This is an enhancement for ScrollView that adds the ability to paginate based on a width other than the width of the ScrollView itself. This is a fairly common pattern used on apps like Facebook, App Store, and Twitter to scroll through a horizontal set of cards or icons:

After trying to accomplish this only with JS, it appears that attempting to take over an in-progress native scroll animation with JS is always going to result in some amount of jankiness and jumping.

This pull request uses scrollViewWillEndDragging in RCTScrollView.m to adjust targetContentOffset based on two new optional props added to ScrollView. snapToInterval sets the multiple that the ScrollView will come to rest on. snapToAlignment sets the relative alignment of the snap start, center, or end.

Here's an example of it in action:
https://vid.me/aoby

Here is some sample code to try it out yourself:

var SnapTest = React.createClass({

  render: function() {
    var blocks = [];
    for(var i=0; i<=30; i++){
      blocks.push("i");
    }
    var blockW = 100;
    return (
      <ScrollView 
        horizontal={true} 
        decelerationRate={0}
        snapToInterval={blockW}
        snapToAlignment="start"
        >
        {blocks.map(function(m,i){
          return (
            <View key={i} style={{width: blockW, height: blockW, padding:16, backgroundColor: (i%2==0)?'cornflowerblue':'royalblue', borderWidth: 1, borderColor: "#fff"}}>
              <Text style={{color: 'white', fontWeight: '800'}}>{i}</Text>
            </View>
          );
        })}
      </ScrollView>
    );
  }
});

Would love to get your thoughts on this direction!

cc: @brentvatne #1362

brentvatne · 2015-06-06T17:26:03Z

This looks great, I'll read over more carefully and try it out tonight 😄 edit: scratch that, went on massive run today and am totally exhausted, tomorrow 👍

brentvatne · 2015-06-08T00:01:09Z

React/Views/RCTScrollView.m

+
+    // What is the current offset?
+    CGFloat targetContentOffsetAlongAxis = isHorizontal ? targetContentOffset->x : targetContentOffset->y;
+    //CGFloat targetContentOffsetAlongAxis = isHorizontal ? scrollView.contentOffset.x : scrollView.contentOffset.y;


This comment can go

brentvatne · 2015-06-08T00:05:56Z

@rxb - could you also squash these commits into one?

brentvatne · 2015-06-08T00:06:38Z

Not sure who owns ScrollView cc @tadeuzagallo @nicklockwood

rxb · 2015-06-08T01:28:07Z

@brentvatne Thanks for the notes. Everything except for the isHorizontal question is fixed and squashed into 1 commit.

rxb · 2015-06-11T14:56:12Z

What do you think about tweaking the api to match up with the CSS scroll-snap-points spec?
http://www.w3.org/TR/css-snappoints-1/#scroll-snap-type

Looks like it will be in most browsers soon:
http://caniuse.com/#feat=css-snappoints
https://www.chromestatus.com/features/5721832506261504

brentvatne · 2015-06-11T17:46:04Z

@rxb - Absolutely! I think the closer that we can be to the w3 spec the better. Great point, can you adjust accordingly? cc @vjeux

vjeux · 2015-06-11T17:58:55Z

Have you tried paginate={true} on ScrollView, doesn't it solve your use case?

brentvatne · 2015-06-11T18:05:24Z

@vjeux - there are several problems with paginate={true}:

Fixed page size to the viewport width
- If it were to support variable widths, it would need to have an option to specify where to snap to (middle, left-side, right-side)
Horizontal paging only

Like in the screenshots that @rxb posted in the original comment above, it's quite common to want to snap to something other than the viewport width

ide · 2015-06-11T19:30:45Z

You can support variable widths with pagination with a couple of tricks -- that is how the Apple Photos app works.

The core difference between pagination and scroll snapping is that pagination snaps to the next page even if you swipe hard, while scroll snapping accounts for momentum so you could end up several pages away.

rxb · 2015-06-11T20:31:45Z

I think where that difference matters most is when you are scrolling through items that are not close to the screen width, like photos on FB profiles:
https://vid.me/V4Bz

It would be rough if it forced one-at-a-time, but free scrolling would feel like driving on a greased track.

sahrens · 2015-06-13T01:28:22Z

@nicklockwood: what do you think of this?

rxb · 2015-06-17T04:43:17Z

@brentvatne Awesome, I'll sync things up with the W3C spec.

After testing this in a more realistic screen -- where the horizontal scrolling section is one part of a longer vertical scrollview -- ran into that nested scrolling bug from: #41 .

vjeux · 2015-07-15T02:07:56Z

Just wanted to said that I patched this to prototype a use case that we wanted to do internally and it works really well :)

Sorry it takes so long to review :(

paramaggarwal · 2015-07-15T04:14:50Z

React/Views/RCTScrollView.m

+    }
+
+  }
+<<<<<<< HEAD


merge conflict artifact?

Thanks for the catch, fixed.

rxb · 2015-07-15T05:08:19Z

@vjeux Happy to hear it worked for you.

I keep meaning to get back to this and tweak to match the W3C scroll snap points spec. Would love to get anyone's thoughts on this interface:

Enable snapping
http://www.w3.org/TR/css-snappoints-1/#scroll-snap-type
prop: scrollSnapType
values: none proximity (mandatory could be supported in the future )

Set snapping interval
http://www.w3.org/TR/css-snappoints-1/#propdef-scroll-snap-points-x
prop: scrollSnapPoints (W3C spec defines scroll-snap-points-x and scroll-snap-points-y independently, but it seems that RN encourages scrolling in one direction at a time)
values: none repeat([interval in pixels]) (The repeat seems unnecessary, but it is part of the spec.)

Set alignment of snap relative to scroll container
http://www.w3.org/TR/css-snappoints-1/#propdef-scroll-snap-destination
prop: scrollSnapDestination
values: [offset in pixels] (Spec defines values for x and y offsets together, but this seems unnecessary if RN ScrollViews are only scrolling in one direction. Setting this explicitly in pixels gives more flexibility, but is more work than start, center, end )

sahrens · 2015-07-15T13:28:00Z

ping @nicklockwood

chirag04 · 2015-07-24T14:23:40Z

+1

Just stumbled upon this while looking to detect page changes on a horizontal listview. This could be useful i guess.

chirag04 · 2015-07-24T14:39:48Z

@vjeux Does it make sense to emulate css api if it is not part of style?

My 2cents: I liked the initial api suggested by @rxb.

vjeux · 2015-07-24T15:13:48Z

The guideline is to first try to design the best API based on what exists on iOS, Android, web... Then once we found one, if it is close enough to the web one, it's preferable to use it. If the web one doesn't make sense, we shouldn't tie ourself to it

chirag04 · 2015-07-28T08:36:35Z

any thoughts one this one?

cc @nicklockwood

chirag04 · 2015-08-02T17:17:37Z

@vjeux Mind sharing the patch? Wondering if anyone is having any opinions on this. Happy to implement thoughts that others may have.

syrusakbary · 2015-08-10T20:03:43Z

Would love having this patch merged into react native!
👍

vjeux · 2015-09-15T16:48:37Z

@facebook-github-bot shipit

facebook-github-bot · 2015-09-15T16:49:40Z

Thanks for importing. If you are an FB employee go to https://our.intern.facebook.com/intern/opensource/github/pull_request/437412899771084/int_phab to review.

chirag04 · 2015-09-15T16:50:57Z

Awesome. Thanks 👍

Lrn flashcards will use this ;)

vjeux · 2015-09-15T16:51:52Z

"Failed to apply patch". @rxb would you be willing to rebase? Sorry for the wait

rxb · 2015-09-15T18:50:38Z

Should be back in business, rebased with master. The Travis e2e test is failing, but I can't tell if that's because of something in this PR or a general thing that's happening. Seems like almost all the recent PRs are failing that.

vjeux · 2015-09-15T19:19:32Z

Travis is broken because of our android push. Unlikely your fault

…ce pagination for ScrollView"

vjeux · 2015-09-22T20:26:49Z

@facebook-github-bot shipit

facebook-github-bot · 2015-09-22T20:27:35Z

Thanks for importing. If you are an FB employee go to https://our.intern.facebook.com/intern/opensource/github/pull_request/437412899771084/int_phab to review.

rxb · 2015-09-23T18:57:15Z

Thanks, everybody!

vjeux · 2015-09-23T19:05:44Z

Thanks for sticking with us and sorry it took that much time!

@vjeux

Summary: This is an enhancement for ScrollView that adds the ability to paginate based on a width other than the width of the ScrollView itself. This is a fairly common pattern used on apps like Facebook, App Store, and Twitter to scroll through a horizontal set of cards or icons: ![img_8726 2](https://cloud.githubusercontent.com/assets/451050/8017899/39f9f47c-0bd2-11e5-9c1d-889452f20cf7.PNG) ![img_8727 2](https://cloud.githubusercontent.com/assets/451050/8017898/39f962dc-0bd2-11e5-98b4-461ac0f7f21b.PNG) ![img_8728 2](https://cloud.githubusercontent.com/assets/451050/8017900/39fd91a4-0bd2-11e5-8786-4cf0316295a0.PNG) After trying to accomplish this only with JS, it appears that attempting to take over an in-progress native scroll animation with JS is always going to result in some amount of jankiness and jumping. This pull request uses `scrollViewWillEndDragging` in RCTScrollView.m to adjust `targetContentOffset` based on two new optional props added to ScrollView. `snapToInterval` sets the multiple that the Closes facebook#1532 Reviewed By: @svcscm, @trunkagent Differential Revision: D2443701 Pulled By: @vjeux

aleclarson · 2016-01-07T00:54:39Z

I'm surprised an onSnap prop wasn't included. Thoughts?

erickreutz · 2016-08-10T00:13:02Z

Any plans to bring this functionality to Android?

me-abhinav · 2016-10-05T13:55:01Z

+1 for Android

me-abhinav · 2016-10-06T05:08:03Z

I can create a pull request for Android if the owner wants.

[0.68] Resolve micromatch to ^4.0.0

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Jun 6, 2015

brentvatne reviewed Jun 8, 2015
View reviewed changes

sahrens assigned nicklockwood Jun 13, 2015

paramaggarwal reviewed Jul 15, 2015
View reviewed changes

ide and others added 2 commits September 15, 2015 13:46

[0.11.0]

4f1ada2

Definable distance pagination for ScrollView

e50059e

miracle2k added a commit to miracle2k/react-native that referenced this pull request Sep 16, 2015

"Merge pull request facebook#1532 from rxb/master\n\nDefinable distan…

d73735f

…ce pagination for ScrollView"

miracle2k added a commit to miracle2k/react-native that referenced this pull request Sep 16, 2015

"Merge pull request facebook#1532 from rxb/master\n\nDefinable distan…

58e6997

…ce pagination for ScrollView"

ghost closed this in dcf245a Sep 23, 2015

erickreutz unassigned nicklockwood Aug 10, 2016

julesmoretti mentioned this pull request Apr 25, 2017

ScrollView snapToInterval iOS not working [android integration?] #13665

Closed

bumplzz69 mentioned this pull request Jul 31, 2022

[Snyk] Security upgrade node-fetch from 2.2.0 to 3.2.10 bumplzz69/react-native#128

Open

ebarahona mentioned this pull request Jul 31, 2022

[Snyk] Security upgrade node-fetch from 1.7.3 to 3.2.10 ebarahona/react-native#71

Open

massapina mentioned this pull request Aug 1, 2022

[Snyk] Security upgrade node-fetch from 1.7.3 to 3.2.10 massapina/react-native#34

Open

joseroubert08 mentioned this pull request Aug 1, 2022

[Snyk] Security upgrade node-fetch from 1.7.3 to 3.2.10 joseroubert08/react-native#53

Open

enterstudio mentioned this pull request Aug 1, 2022

[Snyk] Security upgrade node-fetch from 1.7.3 to 3.2.10 enterstudio/react-native#34

Open

admmasters mentioned this pull request Aug 1, 2022

[Snyk] Security upgrade node-fetch from 1.7.3 to 3.2.10 admmasters/react-native#57

Open

harunpehlivan mentioned this pull request Aug 1, 2022

[Snyk] Security upgrade node-fetch from 1.7.3 to 3.2.10 harunpehlivan/react-native#55

Open

mganandraj pushed a commit to mganandraj/react-native that referenced this pull request Dec 6, 2022

Merge pull request facebook#1532 from amgleitman/0.68-micromatch-v4

b4f5a29

[0.68] Resolve micromatch to ^4.0.0

This pull request was closed.

Definable distance pagination for ScrollView #1532

Definable distance pagination for ScrollView #1532

Conversation

rxb commented Jun 6, 2015

brentvatne commented Jun 6, 2015

brentvatne Jun 8, 2015

Choose a reason for hiding this comment

rxb Jun 8, 2015

Choose a reason for hiding this comment

brentvatne commented Jun 8, 2015

brentvatne commented Jun 8, 2015

rxb commented Jun 8, 2015

rxb commented Jun 11, 2015

brentvatne commented Jun 11, 2015

vjeux commented Jun 11, 2015

brentvatne commented Jun 11, 2015

ide commented Jun 11, 2015

rxb commented Jun 11, 2015

sahrens commented Jun 13, 2015

rxb commented Jun 17, 2015

vjeux commented Jul 15, 2015

paramaggarwal Jul 15, 2015

Choose a reason for hiding this comment

rxb Jul 15, 2015

Choose a reason for hiding this comment

rxb commented Jul 15, 2015

sahrens commented Jul 15, 2015

chirag04 commented Jul 24, 2015

chirag04 commented Jul 24, 2015

vjeux commented Jul 24, 2015

chirag04 commented Jul 28, 2015

chirag04 commented Aug 2, 2015

syrusakbary commented Aug 10, 2015

vjeux commented Sep 15, 2015

facebook-github-bot commented Sep 15, 2015

chirag04 commented Sep 15, 2015

vjeux commented Sep 15, 2015

rxb commented Sep 15, 2015

vjeux commented Sep 15, 2015

vjeux commented Sep 22, 2015

facebook-github-bot commented Sep 22, 2015

rxb commented Sep 23, 2015

vjeux commented Sep 23, 2015

aleclarson commented Jan 7, 2016

erickreutz commented Aug 10, 2016

me-abhinav commented Oct 5, 2016

me-abhinav commented Oct 6, 2016 • edited Loading

me-abhinav commented Oct 6, 2016 •

edited

Loading