A short introduction to animating shape in ReactNative

shape-animation.md

A short introduction to animating Shape in React Native

This note explains the basic idea of the animated chart in https://github.com/shuhei/Compare.

Before animation

We can draw a shape if we have:

<Shape d={path} />

where path is a string that represents drawing commands. We can create this string with Path from ReactNativeART.

Animation

To animate the shape, we can call the Component with different props again and again. However, this is not fast enough for smooth animation. Here comes Animated library. An animated component can take animated props and takes care of animation without React render().

const AnimatedShape = Animate.createAnimatedComponent(Shape);
const animatedPath = ???;

<AnimatedShape d={anjmatedPath} />

Animated path

To get an animated value of path string, I created a class that inherits AnimatedWithChildren and acts like built-in Animated value. This is a hack and will never be fast because it cannot be done without JavaScript.