text: /**
   * Copyright (c) Facebook, Inc. and its affiliates.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   *
   * @format
   * @flow
   */
  
  'use strict';
  
  const React = require('react');
  const {Animated, StyleSheet, Text, View} = require('react-native');
  
  class Flip extends React.Component<{}, $FlowFixMeState> {
    state = {
      theta: new Animated.Value(45),
    };
  
    componentDidMount() {
      this._animate();
    }
  
    _animate = () => {
      this.state.theta.setValue(0);
      Animated.timing(this.state.theta, {
        toValue: 360,
        duration: 5000,
        useNativeDriver: false,
      }).start(this._animate);
    };
  
    render() {
      return (
        <View style={styles.flipCardContainer}>
          <Animated.View
            style={[
              styles.flipCard,
              {
                transform: [
                  {perspective: 850},
                  {
                    rotateX: this.state.theta.interpolate({
                      inputRange: [0, 180],
                      outputRange: ['0deg', '180deg'],
                    }),
                  },
                ],
              },
            ]}>
            <Text style={styles.flipText}>This text is flipping great.</Text>
          </Animated.View>
          <Animated.View
            style={[
              styles.flipCard,
              styles.flipCard1,
              {
                transform: [
                  {perspective: 850},
                  {
                    rotateX: this.state.theta.interpolate({
                      inputRange: [0, 180],
                      outputRange: ['180deg', '360deg'],
                    }),
                  },
                ],
              },
            ]}>
            <Text style={styles.flipText}>On the flip side...</Text>
          </Animated.View>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      height: 500,
    },
    box1: {
      left: 0,
      backgroundColor: 'green',
      height: 50,
      position: 'absolute',
      top: 0,
      transform: [
        {translateX: 100},
        {translateY: 50},
        {rotate: '30deg'},
        {scaleX: 2},
        {scaleY: 2},
      ],
      width: 50,
    },
    box2: {
      left: 0,
      backgroundColor: 'purple',
      height: 50,
      position: 'absolute',
      top: 0,
      transform: [
        {scaleX: 2},
        {scaleY: 2},
        {translateX: 100},
        {translateY: 50},
        {rotate: '30deg'},
      ],
      width: 50,
    },
    box3step1: {
      left: 0,
      backgroundColor: 'lightpink',
      height: 50,
      position: 'absolute',
      top: 0,
      transform: [{rotate: '30deg'}],
      width: 50,
    },
    box3step2: {
      left: 0,
      backgroundColor: 'hotpink',
      height: 50,
      opacity: 0.5,
      position: 'absolute',
      top: 0,
      transform: [{rotate: '30deg'}, {scaleX: 2}, {scaleY: 2}],
      width: 50,
    },
    box3step3: {
      left: 0,
      backgroundColor: 'deeppink',
      height: 50,
      opacity: 0.5,
      position: 'absolute',
      top: 0,
      transform: [
        {rotate: '30deg'},
        {scaleX: 2},
        {scaleY: 2},
        {translateX: 100},
        {translateY: 50},
      ],
      width: 50,
    },
    box4: {
      left: 0,
      backgroundColor: 'darkorange',
      height: 50,
      position: 'absolute',
      top: 0,
      transform: [{translate: [200, 350]}, {scale: 2.5}, {rotate: '-0.2rad'}],
      width: 100,
    },
    box5: {
      backgroundColor: 'maroon',
      height: 50,
      position: 'absolute',
      right: 0,
      top: 0,
      width: 50,
    },
    box5Transform: {
      transform: [{translate: [-50, 35]}, {rotate: '50deg'}, {scale: 2}],
    },
    flipCardContainer: {
      marginVertical: 40,
      flex: 1,
      alignSelf: 'center',
    },
    flipCard: {
      width: 200,
      height: 200,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'blue',
      backfaceVisibility: 'hidden',
    },
    flipCard1: {
      position: 'absolute',
      top: 0,
      backgroundColor: 'red',
    },
    flipText: {
      width: 90,
      fontSize: 20,
      color: 'white',
      fontWeight: 'bold',
    },
  });
  
  exports.title = 'Transforms';
  exports.description = 'View transforms';
  exports.examples = [
    {
      title: 'Perspective, Rotate, Animation',
      description: 'perspective: 850, rotateX: Animated.timing(0 -> 360)',
      render(): React.Element<any> {
        return <Flip />;
      },
    },
    {
      title: 'Translate, Rotate, Scale',
      description:
        "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2",
      render() {
        return (
          <View style={styles.container}>
            <View style={styles.box1} />
          </View>
        );
      },
    },
    {
      title: 'Scale, Translate, Rotate, ',
      description:
        "scaleX: 2, scaleY: 2, translateX: 100, translateY: 50, rotate: '30deg'",
      render() {
        return (
          <View style={styles.container}>
            <View style={styles.box2} />
          </View>
        );
      },
    },
    {
      title: 'Rotate',
      description: "rotate: '30deg'",
      render() {
        return (
          <View style={styles.container}>
            <View style={styles.box3step1} />
          </View>
        );
      },
    },
    {
      title: 'Rotate, Scale',
      description: "rotate: '30deg', scaleX: 2, scaleY: 2",
      render() {
        return (
          <View style={styles.container}>
            <View style={styles.box3step2} />
          </View>
        );
      },
    },
    {
      title: 'Rotate, Scale, Translate ',
      description:
        "rotate: '30deg', scaleX: 2, scaleY: 2, translateX: 100, translateY: 50",
      render() {
        return (
          <View style={styles.container}>
            <View style={styles.box3step3} />
          </View>
        );
      },
    },
    {
      title: 'Translate, Scale, Rotate',
      description: "translate: [200, 350], scale: 2.5, rotate: '-0.2rad'",
      render() {
        return (
          <View style={styles.container}>
            <View style={styles.box4} />
          </View>
        );
      },
    },
    {
      title: 'Translate, Rotate, Scale',
      description: "translate: [-50, 35], rotate: '50deg', scale: 2",
      render() {
        return (
          <View style={styles.container}>
            <View style={[styles.box5, styles.box5Transform]} />
          </View>
        );
      },
    },
  ];
  