Sample landing animations using react-native 0.8.0-rc new animation system

SampleLanding.js

/* @flow */
'use strict';

import React, { Animated, StatusBarIOS, StyleSheet, View, Text, TouchableOpacity, } from 'react-native';

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {pop: new Animated.Value(1)};
  }

  scaleAnimation() {
    const config = {velocity: 3, bounciness: 18};

    Animated.spring(this.state.pop, {
      toValue: 1,
      ...config,
    }).start();
  }

  render() {
    const animatedStyle = {
      transform: [
        {scale: this.state.pop},
      ],
    };

    return (
      <TouchableOpacity
        onPress={this.props.onPress}>
        <Animated.View style={[buttonStyles.container, animatedStyle, this.props.style]}>
          <Text style={[buttonStyles.text, this.props.textStyle]}>
            {this.props.children}
          </Text>
        </Animated.View>
      </TouchableOpacity>
    );
  }
}

var buttonStyles = StyleSheet.create({
  container: {
    backgroundColor: '#39393a',
    padding: 10,
  },
  text: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pop: new Animated.Value(1),
      logoSlide: new Animated.Value(0),
      titleSlide: new Animated.Value(0),
      descriptionSlide: new Animated.Value(0),
    };
  }

  componentWillMount() {
    StatusBarIOS.setStyle('default', true);
  }

  componentDidMount() {
    const popConfig = {velocity: 3, bounciness: 18};

    Animated.stagger('300', [
      Animated.spring(this.state.logoSlide, {
        toValue: 1,
        bounciness: 10,
        velocity: 20,
      }),
      Animated.spring(this.state.titleSlide, {
        toValue: 1,
        bounciness: 10,
        velocity: 10,
      }),
      Animated.spring(this.state.descriptionSlide, {
        toValue: 1,
        bounciness: 10,
        velocity: 3,
      }),
      Animated.sequence([
        Animated.delay(1000),
        Animated.spring(this.state.pop, {
          toValue: 1,
          ...popConfig,
        }),
      ]),
    ]).start();

    setTimeout(() => this.refs.signUpButton.scaleAnimation(), 3500);
  }

  render() {
    const slideInterpolateConfig = {
      inputRange: [0, 1],
      outputRange: [500, 0]
    };

    const logoStyle = {
      transform: [
        {scale: this.state.pop},
        {translateX: this.state.logoSlide.interpolate(slideInterpolateConfig)},
      ],
    };

    const titleStyle = {
      transform: [
        {translateX: this.state.titleSlide.interpolate(slideInterpolateConfig)},
      ],
    };

    const descriptionStyle = {
      transform: [
        {translateX: this.state.descriptionSlide.interpolate(slideInterpolateConfig)},
      ],
    };

    return (
      <View style={styles.container}>
        <View style={styles.topArea}>
          <Animated.Image style={[styles.brand, logoStyle]} source={require('image!img_rg_logo_landing')} />
          <Animated.Text style={[styles.title, titleStyle]}>Join the Revolution</Animated.Text>
          <Animated.Text style={[styles.description, descriptionStyle]}>We're still in the first minutes of the first day of the Internet revolution.</Animated.Text>
        </View>
        <View style={styles.buttonsArea}>
          <Button ref='signUpButton' onPress={() => this._onSignUpPress()} style={styles.signUpButton} textStyle={styles.signUpButtonText}>
            SIGN UP
          </Button>
          <Button ref='tourButton' onPress={() => this._onTourPress()} style={styles.tourButton} textStyle={styles.tourButtonText}>
            Take a tour
          </Button>
          <Text style={styles.alreadyAccount}>Already an account? Please&nbsp;
            <Text onPress={this._onLoginPress} style={{color: 'black', textDecorationLine: 'underline'}}>log in</Text>.
          </Text>
        </View>
      </View>
    );
  }

  _onSignUpPress() {

  }

  _onTourPress() {

  }

  _onLoginPress() {

  }
}


var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e5e6e7',
  },
  topArea: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonsArea: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    marginLeft: 20,
    marginRight: 20,
  },
  brand: {
    fontWeight: 'bold',
    fontSize: 20,
    textAlign: 'center',
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 20,
  },
  description: {
    fontSize: 15,
    textAlign: 'center',
    marginTop: 20,
  },
  tourButton: {
    backgroundColor: 'white',
    padding: 10,
    marginTop: 10,
  },
  tourButtonText: {
    color: 'black',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  alreadyAccount: {
    marginTop: 10,
    fontSize: 12,
    textAlign: 'center',
    color: '#888888',
  },
});

React.AppRegistry.registerComponent('SampleApp', () => App);