From 963eaef628ab107fe267fc1c37ca41402c8607b2 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Wed, 11 Oct 2023 20:19:16 +0800
Subject: [PATCH] Rounded edges for MapViews

---
 src/routes/CreateGroup/CreateGroup.tsx     | 86 +++++++++++-----------
 src/routes/Home/Home.tsx                   |  4 +-
 src/routes/StartStudying/StartStudying.tsx | 86 +++++++++++-----------
 3 files changed, 91 insertions(+), 85 deletions(-)

diff --git a/src/routes/CreateGroup/CreateGroup.tsx b/src/routes/CreateGroup/CreateGroup.tsx
index ac54d3d..296b5d8 100644
--- a/src/routes/CreateGroup/CreateGroup.tsx
+++ b/src/routes/CreateGroup/CreateGroup.tsx
@@ -99,51 +99,53 @@ export default function CreateGroup({ route }: any) {
         <AnimatedContainerNoScroll>
           <View style={{ zIndex: -1 }}>
             <View style={styles.padding} />
-            <MapView
-              style={{
-                height: Viewport.height * 0.4,
-                width: Viewport.width * 0.8,
-                alignSelf: "center",
-              }}
-              customMapStyle={[
-                {
-                  featureType: "poi",
-                  stylers: [
-                    {
-                      visibility: "off",
-                    },
-                  ],
-                },
-              ]}
-              mapType="none"
-              scrollEnabled={false}
-              zoomEnabled={false}
-              toolbarEnabled={false}
-              rotateEnabled={false}
-              minZoomLevel={18}
-              initialRegion={{
-                latitude: location.latitude,
-                longitude: location.longitude,
-                latitudeDelta: 0.0922,
-                longitudeDelta: 0.0421,
-              }}
-              loadingBackgroundColor={colors.secondary_2}
-            >
-              <UrlTile
-                urlTemplate={urlProvider}
-                shouldReplaceMapContent={true}
-                maximumZ={19}
-                flipY={false}
-                zIndex={1}
-              />
-              <Marker
-                coordinate={{
+            <View style={{ borderRadius: 16, overflow: "hidden" }}>
+              <MapView
+                style={{
+                  height: Viewport.height * 0.4,
+                  width: Viewport.width * 0.8,
+                  alignSelf: "center",
+                }}
+                customMapStyle={[
+                  {
+                    featureType: "poi",
+                    stylers: [
+                      {
+                        visibility: "off",
+                      },
+                    ],
+                  },
+                ]}
+                mapType="none"
+                scrollEnabled={false}
+                zoomEnabled={false}
+                toolbarEnabled={false}
+                rotateEnabled={false}
+                minZoomLevel={18}
+                initialRegion={{
                   latitude: location.latitude,
                   longitude: location.longitude,
+                  latitudeDelta: 0.0922,
+                  longitudeDelta: 0.0421,
                 }}
-                pinColor={colors.primary_1}
-              />
-            </MapView>
+                loadingBackgroundColor={colors.secondary_2}
+              >
+                <UrlTile
+                  urlTemplate={urlProvider}
+                  shouldReplaceMapContent={true}
+                  maximumZ={19}
+                  flipY={false}
+                  zIndex={1}
+                />
+                <Marker
+                  coordinate={{
+                    latitude: location.latitude,
+                    longitude: location.longitude,
+                  }}
+                  pinColor={colors.primary_1}
+                />
+              </MapView>
+            </View>
             <View style={styles.padding} />
           </View>
           <TextInput
diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
index 753457b..81c4ec9 100644
--- a/src/routes/Home/Home.tsx
+++ b/src/routes/Home/Home.tsx
@@ -980,7 +980,9 @@ export default function Home() {
         </AnimatedContainer>
       </Modal>
       <AnimatedContainer>
-        <CustomMap />
+        <View style={{ borderRadius: 16, overflow: "hidden" }}>
+          <CustomMap />
+        </View>
       </AnimatedContainer>
     </View>
   );
diff --git a/src/routes/StartStudying/StartStudying.tsx b/src/routes/StartStudying/StartStudying.tsx
index 335d674..fdeeced 100644
--- a/src/routes/StartStudying/StartStudying.tsx
+++ b/src/routes/StartStudying/StartStudying.tsx
@@ -114,51 +114,53 @@ export default function StartStudying({ route }: any) {
         <AnimatedContainerNoScroll>
           <View style={{ zIndex: -1 }}>
             <View style={styles.padding} />
-            <MapView
-              style={{
-                height: Viewport.height * 0.4,
-                width: Viewport.width * 0.8,
-                alignSelf: "center",
-              }}
-              customMapStyle={[
-                {
-                  featureType: "poi",
-                  stylers: [
-                    {
-                      visibility: "off",
-                    },
-                  ],
-                },
-              ]}
-              mapType="none"
-              scrollEnabled={false}
-              zoomEnabled={false}
-              toolbarEnabled={false}
-              rotateEnabled={false}
-              minZoomLevel={18}
-              initialRegion={{
-                latitude: location.coords.latitude,
-                longitude: location.coords.longitude,
-                latitudeDelta: 0.0922,
-                longitudeDelta: 0.0421,
-              }}
-              loadingBackgroundColor={colors.secondary_2}
-            >
-              <UrlTile
-                urlTemplate={urlProvider}
-                shouldReplaceMapContent={true}
-                maximumZ={19}
-                flipY={false}
-                zIndex={1}
-              />
-              <Marker
-                coordinate={{
+            <View style={{ borderRadius: 16, overflow: "hidden" }}>
+              <MapView
+                style={{
+                  height: Viewport.height * 0.4,
+                  width: Viewport.width * 0.8,
+                  alignSelf: "center",
+                }}
+                customMapStyle={[
+                  {
+                    featureType: "poi",
+                    stylers: [
+                      {
+                        visibility: "off",
+                      },
+                    ],
+                  },
+                ]}
+                mapType="none"
+                scrollEnabled={false}
+                zoomEnabled={false}
+                toolbarEnabled={false}
+                rotateEnabled={false}
+                minZoomLevel={18}
+                initialRegion={{
                   latitude: location.coords.latitude,
                   longitude: location.coords.longitude,
+                  latitudeDelta: 0.0922,
+                  longitudeDelta: 0.0421,
                 }}
-                pinColor={colors.primary_1}
-              />
-            </MapView>
+                loadingBackgroundColor={colors.secondary_2}
+              >
+                <UrlTile
+                  urlTemplate={urlProvider}
+                  shouldReplaceMapContent={true}
+                  maximumZ={19}
+                  flipY={false}
+                  zIndex={1}
+                />
+                <Marker
+                  coordinate={{
+                    latitude: location.coords.latitude,
+                    longitude: location.coords.longitude,
+                  }}
+                  pinColor={colors.primary_1}
+                />
+              </MapView>
+            </View>
             <View style={styles.padding} />
           </View>
           <DropDownPicker