React-native-reanimated: Performance drop using useAnimatedScrollHandler

[owinter86]

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",

[terrysahaidak]

I think this is already resolved in https://github.com/software-mansion/react-native-reanimated/pull/1215

[owinter86]

@terrysahaidak ah nice, I didn't look thoroughly through the master commits it seems, I will patch it locally for now until it reaches the next alpha.

[terrysahaidak]

Let us know if it fixes this issue.

[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.