Tinder bobble head

tinder-circle.js

import React from 'react';
import {
  Easing,
  Animated,
  Image,
  View,
  Text,
  StyleSheet,
  TouchableWithoutFeedback,
  Dimensions
} from 'react-native';
import uuid from 'uuid/v1';

const sizing = 100;

const {width} = Dimensions.get('window');
const SCALING = width / sizing + 0.5;
const EXPANDING_DURATION = 2000;

const ARMENIA_COLORS = {
  RED: 'rgb(215, 10, 31)',
  BLUE: 'rgb(6, 55, 157)',
  ORANGE: 'rgb(240, 167, 40)'
};

const styles = StyleSheet.create({
  center: {justifyContent: 'center', alignItems: 'center', flex: 1},
  image: {
    backgroundColor: 'transparent',
    borderRadius: sizing / 2,
    height: sizing,
    width: sizing
  },
  circles_container: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 10
  },
  image_cont: {
    borderColor: ARMENIA_COLORS.RED,
    borderWidth: 3,
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute'
  },
  expanding_circle: {
    borderColor: ARMENIA_COLORS.BLUE,
    backgroundColor: ARMENIA_COLORS.ORANGE,
    borderWidth: 2,
    alignItems: 'center',
    justifyContent: 'center',
    width: sizing,
    height: sizing,
    borderRadius: 600,
    position: 'absolute'
  }
});

const me = require('animations/assets/edgar-circle.jpg');

class ExpandingCircle extends React.Component {
  opacity = new Animated.Value(1);
  scaling_sizing = new Animated.Value(1);

  componentDidMount() {
    Animated.parallel([
      Animated.timing(this.scaling_sizing, {
        toValue: SCALING,
        duration: EXPANDING_DURATION,
        useNativeDriver: true
      }),
      Animated.timing(this.opacity, {
        toValue: 0,
        duration: EXPANDING_DURATION,
        useNativeDriver: true
      })
    ]).start(() => {
      this.props.finish();
    });
  }

  render() {
    const circle_background = {
      opacity: this.opacity,
      transform: [{scale: this.scaling_sizing}]
    };
    return (
      <Animated.View
        style={[styles.image, styles.expanding_circle, circle_background]}
      />
    );
  }
}

class TinderCircle extends React.Component {
  scaling_sizing = new Animated.Value(1);
  opacity = new Animated.Value(1);
  spring = new Animated.Value(1);

  state = {circles: new Map()};

  add_circle = () => {
    const {circles} = this.state;
    const id = uuid();
    circles.set(
      id,
      <ExpandingCircle key={id} finish={() => circles.delete(id)} />
    );
    this.setState({circles});
  };

  bounce = () => {
    Animated.timing(this.spring, {
      toValue: 0.85,
      duration: 100,
      useNativeDriver: true
    }).start(() => {
      this.add_circle();
      Animated.timing(this.spring, {
        toValue: 1.0,
        duration: 20,
        useNativeDriver: true
      }).start();
    });
  };

  componentWillMount() {
    const over_and_over = () => {
      setTimeout(() => {
        this.add_circle();
        over_and_over();
      }, EXPANDING_DURATION);
    };
    over_and_over();
  }

  render() {
    return (
      <Animated.View style={styles.center}>
        <View style={{}}>
          <TouchableWithoutFeedback onPress={this.bounce}>
            <View>
              <Animated.View style={[styles.image]}>
                <View style={styles.circles_container}>
                  {Array.from(this.state.circles.values())}
                </View>
              </Animated.View>
              <Animated.Image
                style={[
                  styles.image,
                  styles.image_cont,
                  {transform: [{scale: this.spring}]}
                ]}
                source={me}
              />
            </View>
          </TouchableWithoutFeedback>
        </View>
      </Animated.View>
    );
  }
}
export default TinderCircle;