import React from 'react';
import {
	StatusBar,
	StyleSheet,
	Text,
	useColorScheme,
	View,
} from 'react-native';
import { Icon } from 'react-native-elements';

const HomeScreen = () => {
	return (

		<>
		<StatusBar backgroundColor="#fffff2" barStyle="dark-content" />
		<View
		style={styles.viewRoot}>
		<Text style={styles.heading}>Rental</Text>
		<View style={{ flexDirection: "row", marginTop: "30%", marginLeft: "15%"}}>
		<Icon name='home-outline' style={styles.icon} type='ionicon' size={46} color='#206ba5' ></Icon>
		<Text style={{color: "#206ba5", fontSize: 25, marginLeft: "-10%"}}>Home</Text>
		</View>
		<View style={{ flexDirection: "row", marginTop: "30%", marginLeft: "15%"}}>
		<Icon name='key' type='feather' style={styles.icon} size={46} color='#206ba5'></Icon>
		<Text style={{color: "#206ba5", fontSize: 25, marginLeft: "-10%"}}>Key</Text>
		</View>
		</View>

		</>
	);
}

const styles = StyleSheet.create({
	viewRoot: {
		backgroundColor: '#fffff2',
		height: '100%',
	},
	heading: {
		color: '#206ba5',
		fontSize: 60,
		textAlign: 'center',
		marginTop: '40%',
		fontFamily: 'Ubuntu-Bold',
	},
	icon: {

		alignSelf: "flex-start",
		marginLeft: '28%',
		flexDirection: 'row',
	},
});

export default HomeScreen;
