Implementing Figma bottom sheet of map marker.

src/app/components/MapMarker.js

@@ -21,7 +21,11 @@ export default function MapMarker(props) {
         />
       </View>
 
-      <MapModal isVisible={isModalVisible} setIsVisible={setIsModalVisible} />
+      <MapModal
+        isVisible={isModalVisible}
+        setIsVisible={setIsModalVisible}
+        {...props}
+      />
 
       <Callout
         tooltip

src/app/components/MapModal.js

@@ -1,50 +1,239 @@
-import React, { Component } from "react";
-import {
-  Modal,
-  Text,
-  TouchableOpacity,
-  View,
-  StyleSheet,
-  TouchableWithoutFeedback,
-} from "react-native";
-import { screen_height, screen_width } from "../config/dimensions";
+import React, { useState } from "react";
+import { Text, TouchableOpacity, View, StyleSheet, Image } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import SelfClosingModal from "../components/SelfClosingModal";
+import colors from "../config/colors";
+import { showMessage } from "react-native-flash-message";
+import { dimensions } from "../config/dimensions";
+import { Svg, Image as ImageSvg } from "react-native-svg";
 
-function modalContent(isVisible, setIsVisible) {
+/* NOTE: `Edit` and `Delete` icons behavior not implemented yet.
+ *
+ *   Waiting for API handler to implement this functionality and avoid overwork
+ */
+function notImplemented() {
+  showMessage({
+    message: "Comportamento ainda não implementado",
+    duration: 1950,
+    icon: "warning",
+    type: "warning",
+  });
+}
+
+function topBar(props) {
   return (
-    <TouchableOpacity
-      onPress={() => {
-        setIsVisible(!isVisible);
-      }}
-    >
-      <Text>Hide Modal</Text>
-    </TouchableOpacity>
+    <View style={styles.topBar}>
+      <TouchableOpacity
+        style={styles.topBarIcon}
+        onPress={() => notImplemented()}
+      >
+        <MaterialCommunityIcons
+          name="pencil"
+          size={20}
+          color={colors.dark}
+          alignItems="center"
+        />
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={styles.topBarIcon}
+        onPress={() => notImplemented()}
+      >
+        <MaterialCommunityIcons
+          name="trash-can"
+          size={20}
+          color={colors.dark}
+          alignItems="center"
+        />
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={styles.topBarIcon}
+        onPress={() => props.setIsVisible(!props.isVisible)}
+      >
+        <MaterialCommunityIcons
+          name="close"
+          size={20}
+          color={colors.dark}
+          alignItems="center"
+        />
+      </TouchableOpacity>
+    </View>
   );
 }
 
-function MapModal({
-  isVisible,
-  setIsVisible,
-  title,
-  description,
-  icon,
-  pictures,
-}) {
-  console.log(screen_width);
+function iconTextRow(props) {
   return (
-    <View style={styles.centeredView}>
-      <SelfClosingModal
-        animationType="slide"
-        transparent={true}
-        visible={isVisible}
-        setVisible={setIsVisible}
+    <View flexDirection="row" alignSelf="flex-start" marginVertical={3}>
+      <View alignSelf="flex-start" marginRight={10}>
+        <MaterialCommunityIcons
+          name={props.name}
+          size={18}
+          color={colors.dark}
+        />
+      </View>
+
+      <Text style={styles.text}>{props.description}</Text>
+    </View>
+  );
+}
+
+function iconImageRow(props) {
+  return (
+    <View flexDirection="row" alignSelf="flex-start" marginVertical={3}>
+      <View alignSelf="flex-start" marginRight={10}>
+        <MaterialCommunityIcons
+          name={props.name}
+          size={18}
+          color={colors.dark}
+        />
+      </View>
+
+      <View alignSelf="flex-start">
+        <Svg width={100} height={100}>
+          <ImageSvg
+            width="100%"
+            height="100%"
+            preserveAspectRatio="xMinYMin stretch"
+            href={{ uri: props.pic[0] }}
+          />
+        </Svg>
+      </View>
+    </View>
+  );
+}
+
+function reviews(props) {
+  const [likes, setLikes] = useState(0);
+  const [dislikes, setDislikes] = useState(0);
+
+  const updateLikes = () => {
+    setLikes(likes + 1);
+    notImplemented();
+  };
+  const updatedislikes = () => {
+    setDislikes(dislikes + 1);
+    notImplemented();
+  };
+
+  return (
+    <View style={styles.reviewsContainer}>
+      <TouchableOpacity onPress={() => updatedislikes()}>
+        <View style={styles.review}>
+          <View marginRight={5}>
+            <MaterialCommunityIcons
+              name={"thumb-down"}
+              size={18}
+              color={colors.dark}
+            />
+          </View>
+          <Text style={styles.text}>{dislikes}</Text>
+        </View>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => {
+          updateLikes();
+        }}
       >
-        {modalContent(isVisible, setIsVisible)}
-      </SelfClosingModal>
+        <View style={styles.review}>
+          <View marginRight={5}>
+            <MaterialCommunityIcons
+              name={"thumb-up"}
+              size={18}
+              color={colors.dark}
+            />
+          </View>
+          <Text style={styles.text}>{likes}</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+function componentBody(props) {
+  // NOTE: This code is refered to our local SQLite solution. Revise this when implement rest API.
+  const pictures = JSON.parse(props.pictures);
+  const date = date ? date : "implementando...";
+
+  return (
+    <View style={styles.bodyRow}>
+      <Image
+        style={styles.bodyIcon}
+        resizeMode="stretch"
+        source={props.image}
+      />
+
+      <View style={styles.bodyInfo}>
+        <Text style={styles.bodyTitle}>{props.title}</Text>
+
+        {iconTextRow({ name: "map-marker", description: "Rua Nassau, 158" })}
+        {iconTextRow({ name: "calendar", description: date })}
+        {iconTextRow({ name: "account", description: "Usuário ativo" })}
+        {pictures.length > 0 && iconImageRow({ name: "camera", pic: pictures })}
+      </View>
     </View>
   );
 }
 
-const styles = StyleSheet.create({});
+function MapModal(props) {
+  return (
+    <SelfClosingModal
+      animationType="slide"
+      transparent={true}
+      visible={props.isVisible}
+      setVisible={props.setIsVisible}
+    >
+      {topBar(props)}
+      {componentBody(props)}
+      {reviews(props)}
+    </SelfClosingModal>
+  );
+}
+
+const styles = StyleSheet.create({
+  bodyRow: {
+    flexDirection: "row",
+    alignSelf: "flex-start",
+    alignContent: "space-between",
+  },
+  bodyTitle: {
+    fontWeight: "700",
+    fontSize: dimensions.text.secondary,
+    marginBottom: 5,
+  },
+  bodyInfo: {
+    flexDirection: "column",
+    alignContent: "flex-start",
+  },
+  bodyIcon: {
+    alignSelf: "flex-start",
+    marginHorizontal: 20,
+    height: 53,
+    width: 53,
+  },
+  reviewsContainer: {
+    flexDirection: "row",
+    alignSelf: "flex-end",
+    margin: 10,
+  },
+  review: {
+    flexDirection: "row",
+    alignSelf: "flex-end",
+    alignContent: "space-around",
+    marginHorizontal: 10,
+  },
+  topBar: {
+    flexDirection: "row",
+    alignSelf: "flex-end",
+  },
+  topBarIcon: {
+    margin: 10,
+  },
+  text: {
+    fontWeight: "500",
+    fontSize: dimensions.text.default,
+  },
+});
 
 export default MapModal;

src/app/components/SelfClosingModal.js

@@ -43,7 +43,6 @@ const styles = StyleSheet.create({
     backgroundColor: "white",
     borderTopLeftRadius: 10,
     borderTopRightRadius: 10,
-    padding: 35,
     marginBottom: 0,
     alignItems: "center",
     shadowColor: "#000",