React Native Gesture Handler + Reanimated Flat List Scroll - reactjs

Question

I'm having a problem with react-native-gesture handler animation in a FlatList.
when i try to scroll on the flatList the behavior of PanGesture not trigger scroll event.
Reanimated Version - ~2.5
Flatlist
<FlatList
data={test}
ref={flatListRef}
ItemSeparatorComponent={Divider}
style={{
marginTop: 18,
}}
scrollEnabled
renderItem={({ item }) => {
return (
<ActionItem
simultaneousHandlers={flatListRef}
actions={[
{
type: 'UPDATE',
handlePress: () => {
console.log(item.id);
},
},
{
type: 'UPDATE',
handlePress: () => {
console.log(item.id);
},
},
]}
>
<View style={styles.container}>
<Text style={{}}>{item.name}</Text>
</View>
</ActionItem>
);
}}
/>
ActionItem
import { useTheme } from '#hooks';
import React from 'react';
import {
StyleSheet,
View,
Text,
Dimensions,
TouchableOpacity,
} from 'react-native';
import {
PanGestureHandler,
PanGestureHandlerGestureEvent,
} from 'react-native-gesture-handler';
import Animated, {
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
withTiming,
withSpring,
} from 'react-native-reanimated';
import { IActionItem } from './types';
import Edit from '#assets/svgs/icons/edit.svg';
const threshold = (-Dimensions.get('window').width - 18) * 0.05;
function ActionItem<T>({
children,
actions,
simultaneousHandlers,
}: IActionItem<T>) {
const [actionsWidth, setActionsWidth] = React.useState<number>(0);
const translateX = useSharedValue(0);
const theme = useTheme();
const gestures = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
onStart: () => {
translateX.value = withTiming(0);
},
onActive: (e) => {
if (e.translationX < 0) {
translateX.value = withSpring(e.translationX);
}
},
onEnd: (e) => {
const shouldHideActions = e.translationX > threshold;
if (shouldHideActions) {
translateX.value = withTiming(0);
} else {
translateX.value = withSpring(-actionsWidth);
}
},
});
const animatedStyles = useAnimatedStyle(() => {
return {
transform: [
{
translateX: translateX.value,
},
],
};
});
return (
<Animated.View style={styles.container}>
<Animated.View
style={styles.actionsContainer}
onLayout={(e) => {
setActionsWidth(e.nativeEvent.layout.width);
}}
>
{actions?.map((action, index) => {
return (
<TouchableOpacity
key={index}
onPress={action.handlePress}
style={[
{
marginRight: index !== actions.length - 1 ? 20 : 0,
marginLeft: index === 0 ? 20 : 0,
},
]}
>
{action.type === 'UPDATE' && <Edit />}
</TouchableOpacity>
);
})}
</Animated.View>
<PanGestureHandler
simultaneousHandlers={simultaneousHandlers}
onGestureEvent={gestures}
>
<Animated.View style={[animatedStyles, styles.action]}>
{children}
</Animated.View>
</PanGestureHandler>
</Animated.View>
);
}
const styles = StyleSheet.create({
container: {
width: '100%',
elevation: 10,
},
actionsContainer: {
position: 'absolute',
flexDirection: 'row',
alignItems: 'center',
height: '100%',
flex: 1,
right: 0,
},
action: {
backgroundColor: 'red',
},
});
export default ActionItem;
i'm using the flat list from React-Native-Gesture-handler and i'm passing the reference of flatlist to scroll work but doesn't work, anyone have some ideia why ?