I have a FlatList with like 300 cells and I want to limit the momentum of a scroll. On ios if you have a large list you can exponentially increase the speed at which it is scrolling through the list by just consecutively doing fast scrolls. This is what i want to disable/ make it a lot less. I dont want to disable momentum scroll, I just want to make it so that you cant keep increasing that momentum.
There is a property called decelerationRate,
<ScrollView decelerationRate={0.5}>
</ScrollView>
Related
I want to optimize the scrolling of the Flatlist so it does not jump as much. I have a relatively random set of items but some items I can predict the exact height. But obviously not offset
Can getitemlayour still be used or it has to be avoided because of the items I am not able to compute for.
I tried to use it but I get A lot of blank and inactive areas. Not sure if i am using it correctly though.
No, getItemLayout only works if you know all the dimensions and offsets of each item. This allows the FlatList to create the native views for each item before they appear on the screen. You're seeing the native views at the size and offset you're setting in getItemLayout.
If you can't change the design of the component to be predictably sized, there are other ways to optimize FlatLists, but this way will not work for you.
I am currently building an app which allows users to select their current weight and waist size. The list is long since, for example, the weight will start from 40kg up to 300kg, and each value will have a decimal point from .1 up to .9, e.g 40.0, 40.1, 40.2, 40.3, ... 40.9, 41.0, the whole numbers will be represented in a longer vertical line, while the decimal values in shorter vertical lines. So as you can imagine, the list is going to be really long. I have already implemented 2 ways: FlatList and Carousel using react-native-snap-carousel. They have their pros and cons, FlatList is much performant than the Carousel, but im having a hard time getting the value of the middle line. While the carousel performs poorly, i do have access to the current selected item. So my question here is: how do i implement this performance-wise and i have access with the currently selected item. Take Note also that i have implement FlatList's onViewableItemsChanged and it still doesn't achieve my goal
here is the screenshot of the UI:
In short:
You can check this library out: https://github.com/veizz/react-native-picker-scrollview
In detail:
There's a way to achieve this with some Flatlist props:
onScrollBeginDrag & onScrollEndDrag: detect when user starts/stops scrolling
onMomentumScrollBegin & onMomentumScrollBegin : detect scroll speed and momentum
scrollTo or scrollToIndex functions which requires Flatlist ref.
onScrollEvent if needed.
My opinion is, (which'll be my approach)
First, set the selectedItem as you like.
Then, using those scroll props above to detect which item(index) it's scrolling to. Select that item. Then scrollTo to selected.
Any point where it exceeds the threshold, use scrollTo or scrollToIndex to the next/previous item.
This is my approach, if you have your own, I'll be glad to discuss.
Happy coding!
My ListView displays a feed of users, where each row is variable height (similar to Facebook).
A similar question suggests to scroll to rowIndex*rowHeight, but my rows are not the same height.
Any suggestions?
There is no simple way to do this. You can try to use onLayout event and save all rows height. But if part of rows before item you want scroll to was not rendered you can't calculate offset.
One solution in this situation is render all items at once. But there may be performance issue.
Another is scrolling bit by bit and calculate height in runtime.
My advice is redesign your UX to prevent this operation. Or use ScrollView and onLayout if row count is not too big.
UPDATED: FlatList will be added in RN 0.43. It has scrollToItem method.
Is it possible to add a vertical scrollbar to an OnDemandGrid?
Yes, I realize that an OnDemandGrid lets you scroll through a million records, and it will be awkward to imagine a scrollbar that lets you scroll all the way up and down through those million records, but I'd say it'll be good if there was a way to add a scrollbar at least to scroll through a reasonable subset around the visible viewport.
Never mind my question - I realized that it was actually showing the vertical scrollbar by default all this while, but it was hidden off the right of the page due to a large width on the div containing the dgrid.
How do I make the UIScroll view show complete views, not partial views?
(Note) I don't want it jumping to a complete view. It needs to move naturally or at least not immediate... needs to be smooth.
thanks
If your views are all of a constant size and you just want left/right or up/down scrolling, set pagingEnabled on the scroll view to YES. Supposing you wanted your scroll view to be 320x480 but to show the sides of the next and previous pages (so, e.g., each thing inside the view was 280 points wide), you'd size the scroll view to be 280x480 but set masksToBounds to NO.
If you have a more complicated scheme, install a scroll view delegate and act on scrollViewDidScroll:, paying attention to contentOffset. Probably you want to implement logic like:
add an observer on tracking; when it transitions to NO from 'YES' enable your logic inside scrollViewDidScroll: In there:
if a forced scroll is pending, cancel it
calculate where you'd force the scrolling to from the current position
schedule a scroll to there (which you'll effect via setContentOffset:animated:) for half a second from now
You can use a non-repeating NSTimer for the scheduling aspect. The logic you've essentially implemented is that if the user stops adjusting the view, wait for the natural inertia to end (which you'll detect by the 0.5 second gap since last movement), then transition smoothly to the nearest aligned position.
Check out Apple's documentation here first:
https://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/UIScrollView_pg/Introduction/Introduction.html
Then the ScrollViewSuite sample:
https://developer.apple.com/library/ios/#samplecode/ScrollViewSuite/Introduction/Intro.html#//apple_ref/doc/uid/DTS40008904
I think you are referring to Paging techniques.