Issue
I have a list component that lets you add new items when you press a button, and I am able to scroll to the end automatically (smoothly) as expected when an item is added with LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); from LayoutAnimation from react-native. The issue is that I have been using react-native-reanimated for most of the other things in my app, so then using any type of Animation that is not from reanimated seems to break everything, so I have been trying to achieve the same behavior from LayoutAnimation but after reading the reanimated documentation I can’t seem to find a way. Does anyone know how I can go about this with react-native-reanimated?
Here is a snack of the working example with LayoutAnimation from plain react-native:
https://snack.expo.dev/@oscar3812/smooth-scrolling-on-list-addition
With smooth behavior, I mean that if you remove LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);, you’ll notice the screen flickers with each automatic scroll. Using LayoutAnimation keeps the bottom part of the screen at the same height without flickering, making the transition with the scroll more smooth.
I tried using Animated.ScrollView (from react-native-reanimated) with the layout paramater, as well as using Animated.View on other parts as well, and tried using withTiming and scrollTo from reanimated as well. None of them worked.
PS: This is only an issue on Android as iOS seems to handle Animations better.
OscarMpy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.