text: import React from 'react';
  import { 
    StyleSheet, 
    View, 
    Text,
    Image,
    Animated as CoreAnimated,
    Easing,
    Dimensions
  } from 'react-native';
  import Svg, { 
    Rect,
    Line,
    Defs,
    Stop,
    ClipPath,
    LinearGradient
  } from 'react-native-svg';
  import SimpleBackground from '../components/simple-background';
  
  const Animated = {
    ...CoreAnimated,
    Rect: CoreAnimated.createAnimatedComponent(Rect),
  };
  
  const LOADING_DURATION = 5000;
  const { width, height } = Dimensions.get('window');
  
  export default class UploadScreen extends React.Component {
    static navigationOptions = {
      gesturesEnabled: false,
    }
  
    constructor(props) {
      super(props);
      
      this.uploadAnim = new Animated.Value(0);
      this.state = {
        progress: 0,
      };
  
      this.uploadAnim.addListener(({value}) => {
        value = Math.round(value * 100);
  
        this.setState(() => ({
          progress: value,
        }));
      });
    }
  
    componentDidMount() {
      this.runAnimation();
    }
  
    runAnimation() {
      Animated.timing(
        this.uploadAnim,
        {
          toValue: 1, 
          duration: LOADING_DURATION,
          easing: Easing.linear,
        }
      ).start(() => {
        setTimeout(() => {
          const { navigate } = this.props.navigation;
          
          navigate('Idle');
        }, 1000);
      });
    }
  
    render() {
      return (
        <View style={styles.fill}>
          <SimpleBackground
            colors={['#DCDEEB', '#DDE5EA', '#DEE9EB', '#E0EFEF', '#EFE1EF']}
          />
          <View style={styles.logoContainer}>
            <Image style={styles.logo} source={require('../../assets/iry_logo_info.png')}/>
          </View>
          <View style={styles.loadingBarContainer}>
            <Svg 
              width={width}
              height="20"
            >
              <Defs>
                <LinearGradient id="gradient" x1="0" x2="100%" y1="0" y2="0">
                  <Stop offset="0%" stopColor="#AEEBF0"/>
                  <Stop offset="70%" stopColor="#ACDEF5"/>
                </LinearGradient>
                <ClipPath id="clip">
                  <Animated.Rect
                    x="0%"
                    y="5%"
                    width={
                      this.uploadAnim.interpolate({
                        inputRange: [0, 1],
                        outputRange: ['12%', '88%'],
                      })
                    }
                    height="10%"
                  />
                </ClipPath>
              </Defs>
              <Line
                x1="12%"
                x2="88%"
                y1="10%"
                y2="10%"
                stroke="url(#gradient)"
                strokeWidth="3"
                strokeLinecap="round"
                clipPath="url(#clip)"
              />
            </Svg>
          </View>
          <Text style={styles.progressInfo}>
            {
              (this.state.progress < 30) &&
              <Text>Iris wird gescannt … {this.state.progress}%</Text>
            }
            {
              (this.state.progress >= 30 && this.state.progress < 70) &&
              <Text>Verbindung zur Datenbank wird hergestellt... {this.state.progress}%</Text>
            }
            {
              (this.state.progress >= 70 && this.state.progress < 100) &&
              <Text >Scan wird hochgeladen... {this.state.progress}%</Text>
            }
            {
              (this.state.progress === 100) &&
              <Text>Fertig. {this.state.progress}%</Text>
            }
          </Text>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    fill: {
      flex: 1,
      justifyContent: 'center',
    },
    logoContainer: {
      alignItems: 'center',
      marginBottom: 25
    },
    logo: {
      height: 25,
      resizeMode: 'contain'
    },
    progressInfo: {
      height: 40,
      color: '#FFF',
      textAlign: 'center',
      backgroundColor: 'rgba(0, 0, 0, 0)',
      fontFamily: 'Helvetica Neue',
      fontStyle: 'italic',
      letterSpacing: 1.2,
      paddingHorizontal: 30
    },
  });
  