Loading animation

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

let colors = {
  green: '#11DEA8',
  red: '#F84343',
  blue: '#1A7FE9'
}

class loading extends Component {
  constructor(props) {
    super(props)
    this.state = {
      shape: 0,
      scale: new Animated.Value(1)
    }

    this.animateDown = this.animateDown.bind(this)
    this.animateUp = this.animateUp.bind(this)
    this.style = this.style.bind(this)

    this.rotate1 = this.state.scale.interpolate({
      inputRange: [0, 1],
      outputRange: ['-45deg', '0deg']
    });

    this.rotate2 = this.state.scale.interpolate({
      inputRange: [0, 1],
      outputRange: ['-45deg', '-90deg']
    });

    this.rotate3 = this.state.scale.interpolate({
      inputRange: [0, 1],
      outputRange: ['45deg', '0deg']
    });

    this.blueRed = this.state.scale.interpolate({
      inputRange: [0, 1],
      outputRange: [colors.red, colors.blue],
      extrapolate: 'false'
    });

    this.greenBlue = this.state.scale.interpolate({
      inputRange: [0, 1],
      outputRange: [colors.blue, colors.green],
      extrapolate: 'false'
    });

    this.redGreen = this.state.scale.interpolate({
      inputRange: [0, 1],
      outputRange: [colors.green, colors.red],
      extrapolate: 'false'
    });
  }

  componentDidMount() {
    this.animateDown()
  }

  animateDown() {
    Animated.spring(this.state.scale, {
      toValue: 0,
      tension: 120,
      friction: 15,
    }).start(() => {
      this.setState({shape: (this.state.shape + 1) % 6})
      this.animateUp()
    })
  }

  animateUp() {
    Animated.spring(this.state.scale, {
      toValue: 1,
      tension: 80,
      friction: 6,
    }).start(() => {
      this.setState({shape: (this.state.shape + 1) % 6})
      this.animateDown()
    })
  }

  style() {
    switch (this.state.shape) {
      case 0: return [
        styles.triangle, {
          borderBottomColor: this.redGreen,
          transform: [
            {'scale': this.state.scale},
            {'rotate': this.rotate1}
          ]
        }]
      case 1: return [
        styles.square, {
          backgroundColor: colors.green,
          transform: [
            {'scale': this.state.scale},
            {'rotate': this.rotate2}
          ]
        }]
      case 2: return [
        styles.square, {
          backgroundColor: this.greenBlue,
          transform: [
            {'scale': this.state.scale},
            {'rotate': this.rotate1}
          ]
        }]
      case 3: return [
        styles.circle, {
          backgroundColor: colors.blue,
          transform: [
            {'scale': this.state.scale}
          ]
        }]
      case 4: return [
        styles.circle, {
          backgroundColor: this.blueRed,
          transform: [
            {'scale': this.state.scale}
          ]
        }]
      case 5: return [
        styles.triangle, {
          borderBottomColor: colors.red,
          transform: [
            {'scale': this.state.scale},
            {'rotate': this.rotate3}
          ]
        }]
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.View style={this.style()} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  triangle: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'red'
  },
  square: {
    width: 100,
    height: 100,
  },
  circle: {
    width: 100,
    height: 100,
    borderRadius: 100/2,
  }
});

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