feature

deskripsi:
- komponen Map
# No Issue

bun.lock

@@ -31,6 +31,7 @@
         "react-native": "0.79.5",
         "react-native-gesture-handler": "~2.24.0",
         "react-native-international-phone-number": "^0.9.3",
+        "react-native-maps": "1.20.1",
         "react-native-otp-entry": "^1.8.5",
         "react-native-reanimated": "~3.17.4",
         "react-native-safe-area-context": "5.4.0",
@@ -423,6 +424,8 @@
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
 
+    "@types/geojson": ["@types/geojson@7946.0.16", "", {}, "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="],
+
     "@types/graceful-fs": ["@types/graceful-fs@4.1.9", "", { "dependencies": { "@types/node": "*" } }, "sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ=="],
 
     "@types/hammerjs": ["@types/hammerjs@2.0.46", "", {}, "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw=="],
@@ -1373,6 +1376,8 @@
 
     "react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.1.7", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w=="],
 
+    "react-native-maps": ["react-native-maps@1.20.1", "", { "dependencies": { "@types/geojson": "^7946.0.13" }, "peerDependencies": { "react": ">= 17.0.1", "react-native": ">= 0.64.3", "react-native-web": ">= 0.11" }, "optionalPeers": ["react-native-web"] }, "sha512-NZI3B5Z6kxAb8gzb2Wxzu/+P2SlFIg1waHGIpQmazDSCRkNoHNY4g96g+xS0QPSaG/9xRBbDNnd2f2/OW6t6LQ=="],
+
     "react-native-otp-entry": ["react-native-otp-entry@1.8.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-TZNkIuUzZKAAWrC8X/A22ZHJdycLysxUNysrGf0yTmDLRUyf4zLXwVFcDYUcRNe763Hjaf5qvtKGILb6lDGzoA=="],
 
     "react-native-reanimated": ["react-native-reanimated@3.17.5", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "invariant": "^2.2.4", "react-native-is-edge-to-edge": "1.1.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-SxBK7wQfJ4UoWoJqQnmIC7ZjuNgVb9rcY5Xc67upXAFKftWg0rnkknTw6vgwnjRcvYThrjzUVti66XoZdDJGtw=="],

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,
 };

package.json

@@ -38,6 +38,7 @@
     "react-native": "0.79.5",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-international-phone-number": "^0.9.3",
+    "react-native-maps": "1.20.1",
     "react-native-otp-entry": "^1.8.5",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",

screens/Portofolio/BusinessLocationSection.tsx

@@ -1,10 +1,13 @@
-import { BaseBox, TextCustom } from "@/components";
+import { BaseBox, MapCustom, StackCustom, TextCustom } from "@/components";
 
 export default function Portofolio_BusinessLocation() {
   return (
     <>
       <BaseBox>
-        <TextCustom bold>Lokasi Bisnis</TextCustom>
+        <StackCustom>
+          <TextCustom bold>Lokasi Bisnis</TextCustom>
+          <MapCustom />
+        </StackCustom>
       </BaseBox>
     </>
   );

screens/Portofolio/SocialMediaSection.tsx

@@ -2,7 +2,6 @@ import { BaseBox, Grid, StackCustom, TextCustom } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Ionicons } from "@expo/vector-icons";
-import { View } from "react-native";
 
 export default function Portofolio_SocialMediaSection() {
   const listData = [