Performance drop using useAnimatedScrollHandler

Description

I am noticing quite a considerable amount of lost frames when using the new useAnimatedScrollHandler hook as opposed to the ReanimatedV1 method, it is especially noticeable when pulling down on iOS and letting go to have the bounce back effect, or scrolling quickly.

Steps To Reproduce

reanimatedV2

import React from 'react';
import { Dimensions, View } from 'react-native';
import Animated, {
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const { width } = Dimensions.get('window');

export default function Facets() {
  const translationY = useSharedValue(0);
  const scrollHandler = useAnimatedScrollHandler((event) => {
    translationY.value = event.contentOffset.y;
  });

  const stylez = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: -translationY.value,
        },
      ],
    };
  });

  return (
    <View style={{ flex: 1 }}>
      <Animated.View
        style={[stylez, { position: 'absolute', zIndex: 10, width, height: 200, backgroundColor: 'red' }]}
      />
      <Animated.ScrollView
        contentContainerStyle={{ paddingBottom: 50, paddingTop: 150 }}
        onScroll={scrollHandler}
        scrollEventThrottle={1}
      >
        <View style={{ height: 1000, width }} />
      </Animated.ScrollView>
    </View>
  );
}

reanimatedV1

import React from 'react';
import { Dimensions, View } from 'react-native';
import Animated from 'react-native-reanimated';

const { width } = Dimensions.get('window');

export default function Facets() {
  const scrollOffset = React.useRef(new Animated.Value(0));
  const stylez = {
    transform: [{ translateY: Animated.multiply(scrollOffset.current, -1) }],
  };

  return (
    <View style={{ flex: 1 }}>
      <Animated.View
        style={[stylez, { position: 'absolute', zIndex: 10, width, height: 200, backgroundColor: 'red' }]}
      />
      <Animated.ScrollView
        contentContainerStyle={{ paddingBottom: 50, paddingTop: 150 }}
        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollOffset.current } } }])}
        scrollEventThrottle={1}
      >
        <View style={{ height: 1000, width }} />
      </Animated.ScrollView>
    </View>
  );
}

Package versions

    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-reanimated": "2.0.0-alpha.6",

[Razorholt]

is there a callback or listener to useAnimatedScrollHandler in ReaminatedV2? Like we have in regular Animated:

Animated.event(
   [{ nativeEvent: { contentOffset: { y: scrollY }}}], 
   {
      useNativeDriver: false,
      listener: event => {
      /* some logic */
      }, 
   }
)

[jakub-gonet]

Yep, Terry is right. You can try using prebuilt package (under NOTE section) but please, try it tomorrow 😄 We had some problems with creating the package due to case-sensitivity issues and it should be resolved in the next build.

Closing this for now, feel free to reopen if update doesn’t fix it.