PanGesturHandler in flatlist/scrollview: parent element won't scroll.

[leurs247]

Hi all,

I have a Animated.View wrapped in a PanGestureHandler. It's a swipeable component which swipes in the horizontal direction. I have a list that is rendered inside a flatlist (previously a scrollview), and every item in the flatlist is wrapped with this PanGestureHandler component. The thing I want to achieve is that every item in the flatlist should be swipeable.

The swipeable component works, but the flatlist doesn't scroll. The same behaviour occurs with a scrollview. I can swipe the components but I can't scroll the flatlist.

I've found a (possible?) solution by setting activeOffsetX to 0 and activeOffsetY to [-500, 500], this way within the Y range of -500, 500, the PanGestureHandler is not activated but the flatlist is.

Problem is: every item in the flatlist has a different height, they are not all the same. For now, -500, 500 does the trick but the problem is I will possible get items in the list that have a height > 500.

a) Is this the correct solution for this problem (using the activeOffsetY)?
b) How can I dynamically set the activeOffsetY range for each individual component?

[Fearnbuster]

a) Is this the correct solution for this problem (using the activeOffsetY)?

I can't think of any reason why it isn't a valid solution.
I would say that if it works for your particular case, then that's all you need.

Problem is: every item in the flatlist has a different height, they are not all the same. For now, -500, 500 does the trick but the problem is I will possible get items in the list that have a height > 500.

b) How can I dynamically set the activeOffsetY range for each individual component?

If overcompensating works right now, then why can't you just do the same thing only with a much larger value (one that you know will never be reached)?
For example: [-Infinity, Infinity]

[Fearnbuster]

Correction, don't use [-Infinity, Infinity]; It causes the PanGestureHandler to throw an error.
However, you could still use a very large range such as: [-10000, 10000]

[fkapsahili]

I had the same issue on iOS with a PanGestureHandler on every single item of a FlatList nested in a ScrollView. For me, it solved the issue by setting the values activeOffsetX={-100} activeOffsetY={500}.

[Tinkvision]

I have the same issue and put activeOffsetY make the FlatList Scroll works but i lost my swipe on item (translateX).

[ShaMan123]

#1034

[jgonet]

simultaniousHandlers passed to scrollView should solve this problem. Keep in mind you have to use the patch from #1034 to make it work.

Please report back if you managed it to work, if you still have problems please reply, we'll try to figure something out.

[andropangani]

Try lists from import {FlatList, ScrollView} from "react-native-gesture-handler";