How does Animated.Component / createAnimatedComponent(Component) differ from Component?

Question

We are trying to figure out cause of following issue from styled-components project: https://github.com/styled-components/styled-components/issues/389

There were some changes made to refs + setNativeProps that broke animation in one place, assumingly because some animated related information is not being passed down correctly.

Hence the question to understand how createAnimatedComponent alters initial component, whats added? What could cause animation to break if not passed down correctly?

Please provide ideas / detailed answer if you know what could be causing this issue.

UPDATE Breaking change related to the issue occurred somewhere within this file for reference innerRef passes down ref, isTag function checks if it is a native component.

Answer 1

animatable components can be animated. View, Text, and Image are already provided, and you can create custom ones with createAnimatedComponent. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.

https://facebook.github.io/react-native/docs/animated.html