Issue with dragging when <Draggable> in <ScrollView>

[Nuss93]

The <Draggable> component works well when it's wrapped in a <View> element.

But when I insert it in a <ScrollView> element, the page scrolls, but my draggable component does not drag. Is there a way to use draggable within ScrollView?

[rameshparajuli]

same here: I used <Draggable> inside package react-native-zoomable-view <ReactNativeZoomableView> and it doesn't allow to move.

[muammadibal]

any fix yet?

[MohsinaliEMed]

same here

[allysonfield]

same here

[rajAmukhliS]

@MohsinaliEMed @allysonfield @muammadibal @Nuss93 @rameshparajuli

I have fixed it

This is because of gesture conflict of ScrollView and Draggable. And due to that conflict, ScrollView is responding to your clicks and gestures because ScrollView is parent and its gesture is dominant on gesture of Draggable. To make Draggable dominant You have to disable ScrollView when you attract with Draggable

If u want to fix it please follow the steps below

first of all I have created a state named as scroll and initially it is true

const [scroll, setScroll] = useState(true);

use this state to enable and disable scroll view as I did

<ScrollView
        ref={scrollRef}
        scrollEnabled={scroll}  //when scroll false scroll view gesture will be disable and vice versa 
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}>
....
</ScrollView>

now change value of scroll to achieve drag and scrolling together

const {width, height} = Dimensions.get('screen'); // height width from screen dimensions

<Draggable
            x={width - 70}
            y={height - 210}
            minX={5}
            minY={20}
            maxX={width - 5}
            maxY={height - 150}
            isCircle={true}
            renderColor={'red'}
            renderSize={63}
            onLongPress={() => {
              Vibration.vibrate(); // Vibration from react-native, i.e vibrate to make it easy to understand for user
              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={<View>
// children according to your requirements
</View>  }>
          </Draggable>

[stefandbd]

This workaround works for iOS but not for Android unfortunately