React-native-reanimated: Bad performance animating the height of a view

[robertcreaner]

Animating the height of a view when scrolling through a list is very slow and choppy. I've re-produced the issue here: https://snack.expo.io/@robbiecreaner/flatlist-onscroll-animation,-sticky-header,-pull-to-refresh

The issue on Android is very noticeable. IOS works "fine" but there is clearly some desync happening.

Is there anything that can be done to make it smoother?

[lucianomlima]

This is because height cannot be animated on native side.

[Fantasim]

I'm currently facing the same problem.
Why can't it be animated on native side?

In the documentation it's written :

No more “useNativeDriver” – all animations runs on the UI thread by default.

I expected that all styles property would work natively

[yanush]

You can use transform with scaleY instead

[niloufarMakhzani]

It's because height, you may use reanimated to solve this problem

[terrysahaidak]

Seems like it's more related to https://github.com/kmagiera/react-native-reanimated/issues/160

[BrendonSled]

I'm currently facing the same problem.
Why can't it be animated on native side?

In the documentation it's written :

No more “useNativeDriver” – all animations runs on the UI thread by default.

I expected that all styles property would work natively

https://facebook.github.io/react-native/docs/animations#caveats

Height or changes in flex box is not supported on the native thread

[niloufarMakhzani]

I suggest using react native reanimated, which is almost the same as
animated with height support

On Wed, Sep 18, 2019 at 9:40 PM Brendon Sled [e-mail]
wrote:

I'm currently facing the same problem.
Why can't it be animated on native side?

In the documentation it's written :

No more “useNativeDriver” – all animations runs on the UI thread by
default.

I expected that all styles property would work natively

https://facebook.github.io/react-native/docs/animations#caveats

Height or changes in flex box is not supported on the native thread

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/kmagiera/react-native-reanimated/issues/324?email_source=notifications&email_token=AEAVDQETBEGTCJWZMYN7HZ3QKJOHHA5CNFSM4H3KGZF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7AY3MI#issuecomment-532778417,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEAVDQHQEOLYIN25MIJ4IRTQKJOHHANCNFSM4H3KGZFQ
.

>

Thanks & regards
Niloufar.M

[papigers]

Any solution to this?
quote of my comment on #160:

I'm experiencing same issue on Android, using my own personal phone.
The scroll is jerky when the user scrolls and holds the screen. It works very smoothly though, when the scroll is initiated by a swift swipe without the user still touching the screen.

on iOS I don't see any problems.

[divonelnc]

I am having the same issue. Animating the height works fine with a swift momentum scroll, but it is very jerky when slowly scrolling up and down.

[jakub-gonet]

Heigh is a layout property, so it cannot be animated smoothly on the native side as it requires recalculation of the layout.

[terrysahaidak]

There were some other performance issues with onScroll on Android. Even when you use some translate properties to animate, there was still some delay. I'm not sure they are resolved – I don't think layout recalculation is the right issue here – that's why I linked this issue https://github.com/software-mansion/react-native-reanimated/issues/160

And based on recent comments – it's still a thing.

[jakub-gonet]

Thanks for follow up, I'll try to take a look at it in that case.

[terrysahaidak]

I think this is already resolved thanks to #1215