I've got a FlatList consisting of multiple cells. Each cell has an View in it which supports Pan/Zoom gestures.
The Pan/Zoom Views work great standalone, but when they're part of the FlatList, they don't. As in, they don't pan or zoom. I assume they're conflicting with the FlatList's own gesture recognizers.
My FlatList is actually showing one cell per screen, so there's an opportunity to potentially disable some of the FlatList gesture recognizers or something along those lines.
Am I over complicating things by going down that route, or is there a supported way to embed Pan/Zoom Views in FlatLists?
Related
I have a FlatList embedded in every screen of a react-native-tab-view, and I would like to disable the swipe of the react-native-tab-view in the area covered by this FlatList for a better user experience.
When reaching the end of the FlatList, the scroll propagates to the parent react-native-tab-view
GIF example of the scroll propagating to tab view
On Android, the scroll in this area is even sometimes considered as a swipe on the react-native-tab-view, which leads to hard times scrolling the FlatList.
I tried to find a way to catch touch events and stop propagation but I'm not very familiar with PanResponders and touch events captures.
Just use
<TabView
.....
swipeEnabled={false}
/>
I currently have a ScrollView/Flatlist containing 4 items with paging enabled. When rendered, each item covers the entire screen in portrait mode. On Android, when the user tries to swipe vertically from one item to another, this requires "large" swipe gestures.
I am trying to increase the "sensitivity" of the react native ScrollView so that the user requires smaller swipe gestures to switch from one item to another.
At the moment the switch to the next/previous page requires that roughly 50% of the target page is visible. I want to reduce this value so that the user does not need to do big swipe gestures.
Any suggestions on how I could fine-tune the props of the ScrollView/FlatList would be great!
In my app, I have horizontal FlatList which is used for swiping between several sub-pages of a screen. This works great.
However, on one of the pages, I have a Slider component. On iOS it works fine, but on Android, the parent ScrollView of the FlatList seems to "steal" the swipe gesture. I am only able to adjust the Slider by clicking very precisely on its thin line, but I cannot adjust it by sliding.
What I need is something like one of these
A view that wraps the Slider component and stops swipe gestures from being propagated to the parent ScrollView
A way to make the FlatList/ScrollView not consume swipes directly on elements that responds to horizontal swipes themself
Somehow adjust the area of which the Slider component will eat the touches around it (it's very small and hard to hit directly). I already tried adding a hitSlop prop, with no luck.
Any suggestions for a solution are very appreciated :)
Check example code and result here.
https://snack.expo.io/#esbenvb/mad-yogurt
I need a ListView or Table or any other custom component that can have infinite scrolling in both horizontal and vertical directions. For example, 10,000 rows and 10,000 columns. We have the react-native's FlatList component but it can be used for either vertical or horizontal but not for both. If the data is finite, we can go with implementing a vertical scrollView inside a horizontal scrollView or vice-versa. But as we are looking for infinite scrolling, we are not able to use scrollView as it tries to load the entire content when the app is opened and the memory consumption is very huge so that the app automatically crashes. Does anyone have any idea if there are any third party libraries that can scroll both vertically and horizontally and also can look after the performance? Actually, is that possible to build such a component on our own in react-native? If so, please tell me if you have any ideas.
I'm trying to implement a grid view menu, with horizontal background scroll of three images triggered by swipe gesture, so only the background images are scrolled while icons remain still. I investigated AQGridView, GMGridView, OHGridView, but they seem to not include this feature, so I decided to implement my own grid view with custom buttons placed in grid formation. My doubts are how to implement the background image scroll. I have searched for different solutions, but I'm not able to figure out how to solve it.
Many thanks
If I understand your question correctly you could make a view with 2 subviews: a) the grid of icons (UIImageView) and b) a scroll view with your background images in paging mode (UIScrollViewController).
Just make sure your icons do not receive touches, so that the scrollview gets the touches.
If you want to make the icons tap-able, then it's a little more complicated; you could create an invisible layer on top and then manually handle the touches, which will get complicated. Or, what I would do, place the icons as subviews on the plain scrollview, and then move the icons in the equal and opposite direction that the scrollview is moving in to create the illusion that the icons are standing still, this will simplest to implement but is a bit of a hack. Mathematically speaking you want to apply a transformation to the scrollview and apply the opposite transformation to the icons which are in the scrollview's coordinate system so that in the global coordinate system (the screen) your icons do not move.