Scooty - MapPageAfterRent

import React, { Component } from "react";
import { StyleSheet, View, Image } from "react-native";
import { Center } from "@builderx/utils";
import MaterialFixedLabelTextbox from "../symbols/MaterialFixedLabelTextbox";
import MaterialButtonDark from "../symbols/MaterialButtonDark";

export default class MapPageAfterRent extends Component {
  render() {
    return (
      <View style={styles.root}>
        <Center>
          <Image
            source={require("../assets/images/GoogleMapTA_(1)1.jpg")}
            resizeMode={"contain"}
            style={styles.YourLocationIconSample}
          />
        </Center>
        <MaterialFixedLabelTextbox style={styles.YourScooter} />
        <Image
          source={require("../assets/images/map-location-icon-png-4.png")}
          resizeMode={"contain"}
          style={styles.LocationIconSample}
        />
        <MaterialButtonDark style={styles.EndButton} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: "rgba(111,157,205,1)"
  },
  YourLocationIconSample: {
    width: 400,
    height: 640,
    position: "absolute"
  },
  YourScooter: {
    top: 20,
    left: 10,
    width: 340,
    height: 43,
    position: "absolute"
  },
  LocationIconSample: {
    top: 320,
    left: 160,
    width: 60,
    height: 60,
    position: "absolute"
  },
  EndButton: {
    top: 550,
    left: 105,
    width: 150,
    height: 46,
    position: "absolute"
  }
});