React Native Animation Performance Test

PerfTest.js

'use strict';

import React, {
  Component,
  Animated,
  Easing,
  Dimensions,
  StyleSheet
} from 'react-native';

import Art, {
  Surface,
  Shape,
  Path,
} from 'ReactNativeART';

const {
  width: deviceWidth,
  height: deviceHeight
} = Dimensions.get('window');
  
const AnimatedShape = Animated.createAnimatedComponent(Shape);

const AnimatedCircle = React.createClass({displayName: "Circle",
  render() {
    let radius = this.props.radius;
    let path = Path().moveTo(0, -radius)
        .arc(0, radius * 2, radius)
        .arc(0, radius * -2, radius)
        .close();
    return React.createElement(AnimatedShape, React.__spread({},  this.props, {d: path}));
  }
});

const NUM_CIRCLES = 100;
  
const getRandomInt = (min, max) => Math.floor(Math.random() * (max - min)) + min;

class PerfTest extends Component {
  translateCircle(y, x, translate) {
    const move = () => {
      const newY = getRandomInt(y-50, y+50);
      const newX = getRandomInt(x-50, x+50);

      Animated.timing(translate, {
        toValue: {
          x: getRandomInt(x, newX),
          y: getRandomInt(y, newY)
        },
        duration: 8000,
        easing: Easing.elastic(1),
      }).start();

      setTimeout(move, 8000);
    }

    return move();
  }

  renderCircle() {
    return [...Array(NUM_CIRCLES).keys()].map(() => {
      const size = getRandomInt(0, 10);
      const y = getRandomInt(0, deviceHeight);
      const x = parseInt(getRandomInt(0, deviceWidth));
      const translate = new Animated.ValueXY({x: x, y: y});

      this.translateCircle(y, x, translate);

      return (
        <AnimatedCircle
          key={ i }
          x={ translate.x }
          y={ translate.y }
          radius={ size }
          scale={ 0.3 }
          fill={ 'rgba(0,0,0,0.1)' }
          opacity={ 1 }
        />
      );
    })
  }

  render() {
    return (
      <Surface style={ styles.surface } width={ deviceWidth } height={ deviceHeight }>
        { this.renderCircles() }
      </Surface>
    );
  }
}

const styles= StyleSheet.create({
  surface: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
});

AppRegistry.registerComponent('PerfTest', () => PerfTest);