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);