react-native-reanimated: App freezes when calling `scrollTo` from `useAnimatedScrollHandler`

Description

I have two ScrollViews, one of them with a useAnimatedScrollHandler. When this handler’s onScroll event is fired, the worklet calls the new function scrollTo from #936 on the other ScrollView.

This seems to freeze the whole app, at least in the simulator. The UI becomes unresponsive. Might be an infinite loop of the native thread.

Steps To Reproduce

  1. Call scrollTo inside onScroll of a useAnimatedScrollHandler. This is the scenario of #949, which should be possible with #936.

Expected behavior

Both ScrollViews should scroll.

Actual behavior

App seems to freeze.

Snack or minimal code example

import Animated, {
  useAnimatedScrollHandler,
  scrollTo,
  useAnimatedRef,
} from 'react-native-reanimated';
import {View, Text, SafeAreaView} from 'react-native';
import React, { useRef, useState } from 'react';

export default function OnScrollScrollTo(props) {

  const svStyle = {
    height: 70,
    flexGrow: 0,
  };

  const itemStyle = { padding: 20 };

  const [state, setState] = useState(0);
  const sv1 = useAnimatedRef();
  const sv2 = useRef();
  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollTo(sv1, event.contentOffset.x * 0.5, 0, true);         // if this is commented out, the app runs fine
      setState(event.contentOffset.x);
    },
  });

  return (
    <>
      <SafeAreaView></SafeAreaView>
      <Text>{state}</Text>
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'flex-start',
        }}>
        <Animated.ScrollView ref={sv1} style={svStyle} horizontal>
          {[...Array(10).keys()].map(x => <Text key={x} style={itemStyle}>{x}</Text>)}
        </Animated.ScrollView>
        <Animated.ScrollView ref={sv2} style={svStyle} horizontal
                             onScroll={scrollHandler} scrollEventThrottle={1}
                             >
          {[...Array(20).keys()].map(x => <Text key={x} style={itemStyle}>{x}</Text>)}
        </Animated.ScrollView>
      </View>
      <SafeAreaView></SafeAreaView>
    </>
  );
}

Package versions

  • React: 16.13.1
  • React Native: 0.63.1
  • React Native Reanimated: 2.0.0-alpha.5

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 1
  • Comments: 17 (5 by maintainers)

Commits related to this issue

Most upvoted comments

I don’t think that creating a new issue is needed. I’ll forward it to the team.

@oguzhanali glad to test it with alpha 6 as soon as it is out.