[ScrollView] Use `onScroll` without event throttling

I want to use the onScroll handler to setState another component in relation to the ScrollView’s contentOffset changing its value.

But the throttling of onScroll causes noticeable jumps. Sometimes the component that has setState called on it will never even update until much later on.

Is there a better way to achieve what I want?

[marcshilling]

@zoharlevin nope, ended up changing our design requirements because we couldn’t get the performance 😦

@aleclarson yes, the problem is still apparent in a bundled release build.

Unless I’m missing something, I think this example is an example where React Native is just not gonna cut it performance-wise. Will have to drop down to a native scroll view.

[yamill]

I think what you’re looking for is something like this:

onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.yValue}}}]
)}

You can then animate your view using the state values & interpolate. I do this for a pull to refresh animation inside my renderHeader function:

<View style={{height: 100, justifyContent: 'center', alignItems: 'center', marginTop: -100}}>
              <Animated.View style={{
                backgroundColor: colors.white,
                width: 40,
                height: 40,
                borderRadius: 20,
                alignItems: 'center',
                justifyContent: 'center',
                opacity: this.state.yValue.interpolate({ inputRange: [-80,0], outputRange: [1, 0]}),
                transform: [
                  {scale: this.state.yValue.interpolate({ inputRange: [-80,0], outputRange: [1, .5]}),
                extrapolate: 'extend'}
                ]}}>
                <Text style={{color: colors.black, fontSize: 16}}>RCT</Text>
              </Animated.View>
 </View>