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

const Splash = () => {
    return(
    <ImageBackground style={styles.container} source={require('../assets/cover.jpg')}>
        <View style={[styles.brandContainer, styles.center]}>
            <Image style={styles.logo} source={require('../assets/logo-white.png')}></Image>
            <Text style={[styles.center, styles.title]} >Click & Push</Text>
        </View>
    </ImageBackground>)
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'column',
      resizeMode: 'cover',
      justifyContent: 'space-between'
    },
  
    center: {
      alignItems: 'center',  
      justifyContent: 'center',
    },
  
    brandContainer: {
        flex: 2,
        marginVertical: 50,
        flexDirection: 'column',
        justifyContent: 'space-between'
    },
  
    title: {
      fontFamily: 'RacingSansOne-Regular',
      marginTop: 30, 
      color: 'white',
      fontSize: 30
    },
  })

export default Splash;