-
Notifications
You must be signed in to change notification settings - Fork 24k
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
SectionList misses scrollTo* methods #13151
Comments
Yeah I punted on this but I agree it's important. Maybe |
IMO, And the Those are just some of my thoughts when I'm trying to switch from Thanks for your great effort to create such a wonderful component |
I appreciate the input, but here is the reasoning: scrollTo* is more explicit and makes the API more clearly self documenting and simpler to flow-type, especially with composition. renderItem(info: {...}) makes it easier to pull out just the info you care about in an order-independent way, and gives us the option value to add more data in the future in a backwards compatible way. |
Has anyone started work on this? Don't want to duplicate efforts if so, otherwise I may have time to try it out. Although I'll defer to @sahrens if he already has thoughts on how to implement 😄 |
No one is working on it to my knowledge so a PR would be appreciated :) Just need to figure out the right API since we need to account for sections. I'll let you take a stab at it and we can iterate in review, just cc me in the PR summary. |
@jpshelley, can you have a look to sticky section header support too? ;) |
@mediaxtend PRs get merged faster if broken into smaller 'sections', so you should probably submit a new issue for it. |
Sticky headers are already in master. |
@jpshelley, got it for the next time! 😇
(https://github.com/facebook/react-native/blob/master/Libraries/Lists/SectionList.js#L111)
(https://github.com/facebook/react-native/blob/master/Libraries/Lists/SectionList.js#L149) I have to test this. |
Oh ha, forgot to update that comment! |
@sahrens I started a branch on this work here and wanted to get your (and others) thoughts on the API. I'm basically just making a wrapper call to the underlying
|
An internal client needed scrollToIndexAtSection support so I already added it in master (as |
We might end up using https://github.com/expo/react-native-invertible-scroll-view for our ScrollComponent for what I'm working on anyways so good timing 😄 We can ditch the branch I created in favor of yours and probably close this issue if @nihgwu agrees |
The 44-th version has been released but scrollTo method is not added :( |
You can browse the code by branch here: https://github.com/facebook/react-native/branches Looks like 0.45 hasn't been cut yet, so you can look at master and see scrollToLocation has been added: https://github.com/facebook/react-native/blob/master/Libraries/Lists/SectionList.js So it should be in v0.45 which will ship the beginning of next month since we're on a monthly release schedule. You can run off master if you want, just update your package.json. |
Any tip on how to use it? Do you pass it as a prop to Sectionlist list. Is it like: <SectionList scrollToEnd={{} ...props /> or as a ref? |
@sahrens Thank you, I've found the method scrollToLocation, and it's working for a normal SectionList. Because I use Animated.event with nativeDriver when onScroll so I need to wrap this SectionList with createAnimatedComponent to be AnimatedSectionList. The problem appears that there's no method scrollToLocation for AnimatedSectionList. Please support this method for createAnimatedComponent(SectionList). |
It's a method, so call it on the ref.
|
@sahrens Version 0.45 is already up and scrollToLocation is documented, but I can't really find an example. Would be awesome if you could give me a hint how can I get the index in Thanks in advance I was able to use it:
|
@RUIFERNANDE5 I am trying to get this feature working too, but I can't find any example. UPDATE: I just found that ReactNative 0.44 doesn't have this feature in SectionList...thanks anyway! |
@RUIFERNANDE5 I tried something similar but it doesn't scrolling to desired position
|
+1 for scrollTo or scrollToOffset is anybody working on it ? |
[Update 2018-04-13: this workaround apparently works on iOS, but not Android] A workaround in the absence of these methods is to work back to the For example: //…
componentDidMount() {
this.refs.list._wrapperListRef._listRef.scrollToOffset({offset: 0})
}
//…
<SectionList ref="list" {…otherProps} />
//… |
+1 for scrollTo() |
@manjeets12 Maybe your getItemLayout method is not correct, you can try remove that |
spent days on this. scrollToLocation does not work even with getItemLayout specified until the rendering of the list is completed. The only way I got it to work is by wrapping the scrollToLocation in a setTimeout of 10 seconds. (dev / android) Even with a 5 second timeout, it would still only scroll partially towards the correct position. Is there anyway to know when the list is rendered and ready ? |
You could add an onLayout callback to your last item and do the scrollTo once that fires, although something else funky might be going on if a 5 second timeout doesn't work. Did you try setting initialScrollIndex? |
Thanks @sahrens will give onLayout a try. though the list always initial renders as empty so onLayout will not fire again once the data is updated. I tried initialScrollIndex and it results in only the very first section header being rendered. I tried with initialScrollIndex > 0 and it had the same result for any value I tried.. never tried with 0 though. |
onLayout doesn't work. The logs are interesting. I subscribe to an event in each list item and I log each subscription. The list size is small ~100 items. I can see that the initial viewable items render really quick ~7 items with the initial render set to 15. I can see that onLayout fires after about 30 subscription. I trigger the scrollToLocation onLayout to the middle index (i = 50) however it doesn't scroll to that location. Stops around the 30th. If I wait about 5-6 seconds.. I finally see a total of 100 subscriptions logged. So the scrollToLocation only works after componentDidMount has been applied to item you need to scroll to. I subscribe to the event in the componentDidMount of the list item component. |
@steobrien your solution works on ios but doesn't seem to on android, at least with my preliminary testing. |
Thanks @JeremyBradshaw7, I've updated the comment. |
I'm planning to switch from
ListView
toSectionList
, but find that I can't perform anyscrollTo*
methods, they are defined inVirtualizedList
but not inVirtualizedSectionList
. At leastscrollToOffset
should be implemented.I'd like to send a PR, but I'm afraid to break the docs, and I don't know whether should we implement
scrollToIndex
andscrollToItem
as they are different fromFlatList
Perhaps a new method
scrollToSection
could be added too, it's a common use case in a contact list@sahrens
The text was updated successfully, but these errors were encountered: