Playground.js

/**
 * @providesModule Playground
 */
'use strict';

var React = require('react-native');
var {
  Animated,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var FadeInView = React.createClass({
  getInitialState: function() {
    return {
      firstAnim: new Animated.Value(0),
      secondAnim: new Animated.Value(0),
    }
  },

  componentDidMount: function() {
    Animated.timing(
      this.state.firstAnim,
      {
        toValue: 200,
        duration: 2000,
        useNativeDriver: true,
      },
    ).start();
    Animated.timing(
      this.state.secondAnim,
      {
        toValue: -200,
        duration: 4000,
        useNativeDriver: true,
      },
    ).start();
  },

  render: function() {
    return (
      <Animated.View   // Special animatable View
        style={{
          translateX: Animated.add(this.state.firstAnim, this.state.secondAnim),
        }}>
        {this.props.children}
      </Animated.View>
    );
  }
});

var Playground = React.createClass({

  getInitialState: function() {
    return {
      show: true,
    }
  },

  render: function() {
    return (
      <View>
        <TouchableHighlight onPress={() => {
            this.setState((state) => (
              {show: !state.show}
            ));
          }}>
          <View style={styles.content}>
            <Text>Press to {this.state.show ? 'Hide' : 'Show'}</Text>
          </View>
        </TouchableHighlight>
        {this.state.show && <FadeInView>
          <View style={styles.content}>
            <Text>FadeInView</Text>
          </View>
        </FadeInView>}
      </View>
    );
  }
});

var styles = StyleSheet.create({
  content: {
    backgroundColor: 'deepskyblue',
    borderWidth: 1,
    borderColor: 'dodgerblue',
    padding: 20,
    margin: 20,
    borderRadius: 10,
    alignItems: 'center',
  },
});

module.exports = Playground;