import * as React from 'react';
import { Pressable, View, Text, Image, StyleSheet, ImageBackground } from 'react-native';

const styles = StyleSheet.create({
  viewStyleVertical : { alignItems: 'center', justifyContent: 'center', margin: '10%' },
  viewStyleHorizon : { flex: 1, flexDirection: 'row', justifyContent: 'space-between'},
  pressableStyle : {flex: 1, flexDirection: 'row', justifyContent: 'space-between', backgroundColor:'lavender', paddingHorizontal:20, 
  paddingVertical:10, borderColor:'thistle', borderWidth:2, borderRadius:5, marginHorizontal: 10, marginTop: 10},
  image: { flex: 1, resizeMode: "cover", justifyContent: "center"},
  container : {flex: 1},
  textBox : {flex: 1, marginTop: 20, backgroundColor:'white', borderColor:'black', borderWidth:2, borderRadius:5, 
  marginHorizontal: 10, paddingVertical:10, paddingHorizontal: 50, alignItems: 'flex-start'}
});

const Loading = () => {
    const pic = "http://simpleicon.com/wp-content/uploads/refresh.png"
    return (
        <View style={styles.container}>
            <ImageBackground source={{uri: "https://www.fonewalls.com/wp-content/uploads/2020/04/Ice-Phone-Wallpaper.jpg"}} style={styles.image}>
            <View style={styles.viewStyleVertical}>
                <Text style={{ fontSize: 30 }}>Loading......</Text>
                <Image source={{uri: pic}} style={{width: 200, height: 200}}/>
            </View>
            </ImageBackground>
        </View>
    )
}

export default Loading;