React Native Reanimated 2 conflict FlatList and PanGestureHandler

Question

I'm trying to create vertical flatlist with swipe to delete functionality. So every item of my flatlist additionaly handles by PanGestureHandler My problem is when I try to scroll my flatlist scroll doesn't work because of the conflict between scroll view animation and the pan gesture animation. I have tried to use simultaneousHandlers but it doesn't help. I also tried to use FlatList from react-native-gesture-handler and from react-native result is the same.

<View style={styles.container}>
            <Header data={{headerText: 'Contacts', leftIcon: 'arrow-left', line: true}}/>
            <FlatList
                ref={scrollRef}
                data={contacts}
                renderItem={({item}) => <Item simultaneousHandlers={scrollRef} {...{item}} />}
                bounces={false}
                showsVerticalScrollIndicator={false}
                style={{paddingLeft: wp('5%'), paddingTop: hp('2%')}}>
            </FlatList>
            <TouchableOpacity style={styles.touchableOpacity} onPress={() => navigation.navigate('AddContact')}>
                <View>
                    <Text style={styles.textButton}> Add Contact </Text>
                </View>
            </TouchableOpacity>
        </View>

Item:

<Animated.View style={[rTaskContainerStyle]}>
                    <Animated.View style={[styles.iconContainer, rIconContainerStyle]}>
                        <Icon name={'trash-2'} size={25} color={'red'} />
                    </Animated.View>
                    <View>
                    <PanGestureHandler {...simultaneousHandlers} onGestureEvent={panGestureHandler}>
                        <Animated.View style={[rStyle,{backgroundColor: '#FFFFFF'}]}>
                            <Text style={{color: '#09101D', fontFamily: 'SourceSansPro_600SemiBold', fontSize: 18}}>
                                {info.fullName}
                            </Text>
                            <Text style={{color: '#545D69', fontFamily: 'SourceSansPro_400Regular'}}>
                                {info.publicKey}
                            </Text>
                        </Animated.View>
                    </PanGestureHandler>
                    </View>
                </Animated.View>

Answer 1

You should add offset for pan-gesture. Your PanGestureHanler should be

<PanGestureHandler
  failOffsetY={[-5, 5]}
  activeOffsetX={[-5, 5]}
  onGestureEvent={gestureHandler}
>

It may help you.