CODEWITHSUNDEEP
react-native
Schnecke
Schnecke

Reputation: 582

Disable scroll whilst scrolling in view react native

I have a couple of view components inside a scroll view but one view has a drawing function on a canvas i want to disable scrolling whilst drawing in the canvas but not on other. I am clueless any help would be appreciated.

<ScrollView>
<View>
    //allow scrolling while pulling on component
  </View>
  <View>
    <Canvas />
    //dont allow scrolling while pulling on component
  </View>
<View>
    //allow scrolling while pulling on component
  </View>
<View>
    //allow scrolling while pulling on component
  </View>
</ScrollView>

Upvotes: 0

Views: 3916

Answers (1)

Schnecke
Schnecke

Reputation: 582

export default function Component (){
  const [scrollEnabled, setScrollEnabled] = useState(true);
  return (
    <ScrollView scrollEnabled={scrollEnabled}>
      <View onPress={() => setScrollEnabled(false)} />
    </ScrollView>
  );
}

When touching component disable scroll and when not touching re-enable scroll.

reference: https://reactnative.dev/docs/scrollview#scrollenabled

Upvotes: 2

Related Questions