import React, { Component } from 'react';
import {
        Text,
        View,
        Button,
        StyleSheet,
        TouchableOpacity,
        ImageBackground,
        fontFamily,
        Animated,
        Image,
        Easing } from 'react-native'


export class StartScreen extends Component {

  constructor () {
    super()
    this.animatedValue = new Animated.Value(0)
  }

componentDidMount () {
  this.animate()
}
animate () {
  this.animatedValue.setValue(0)
  Animated.timing(
    this.animatedValue,
    {
      toValue: 2,
      duration: 2000,
      easing: Easing.linear
    }
  ).start(() => this.animate())
}

    render() {
        const marginTop = this.animatedValue.interpolate({
          inputRange: [0, 1],
          outputRange: [-100, 350]
        })
      return (
        <ImageBackground source={require('./assets/start.png')} style={{width: '100%', height: '100%'}}>
        <View style={styles.container}>
        <Animated.Image style={{marginTop, width:88, height:148}} source={require('./assets/drop.png')}/>
          <Text style={styles.paragraph}> Sluk tørste gratis og miljøvenligt i København  </Text>
              <TouchableOpacity
                style={styles.startButton}
                onPress={() => this.props.navigation.navigate('MyLoading')}>
                <Text style={styles.startButtonText}>Find Vandposter</Text>
               </TouchableOpacity>
        </View>
        </ImageBackground>
      )
    }
  }


  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: 150,
      //backgroundColor: '#ffffff',
    },
    paragraph: {
      margin:10,
      fontSize: 18,
      textAlign: 'center',
    },
    startButton: {
      borderWidth: 1,
      borderColor: '#007BFF',
      backgroundColor: '#007BFF',
      padding: 15,
      margin: 5
    },
    startButtonText: {
      color: '#FFFFFF',
      fontSize: 20,
      textAlign: 'center'
  },
  });