Flip Animation.

flip.js

var ViewReactClass = React.createClass({
   getInitialState: function() {
      return {
        panX: new Animated.Value(0),
        panY: new Animated.Value(0),
      };
   },
   
   _animateOpacity: function() {
    LayoutAnimation.easeInEaseOut();
    Animated.timing(this.state.panX, {
      toValue: 180,
      duration: 1000,
    }).start();

    LayoutAnimation.easeInEaseOut();
    Animated.timing(this.state.panY, {
      toValue: 180,
      duration: 1000,
    }).start();
   },

   render: function() {
    var frontOpacity = this.state.panX.interpolate({inputRange: [0, 90, 180], outputRange: [1, 0.5, 0]});
    var backOpacity = this.state.panY.interpolate({inputRange: [0, 90, 180], outputRange: [0, 0.5, 1]});
    return(
      <View style={styles.container}>
          <View style={styles.BoxContainer}>
            <TouchableWithoutFeedback onPress={this._animateOpacity}>
              <View>
                <Animated.View style={[
                  {
                    transform: [
                      {
                        perspective: 850,
                      },
                      {
                        rotateY: this.state.theta.interpolate({inputRange: [0, 180], outputRange: ['0deg', '180deg']})
                      },
                    ]
                  },
                  {
                    position: 'absolute',
                    top: 0,
                    bottom: 0,
                    right: 0,
                    left: 0,
                    width: 300,
                    height: 300,
                    marginHorizontal: 40,
                    marginVertical: 150,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: 'red',
                    backfaceVisibility: 'hidden',
                  }
                ]}>
                  <Text style={styles.text}>1</Text>
                </Animated.View>
                <Animated.View style={[
                  {
                    transform: [
                      {
                        perspective: 850,
                      },
                      {
                        rotateY: this.state.theta.interpolate({inputRange: [0, 180], outputRange: ['180deg', '360deg']})
                      },
                    ]
                  },
                  {
                    top: 0,
                    bottom: 0,
                    right: 0,
                    left: 0,
                    position: 'absolute',
                    width: 300,
                    height: 300,
                    marginHorizontal: 40,
                    marginVertical: 150,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: 'blue',
                    backfaceVisibility: 'hidden',
                  }
                ]}>
                  <Text style={styles.text}>2</Text>
                </Animated.View>
              </View>
            </TouchableWithoutFeedback>
          </View>
      </View>
    );
   }
});