I use FlatList for horizontal scroll. It works as expected. I can scroll to next item or scroll to last item quickly. But i need to do scroll only to next item. So every swipe should scroll me to the closest item. Can i do it using FlatList?
Found that FlatList has disableIntervalMomentum prop. It resolved my issue
Related
What I am trying to accomplish:
I have a horizontal flatlist (with pagination: true) and I would like to animate the scrolling depending on where on the y axis the user started swiping from.
If the scrolling started from the upper half of the flatlist then its border would animate to a certain color, otherwise it would switch to a different color, and depending on the scroll start position I would call a different function when the next index when the next index is scrolled to.
My question:
So is it possible to use a gesture responder (from react-native-gesture-handler) to handle the scrolling instead of relying on the built in responder of flatList?
for example: calling scrollToOffset repeatedly from inside my gesture responder or set a "current scroll position" prop with an animated value and pass it to the flatList component? no matter what I try I get bombarded with obscure error messages so I was wondering if it is even possible.
I have a Flatlist that I would like to empty when the user long presses it.
The problem is that surrounding the Flatlist with a TouchableOpacity prevents scrolling.
I also cannot surround each item with a Touchable opacity because it's a list with columns and an uneven number of items. This means that at the bottom of the list, there is a leftover area with no items rendered.
This leftover area should still react to the long press (as it is where most users will try to long press).
How can I achieve that?
My requirement is to display in the view a new item just added to the end of the list rendered by a FlatList.
The problem is when using the scrollToEnd method, it only scrolls to the last item that is already rendered in the view (about item #20) but not to the last item in the data array.
From the React Native docs:
May be janky without getItemLayout prop.
But my list items have dynamic height according to its content. The items' height can't be calculated, since each item has a different height. so I have no way to implement the getItemLayout prop.
Any workaround?
I have an image rendered inside a scrollview component and the dimensions of the image are fixed as (height: 200, and width from device dimension).
Also the style of the scrollview is set as (flex: 1 not contentContainerStyle).
But the image doesn't scroll properly and snaps back when I scroll.
I understand that this is because there is only one item in the scrollView.
How to force scroll the content inside the scrollView even if there is only one item in it?
Try wrapping your ScrollView within a an enclosing
I want to be able to scroll a child component so that it visible on screen. How can I tell a react-native ScrollView or ListView to centre, or at least move to a certain component?
Both ScrollView and ListView have method scrollTo, so you can calculate position where you need to scroll