React Native - Performance difference between Animated.View vs regular View component

Question

Are there any performance impact when using animated components i.e Animated.View vs using regular component i.e View in react native if there are 0 animations involved?

code example:

<View>
    <Text>asd</Text>
</View>

Vs

<Animated.View>
    <Text>asd</Text>
</Animated.View>

I have never seen people mention any performance impact when using Animated components but then again if there are none, why hasn't React developers make all components Animated by default.

Answer 1

Whenever we have a component in which we update the Native View frequently using inline styles, using Animated.View along with the optional native driver saves a lot of re-renders.

When we use Animated.View, the following process takes place behind the hood:

• On animation start, requestAnimationFrame is fired in JS
• New positions are calculated in JS
• JS serializes new position values and sends them over to the react-native bridge
• On the other end of the bridge, Java (android) and C# (iOS) deserializes it and updates underlying Native View
• The frame is then updated on the screen.

As we can see, Animated.View styles don't trigger a re-render of React Native Components, that is why their use should be preferred over <View /> in such situations to avoid wasted renders.

Ref: [https://tech.unacademy.com/10-ways-to-avoid-wasted-renders-in-react-native-app-part-2/][1]