-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Definable distance pagination for ScrollView #1532
Conversation
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 👍 |
|
||
// What is the current offset? | ||
CGFloat targetContentOffsetAlongAxis = isHorizontal ? targetContentOffset->x : targetContentOffset->y; | ||
//CGFloat targetContentOffsetAlongAxis = isHorizontal ? scrollView.contentOffset.x : scrollView.contentOffset.y; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This comment can go
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
@rxb - could you also squash these commits into one? |
Not sure who owns ScrollView cc @tadeuzagallo @nicklockwood |
@brentvatne Thanks for the notes. Everything except for the isHorizontal question is fixed and squashed into 1 commit. |
What do you think about tweaking the api to match up with the CSS scroll-snap-points spec? Looks like it will be in most browsers soon: |
Have you tried paginate={true} on ScrollView, doesn't it solve your use case? |
@vjeux - there are several problems with
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 |
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. |
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: It would be rough if it forced one-at-a-time, but free scrolling would feel like driving on a greased track. |
@nicklockwood: what do you think of this? |
@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 . |
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 :( |
} | ||
|
||
} | ||
<<<<<<< HEAD |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
merge conflict artifact?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the catch, fixed.
@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 Set snapping interval Set alignment of snap relative to scroll container |
ping @nicklockwood |
+1 Just stumbled upon this while looking to detect page changes on a horizontal listview. This could be useful i guess. |
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 |
any thoughts one this one? |
@vjeux Mind sharing the patch? Wondering if anyone is having any opinions on this. Happy to implement thoughts that others may have. |
Would love having this patch merged into react native! |
@facebook-github-bot shipit |
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. |
Awesome. Thanks 👍 Lrn flashcards will use this ;) |
"Failed to apply patch". @rxb would you be willing to rebase? Sorry for the wait |
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. |
Travis is broken because of our android push. Unlikely your fault |
…ce pagination for ScrollView"
…ce pagination for ScrollView"
@facebook-github-bot shipit |
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. |
dcf245a
Thanks, everybody! |
Thanks for sticking with us and sorry it took that much time! |
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
I'm surprised an |
Any plans to bring this functionality to Android? |
+1 for Android |
I can create a pull request for Android if the owner wants. |
[0.68] Resolve micromatch to ^4.0.0
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 adjusttargetContentOffset
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 snapstart
,center
, orend
.Here's an example of it in action:
https://vid.me/aoby
Here is some sample code to try it out yourself:
Would love to get your thoughts on this direction!
cc: @brentvatne #1362