CODEWITHSUNDEEP
react-nativereact-animatedreact-native-scrollviewpanresponder
Can Poyrazoğlu
Can Poyrazoğlu

Reputation: 34780

React Native ScrollView prevent/allow scrolling on scroll start event

I have a ScrollView (actually Animated.ScrollView) that I'd like to decide whether to allow vertically scroll or not on scroll start, based on some states of inner components. I know there is a scrollEnabled property which works but the scroll view contains some components that that a few frames to render and changing scrollEnabled property based on inner views' interactions cause a re-render, which drops a few frames and because of the nature of my app needing to change this property based on some animation/smooth scrolling of the inner views, those dropped frames cause a negative user experience.

I've also tried preventDefault of the scroll begin drag event but nothing changed (it allows scrolling regardless of I call it or not).

How can I decide whether or not to allow scrolling of scroll view dynamically on scroll start without a state/props update (which causes a re-render of an expensive view tree, dropping frames)? Something like pan responder's onMoveShouldSetPanResponder[Capture] events might be of great help but returning false from them just don't work (it captures and scrolls regardlessly even though they are called). (I'm on React Native 0.64)

Upvotes: 1

Views: 3281

Answers (1)

Can Poyrazoğlu
Can Poyrazoğlu

Reputation: 34780

After reading the post in https://codedaily.io/courses/Master-React-Native-Animations/Using-and-Understanding-setNativeProps I solved it by setting native props on scroll view (that I reference directly using a ref) instead of updating state, preventing a re-render:

this.state.scrollView.current?.setNativeProps({
    scrollEnabled: false
});

Upvotes: 4

Related Questions