Improving MapMarker layout

src/app/components/MapMarker.js

@@ -16,24 +16,17 @@ export default function MapMarker({
   ...props
 }) {
   console.log(pictures);
+  const pictures_s = JSON.parse(pictures);
   return (
     <MapView.Marker coordinate={coordinate} {...props}>
       <View>
         <Image style={styles.markerPoint} resizeMode="stretch" source={image} />
       </View>
-      <Callout tooltip>
+      <Callout tooltip style={{ width: 250 }}>
         <View>
           <View style={styles.container}>
-            <Text>{"Título: \t" + title}</Text>
-            <Text>{"Descrição: \t" + description}</Text>
-            <Svg width={240} height={120}>
-              <ImageSvg
-                width={"100%"}
-                height={"100%"}
-                preserveAspectRatio="xMidYMid stretch"
-                href={{ uri: JSON.parse(pictures)[0] }}
-              />
-            </Svg>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.description}>{description}</Text>
           </View>
           <View style={styles.arrow}></View>
         </View>
@@ -43,17 +36,26 @@ export default function MapMarker({
 }
 
 const styles = StyleSheet.create({
+  title: {
+    fontWeight: "bold",
+    fontSize: dimensions.text.secondary,
+    alignSelf: "center",
+    paddingBottom: dimensions.spacing.minimal_padding,
+  },
+  description: {
+    fontSize: dimensions.text.default,
+  },
   arrow: {
     alignSelf: "center",
-    borderTopWidth: 20,
-    borderRightWidth: 20,
+    borderTopWidth: 15,
+    borderRightWidth: 10,
     borderBottomWidth: 0,
-    borderLeftWidth: 20,
+    borderLeftWidth: 10,
     borderTopColor: colors.lightGray,
     borderRightColor: "transparent",
     borderBottomColor: "transparent",
     borderLeftColor: "transparent",
-    paddingBottom: 8,
+    paddingBottom: 5,
   },
 
   container: {
@@ -62,18 +64,32 @@ const styles = StyleSheet.create({
     backgroundColor: colors.lightestGray,
     borderColor: colors.lightGray,
     borderRadius: 6,
-    borderWidth: 2,
-    borderBottomWidth: 4,
-    borderRightWidth: 4,
-    padding: 15,
-    height: 200,
+    borderWidth: 4,
+    borderTopWidth: 2,
+    padding: dimensions.spacing.minimal_padding,
+    width: 200,
   },
   markerPoint: {
     alignSelf: "center",
     height: markerSize,
     width: markerSize,
   },
-  title: {
-    fontWeight: "400",
-  },
 });
+
+/*
+ * NOTE: Code for displaying images inside MapMarker. Leaved here for possible
+ * future needs
+ *
+ *
+ *   {pictures_s.length > 0 && (
+ *     <Svg width={240} height={120}>
+ *       <ImageSvg
+ *         width={"100%"}
+ *         height={"100%"}
+ *         preserveAspectRatio="xMidYMid stretch"
+ *         href={{ uri: pictures_s[0] }}
+ *       />
+ *     </Svg>
+ *   )}
+ *
+ */

src/app/config/dimensions.js

@@ -10,6 +10,11 @@ const dimensions = {
     default: 16,
     tertiary: 12,
   },
+
+  spacing: {
+    normal_padding: 10,
+    minimal_padding: 5,
+  },
 };
 
 /* imageScaleToSize (iw, ih, scale_w)