Animation freeze / lags when using animated FlatList

[likern]

Description

If I use Animated FlatList Animated.createAnimatedComponent(FlatList) I see considerable animation freezes and lags.

Details

I'm implementing the new calendar component https://github.com/breeffy/react-native-monorepo based on Reanimated v2. The main idea is to have high-performant animations (like header month-year) purely based on scrolling position.

All calculations for animating things is done on UI thread using Reanimated v2 https://github.com/breeffy/react-native-monorepo/blob/20e503f3804d3945d5369d1d07a76b37ee10ead3/packages/calendars/src/CalendarScrollableMonths.tsx#L88

But still, when new month rendering happens I see animation freezes and lags. I can see it even on slow scrolling.

Screenshots

https://user-images.githubusercontent.com/842306/110146104-38489700-7deb-11eb-9cb9-9eef4d60c9b0.mp4

Steps To Reproduce

Run example app in monorepo (it contains component with issue).

Expected behavior

Animation on UI thread should not freeze if rendering / rerendering happens on JS thread.

Actual behavior

Animation freezes when additional components are rendered on JS thread using FlatList.

Snack or minimal code example

This branch https://github.com/breeffy/react-native-monorepo/pull/151 contains example application with reproduced issue.

Device

• Phone: Xiaomi Mi9T Pro
• OS: Android 10

Affected platforms

• OS: Android (not tested on iOS)

Package versions

• React: 16.13.1
• React Native: 0.63.4
• React Native Reanimated: 2.0.0
• NodeJS: 10.19.0

[github-actions[bot]]

Issue validator

The issue is valid!

[likern]

I want to add some additional notes.

https://github.com/wix/react-native-calendars (don't use Reanimated) runs without any freezes / lags even though it is doing more - it's constantly rerendering it's components based on onViewableItemsChanged() to show simplified year-month component when it can't keep up to render full month component.

https://user-images.githubusercontent.com/842306/110153175-c294f900-7df3-11eb-9704-ee5a477ecef8.mp4

If I use simple components it's kind of working, but as soon as I try to render full month (even one month) I see freezes / lags.

https://user-images.githubusercontent.com/842306/110153693-7302fd00-7df4-11eb-8f75-9dd064b79d72.mp4

[akinncar]

same here

[WoLewicki]

Does this issue still occur on the newest versions react-native-reanimated? I can see that the branch you mentioned in Snack or minimal code example is no longer available, so could you provide a simple repro if it is still the case?

[likern]

@WoLewicki Yes, still occurs on 2.3.1, I've just checked. This is a reproduction branch https://github.com/breeffy/react-native-monorepo/pull/151.

I have a special test app for testing purposes (also in monorepo).

1. Clone PR
2. Run yarn install
3. Run yarn build

then

4. Run yarn run "dev:android:0.66.1" to run example app on RN 0.66.1 on Android or 4.1 Go to desired RN version cd packages/mobile-0.66.1 4.2 Run yarn dev:start (allows run on TypeScript directly) 4.3 Run yarn android

[likern]

@WoLewicki I believe the reason is in this code https://github.com/breeffy/react-native-monorepo/blob/20e503f3804d3945d5369d1d07a76b37ee10ead3/packages/calendars/src/components/header/CalendarAnimatedHeader.tsx#L28

and this https://github.com/breeffy/react-native-monorepo/blob/20e503f3804d3945d5369d1d07a76b37ee10ead3/packages/calendars/src/components/header/CalendarAnimatedHeader.tsx#L39

I have to create long input / output lists for interpolation (for every month in range, in example it probably is 48 elements length, but not sure) and my guess it's not implemented efficiently.

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snippet of code, a snack or a link to a GitHub repository that reproduces the problem?

[WoLewicki]

Cannot the problem be the amount of computation you are applying on UI which makes the animation stutter since it has too much work to do? I think then there wouldn't be anything that we could do on the side of the library unfortunately. Or am I missing something?

[likern]

Cannot the problem be the amount of computation you are applying on UI which makes the animation stutter since it has too much work to do? I think then there wouldn't be anything that we could do on the side of the library unfortunately. Or am I missing something?

But here I provided video on Wix RN calendar, implemented purely on JS.

https://github.com/software-mansion/react-native-reanimated/issues/1792#issuecomment-791580950

And it doesn't have this freeze problem. While it also can't keep up to render full months. The scrolling animation itself more or less don't freeze.

So the question is not how to keep up to render all things. But don't freeze when see "blank screens" (which similar to what Wix does, but it uses simple components instead of native blank screen behaviour).

[Stevemoretz]

Cannot the problem be the amount of computation you are applying on UI which makes the animation stutter since it has too much work to do? I think then there wouldn't be anything that we could do on the side of the library unfortunately. Or am I missing something?

I have the same issue, it's not about the amount of computation even a single small computation in a FlatList item would cause this, I had to disable my simple opacity animation on FlatList scroll to make it work, even something as simple as a opacity animation with a simple interpolation function can cause this, you are right though using easier computations does actually help, but it's definitely a bug! even 2+2 sounds to be hard for it :)

You really need to investigate this further. Or at least warn people not to use this with FlatList as long as their items can go over 100.

[branaust]

+1