Conflict between ScrollView and swipeable item when implementing Uber Swipe to Delete

[orhsgfsf]

Hello, thanks for the video with the amazing content.

When I tap the item inside the ScrollView, it can only swipe left or right but cannot scroll up and down. I know it's a problem about the PanGestureHandler but I have no idea how to solve it. Is there anyone can help? Thank you very much.

Here is the code:

const SwipeToDelete = (props) => {
    ...
    const Item = (props) => {
        ...
        return (
            <Animated.View>
                <View style={styles.actionBackground}>
                    <TouchableWithoutFeedback onPress={(onPressRemoveItem)}>
                        <Action
                        ...
                        />
                    </TouchableWithoutFeedback>
                </View>
                <PanGestureHandler {...gestureHandler}>
                    <Animated.View style={{ height, transform: [{ translateX }] }}>
                        ...
                   </Animated.View>
                </PanGestureHandler>
            </Animated.View>
        );
    };

    return (
        <ScrollView>
            ...
            <FlatList
                data={data}
                renderItem={({ item }) => (
                <Item
                ...
                />)}
            />
        </ScrollView>
    );
};

[ibealec]

I've been struggling with this, as well as some other issues. I know that this isn't a fix, but you may want to check out the React native gesture handler swipeable component.

Then you can build on top of it with elements from the Uber eats component.

[terrysahaidak]

Check out swipable item example of Reanimated2 in the example folder, there are some props on PanGestureHandler I used to fix that issue.