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)
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
});