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

Screenrecorder-2021-03-05-19-40-45-338.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 breeffy/react-native-monorepo#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]

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.

Screenrecorder-2021-03-05-20-14-53-633.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.

simple.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 breeffy/react-native-monorepo#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]

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?