createAnimatedComponent について

ReactNative において独自コンポーネントにアニメーションを付与するには、そのコンポーネントは Animated.createAnimatedComponent HOC によって「Animated」なコンポーネントにする必要がある。

import { Animated } from 'react-native';
import RawComponent from './RawComponent';

const AnimatedComponent = Animated.createAnimatedComponent(RawComponent);

Animated になったコンポーネントは、その props の各要素と、 style としての値が入っているであろう場所を見にいって、そこに Animated.Value のインスタンスがないかをチェックする。 Animated.Value なインスタンスを見つけた場合には、それをアニメーションの設定に従って、良い感じに随時設定しながら、中身のコンポーネントをレンダーする、みたいなことをやってくれる。

さらに、もし中身のコンポーネントが setNativeProps を実装している場合には、それを直で呼び出して、re-render によるオーバーヘッドを可能な限り減らせるような実装になっている。模様。

参考

createAnimatedComponent

www.codedaily.io