feature

deskripsi:
- komponen Map
# No Issue

components/Divider/DividerCustom.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import {
-  View,
-  Text,
-  StyleSheet,
   StyleProp,
-  ViewStyle,
+  StyleSheet,
+  Text,
   TextStyle,
+  View,
+  ViewStyle,
 } from "react-native";
 
 // Define types for props
@@ -26,7 +26,7 @@ interface DividerProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const Divider: React.FC<DividerProps> = ({
+const DividerCustom: React.FC<DividerProps> = ({
   orientation = "horizontal",
   color = "#DADADA",
   size = "xs",
@@ -183,4 +183,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Divider;
+export default DividerCustom;

components/Map/MapCustom.tsx

@@ -0,0 +1,61 @@
+// components/MapComponent.js
+
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import MapView, { Marker } from "react-native-maps";
+
+interface MapComponentProps {
+  latitude?: number;
+  longitude?: number;
+  latitudeDelta?: number;
+  longitudeDelta?: number;
+  height?: number;
+}
+
+const MapCustom = ({
+  latitude = -8.737109,
+  longitude = 115.1756897,
+  latitudeDelta = 0.1,
+  longitudeDelta = 0.1,
+  height = 300,
+}: MapComponentProps) => {
+  const initialRegion = {
+    latitude,
+    longitude, // Jakarta sebagai default lokasi
+    latitudeDelta,
+    longitudeDelta,
+  };
+
+  return (
+    <View style={styles.container}>
+      <MapView
+        style={[styles.map, { height }]}
+        initialRegion={initialRegion}
+        showsUserLocation={true}
+        loadingEnabled={true}
+      >
+        {/* Contoh marker */}
+        <Marker
+          coordinate={{
+            latitude,
+            longitude,
+          }}
+          title="Bali"
+          description="Badung, Bali, Indonesia"
+        />
+      </MapView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    borderRadius: 8,
+  },
+  map: {
+    width: "100%",
+  },
+});
+
+export default MapCustom;

components/index.ts

@@ -22,7 +22,6 @@ import Grid from "./Grid/GridCustom";
 import BaseBox from "./Box/BaseBox";
 import BoxButtonOnFooter from "./Box/BoxButtonOnFooter";
 import InformationBox from "./Box/InformationBox";
-
 // Stack
 import StackCustom from "./Stack/StackCustom";
 // Select
@@ -30,25 +29,31 @@ import SelectCustom from "./Select/SelectCustom";
 // Image
 import AvatarCustom from "./Image/AvatarCustom";
 import LandscapeFrameUploaded from "./Image/LandscapeFrameUploaded";
+// Divider
+import DividerCustom from "./Divider/DividerCustom";
+// Map
+import MapCustom from "./Map/MapCustom";
 
 export {
   AlertCustom,
   // Image
   AvatarCustom,
-  LandscapeFrameUploaded,
-  // Button
-  ButtonCustom,
   LeftButtonCustom as BackButton,
-  ButtonCenteredOnly,
   // Box
   BaseBox,
   BoxButtonOnFooter,
-  InformationBox,
+  ButtonCenteredOnly,
+  // Button
+  ButtonCustom,
   // Drawer
   DrawerCustom,
+  MenuDrawerDynamicGrid,
   // Grid
   Grid,
-  MenuDrawerDynamicGrid,
+  InformationBox,
+  LandscapeFrameUploaded,
+  // Map
+  MapCustom,
   // Select
   SelectCustom,
   // ShareComponent
@@ -63,4 +68,6 @@ export {
   TextInputCustom,
   // ViewWrapper
   ViewWrapper,
+  // Divider
+  DividerCustom,
 };