locaft_mobile/components/HomeScreen.js

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;