React-native-reanimated: List of properties natively supported by react-native-reanimated

[Fantasim]

Hi,

I'm trying to find the list of style properties natively supported by this library, anyone can put it there?

Thank you

[wcandillon]

I personally refer to this list: https://github.com/kmagiera/react-native-reanimated/blob/82f6608799a2ea1667bb8c801e3bf9cf6ee1a144/src/ConfigHelper.js

[yolpsoftware]

In this code, there are two different types of properties:

• Styles allowed to be direcly updated in UI thread.
• Whitelist of view props that can be updated in native thread via UIManagerModule.

Is this difference explained somewhere in the docs?

I suppose the first type is the list of the most basic properties, those that can be used in Reanimated without too much worries about performance. However, the second type seems to be much more sensitive to performance. I'm currently dealing with an app that tries to "reanimate" some padding values, and I'm getting a huge performance drop due to constant callbacks over the bridge. It seems the changes in padding trigger layout updates on the JS thread, so I'm wondering under what circumstances we can animate the properties of the second type.

[Fantasim]

@yolpsoftware Exactly when I figured out that I decided to come back on normal Animated from React-Native and always use transform/opacity to trick the things I wanted to do, to keep staying on the native thread.

[yolpsoftware]

@Fantasim But why are the other properties like padding and height in the list in the source code linked by wcandillon?

Moreover, in Reanimated's examples there is the widthandheight example (or similar name, can't look it up right now). In this example, width, height and even fontSize seem to be animated on the native thread.

Looking for more info. @wcandillon, @kmagiera can you give us some hints about this?

[AdamGerthel]

I'd also like to see some clarification on this (see https://github.com/software-mansion/react-native-reanimated/issues/588). I'm looking at reanimated in hopes to overcome the limitations of Animated but it's not clear to me whether or not that's possible.

[kmagiera]

Reanimated supports all native view properties. We don't have any list at the moment but there are plenty of different examples in the example app illustrating a number of different properties being animated (such as borders, colors, flex etc). Note that for layout related props there is an additional layout step which needs to be performed in native. Layout props can be animated using reanimated without going through the JS bridge but animating these may still not be as performant as animating other props just because of that additional layout step which in some cases may need to recalculate and update a dozen of views.

[yolpsoftware]

Thanks @kmagiera, this is very helpful.