AnimatedComponent.js

import React, { Component } from 'react';
import {
  Text,
  View,
  Image,
  Animated,
  Easing,
} from 'react-native';

const ALL_PROPERTIES = ['translateX', 'translateY', 'translateZ', 'rotateX', 'rotateY', 'rotateZ', 'scale'];


export class AnimatedView extends Component {
  constructor(props, context) {
    super(props, context);

    this.properties = [];

    ALL_PROPERTIES.forEach((prop) => {
      if(typeof props[prop] !== 'undefined') {
        this.properties.push(prop);
        this[prop] = new Animated.Value(props[prop]);
      }
    });
  }

  shouldComponentUpdate(nextProps) {
    let shouldUpdate = true;

    this.properties.forEach((prop) => {
      if(this.props[prop] !== nextProps[prop]) {
        shouldUpdate = false;
        this.animate(this[prop], nextProps[prop], nextProps);
      }
    });

    return shouldUpdate;
  }

  animate(animatedValue, toValue, {duration, easing}) {
    Animated.timing(animatedValue, {
      toValue,
      duration: duration || 300,
      easing: easing ? Easing[easing] : Easing.sin
    }).start();
  }

  getTransform() {
    return this.properties.map((prop) => {
      let animatedValue = this[prop];

      if(prop.indexOf('rotate') === 0) {
        animatedValue = animatedValue.interpolate({
          inputRange: [-360, 0, 360],
          outputRange: ['-360deg', '0deg', '360deg'],
        });
      }

      return {
        [prop]: animatedValue
      };
    });
  }

  render() {
    let {children, duration, easing, style, ...props} = this.props;
    let transform = this.getTransform();

    ALL_PROPERTIES.forEach((prop) => {
      delete props[prop];
    });

    return (
      <Animated.View {...props} style={[style, {transform}]}>
        {children}
      </Animated.View>
    );
  }
}