Animating the contentOffset prop on a reanimated scrollview disables all gestures including touch events on IOS while the animation is running. The animation itself works fine and as soon as the animation is canceled the touch events start working again. Everything works fine on android.
Important packages:
"expo": "^51.0.18",
"expo-router": "~3.5.17",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1",
_layout.tsx:
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<GestureHandlerRootView style={{ flex: 1 }}>
...omitted
</GestureHandlerRootView>
</PersistGate>
</Provider>
);
ScrollView component:
const offsetX = useSharedValue<number>(0);
const animatedProps = useAnimatedProps(() => ({
contentOffset: {
x: offsetX.value,
y: 0
}
}));
useEffect(() => {
offsetX.value = withRepeat(withTiming(getOffsetXEndPosition() , { duration: 25000, easing: Easing.linear }), -1, true);
}, [xxx]);
<Animated.ScrollView
onTouchStart={() => cancelAnimation(offsetX)}
animatedProps={animatedProps}
horizontal
showsHorizontalScrollIndicator={false}
>
...omitted
</Animated.ScrollView>
It’s specifically adding an animation like ‘withTiming’ or ‘withSpring’ that causes the gestures to be disabled. Setting the offset value directly works fine.