snowflakes.ios.js

snowflakes.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

import React, {Component} from 'react-native';

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Animated
} = React;

const MAX_DROPPED = 100;

class ExplodingSnowflakes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flakes: [],
    }
  }
  componentDidMount() {
    let lastFlakeId = 0;

    // here we randomly create new flakes every so often
    const tick = () => {
      if (lastFlakeId > MAX_DROPPED) return;

      const translateY = new Animated.Value(0);
      const translateX = new Animated.Value(~~(Math.random()*400));
      const flakes = [...this.state.flakes, {
        id: ++lastFlakeId,
        transform: [ { translateX }, { translateY }, ]
      }];

      Animated.timing(
        translateY,
        { toValue: 900,
          duration: 8000 }
      ).start();

      this.setState({flakes});
      setTimeout(tick, 400 + ~~(Math.random() * 600));
    }
    tick();
  }

  render() {
    const {flakes} = this.state;

    return (
        <View style={[styles.container]}>
          {flakes.map( ({id, transform}, index) =>
            <Animated.View
              key={id}
              style={[styles.flake, {transform}]}>
            </Animated.View>)}
        </View>
    );
  }
}

var styles = StyleSheet.create({
  flake: {
    position: 'absolute',
    top: -10,
    left: 0,
    height: 10,
    width: 10,
    backgroundColor: '#ff00ff'
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

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