CODEWITHSUNDEEP
react-nativereact-animatedlayout-animation
woodpav
woodpav

Reputation: 2027

react-native: LayoutAnimation and useNativeDriver: true for flex

In the past, I have used LayoutAnimation.scaleXY to animate the flex of a View at a very high framerate. Now, I want to use Animated to animate flex and achieve a similar high framerate.

I know I cannot use useNativeDriver: true to animate flex.

Does LayoutAnimation always run animations natively? If so, how can it run a flex animation while Animated with useNativeDriver: true cannot?

Is there a way around this? I want to run my flex animation in parallel with many other animations (e.g. opacity, translate, and scale) and without useNativeDriver: true the animation is unacceptably choppy.

P.S. My question addresses flex but are there any notable differences for height and/or width?

Upvotes: 2

Views: 1030

Answers (1)

sdfsdf
sdfsdf

Reputation: 5590

According to this article, "LayoutAnimation works by identifying views by their unique key, computing their expected position, and relying on the underlying native framework (CoreAnimation on iOS) to animate the change.", so apparently LayoutAnimation always runs animations natively.

In the Apple docs, there are two animation frameworks, UIKit and Core Animation (might be similar for Android), Core Animation being more powerful than UIKit.

So if I had to guess, LayoutAnimation can animate flex while Animated cannot because LayoutAnimation uses Core Animation while Animated uses UIKit.

flex is different than height/width because flex is always a fraction of the parent container (e.g. two Views with flex: 1 wrapped inside a parent View will each take up 1/2 the length in the direction of flexDirection).

Upvotes: 4

Related Questions