Issue with dragging when <Draggable> in ScrollView or FlatList

[adrian19hub]

Hi everyone, When the draggable is in ScrollView or FlatList they dont show on the screen, as if hidden. even with high zIndex The issue doesn't appear when using standard view. this is the code:

const DriversList: React.FC<{ data: IPublicDriver[] }> = ({ data }) => {
    const { t } = useTranslation();

    const [scroll, setScroll] = React.useState(true);
    const scrollRef = React.useRef<ScrollView>(null);

    return (
        <ScrollView
            ref={scrollRef}
            scrollEnabled={scroll} //when scroll false scroll view gesture will be disable and vice versa
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
        >
            {data.map((driver, index) => (
                <View>
                    <Draggable
                        onLongPress={() => {
                            setScroll(false); // important step to disable scroll when long press this button
                        }}
                        onRelease={() => {
                            setScroll(true); // important step to enable scroll when release or stop drag
                        }}
                        children={<BaseText>{driver.nickName}</BaseText>}
                    />
                </View>
            ))}
        </ScrollView>
    );
};

Thank you

[rizki-tabist]

I think you can use this https://www.npmjs.com/package/react-native-draggable-flatlist for Flatlist