text: // @flow
  
  import * as React from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Animated,
    Image,
    Easing,
  } from 'react-native';
  import { withNavigation } from 'react-navigation';
  
  import Button from '../atoms/Button';
  
  class Slide3 extends React.PureComponent {
    constructor() {
      super();
      this.animatedValue = new Animated.Value(0);
    }
  
    componentDidMount() {
      this.animate();
    }
  
    animate() {
      this.animatedValue.setValue(0);
      Animated.timing(this.animatedValue, {
        toValue: 1,
        duration: 2000,
        easing: Easing.linear,
      }).start(() => this.animate());
    }
  
    nextSlide = () => this.props.navigation.navigate('Slide4');
  
    render() {
      const marginLeft = this.animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 300],
      });
  
      const opacity = this.animatedValue.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: [0, 1, 0],
      });
  
      const movingMargin = this.animatedValue.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: [0, 300, 0],
      });
  
      const textSize = this.animatedValue.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: [18, 32, 18],
      });
  
      const rotateX = this.animatedValue.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: ['0deg', '180deg', '0deg'],
      });
  
      return (
        <View style={styles.container}>
          <Animated.View
            style={{ marginLeft, height: 30, width: 40, backgroundColor: 'red' }}
          />
          <Animated.View
            style={{
              opacity,
              marginTop: 10,
              height: 30,
              width: 40,
              backgroundColor: 'blue',
            }}
          />
          <Animated.View
            style={{
              marginLeft: movingMargin,
              marginTop: 10,
              height: 30,
              width: 40,
              backgroundColor: 'orange',
            }}
          />
          <Animated.Text
            style={{ fontSize: textSize, marginTop: 10, color: 'green' }}
          >
            Animated Text!
          </Animated.Text>
          <Animated.View
            style={{
              transform: [{ rotateX }],
              marginTop: 50,
              height: 30,
              width: 40,
              backgroundColor: 'black',
            }}
          >
            <Text style={{ color: 'white' }}>Hello from TransformX</Text>
          </Animated.View>
          <Button onPress={this.nextSlide} text="NEXT" />
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: 150,
    },
  });
  
  export default Slide3;
  