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
- Call
scrollTo
insideonScroll
of auseAnimatedScrollHandler
. 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
- Fix app freezing when calling scrollTo inside onScroll (#1119) Description The issue has been described here #1108 The problem happens when we call scrollTo inside onScroll worklet. Inside iOS... — committed to software-mansion/react-native-reanimated by osdnk 4 years ago
- Fix scrollTo for horizontal scroll on Android (#1226) ## Description In `scrollTo` on Android, horizontal scroll views were not supported. This PR fixes it. You can create a horizontal scroll v... — committed to software-mansion/react-native-reanimated by karol-bisztyga 4 years ago
- fix: :construction: Horizontal scrolling not working on Android For https://github.com/software-mansion/react-native-reanimated/issues/1108 Does not work on Android — committed to DrChrispoper/contacts by deleted user 4 years ago
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.