Starting SharingFloodingZonesScreen layout

src/app/screens/SharingFloodZonesScreen.js

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import {
+  StyleSheet,
+  Text,
+  Image,
+  View,
+  TouchableHighlight,
+} from "react-native";
+
+import Screen from "../components/Screen";
+import useLocation from "../hooks/useLocation";
+import colors from "../config/colors";
+
+function SharingFloodZonesScreen() {
+  const location = useLocation();
+  const [passable, setPassable] = useState(-1);
+
+  console.log(passable);
+
+  return (
+    <Screen style={styles.container}>
+      <Text style={styles.header}>Pontos de alagamento</Text>
+
+      <View style={styles.imgs_container}>
+        <TouchableHighlight onPress={() => setPassable(1)}>
+          <View style={styles.img_block}>
+            <Image
+              style={styles.image}
+              source={require("../assets/floodZonesAssets/passable_icon.png")}
+            />
+            <Text>Transitável</Text>
+          </View>
+        </TouchableHighlight>
+
+        <TouchableHighlight onPress={() => setPassable(0)}>
+          <View style={styles.img_block}>
+            <Image
+              style={styles.image}
+              source={require("../assets/floodZonesAssets/not_passable_icon.png")}
+            />
+            <Text>Intransitável</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  header: {
+    fontSize: 18,
+    color: colors.primary,
+    fontWeight: "500",
+  },
+  image: {
+    width: 150,
+    height: "100%",
+    resizeMode: "cover",
+    backgroundColor: "blue",
+  },
+  img_block: {
+    height: 100,
+    padding: 10,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  imgs_container: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+    padding: 10,
+  },
+});
+
+export default SharingFloodZonesScreen;

src/package.json

@@ -29,6 +29,7 @@
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
+    "react-native-svg": "12.1.0",
     "react-native-web": "~0.13.12",
     "react-navigation": "^4.4.3",
     "react-navigation-tabs": "^2.10.1",