Implementing SharingFloodZonesScreen UI

src/app/screens/SharingFloodZonesScreen.js

@@ -1,47 +1,76 @@
 import React, { useState } from "react";
-import {
-  StyleSheet,
-  Text,
-  Image,
-  View,
-  TouchableHighlight,
-} from "react-native";
+import { Dimensions } from "react-native";
+import { StyleSheet, Text, Image, View } from "react-native";
+import * as Yup from "yup";
 
+import { Form, SubmitButton, FormField } from "../components/forms";
+import FormImagePicker from "../components/forms/FormImagePicker";
 import Screen from "../components/Screen";
 import useLocation from "../hooks/useLocation";
 import colors from "../config/colors";
+import { TouchableNativeFeedback } from "react-native-gesture-handler";
+
+function submitForm(passable, image) {
+  console.log(passable, image);
+}
+
+const validationSchema = Yup.object().shape({
+  images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
+  description: Yup.string()
+    .label("Description")
+    .required("Por favor, forneça uma descrição"),
+});
+
+const screen_width = Dimensions.get("window").width;
 
 function SharingFloodZonesScreen() {
+  const [passable, setPassable] = useState(0);
+  const [image, setImage] = useState();
   const location = useLocation();
-  const [passable, setPassable] = useState(-1);
-
-  console.log(passable);
 
   return (
     <Screen style={styles.container}>
-      <Text style={styles.header}>Pontos de alagamento</Text>
+      <Form
+        initialValues={{
+          images: [],
+          description: "",
+        }}
+        onSubmit={(values) => console.log({ ...values, passable, location })}
+        validationSchema={validationSchema}
+      >
+        <View style={styles.imgs_container}>
+          <TouchableNativeFeedback onPress={() => setPassable(1)}>
+            <View style={styles.img_block} borderWidth={passable == 1 ? 1 : 0}>
+              <Image
+                style={styles.image}
+                source={require("../assets/floodZonesAssets/passable_icon.png")}
+              />
+              <Text>Transitável</Text>
+            </View>
+          </TouchableNativeFeedback>
 
-      <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>
+          <TouchableNativeFeedback onPress={() => setPassable(0)}>
+            <View style={styles.img_block} borderWidth={passable == 0 ? 1 : 0}>
+              <Image
+                style={styles.image}
+                source={require("../assets/floodZonesAssets/not_passable_icon.png")}
+              />
+              <Text>Intransitável</Text>
+            </View>
+          </TouchableNativeFeedback>
+        </View>
 
-        <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>
+        <FormImagePicker name="images" height={10} />
+
+        <FormField
+          maxLength={255}
+          multiline
+          name="description"
+          numberOfLines={3}
+          placeholder="Descrição"
+        />
+        <SubmitButton title="Enviar" backgroundColor={colors.background} />
+      </Form>
     </Screen>
   );
 }
@@ -49,9 +78,9 @@ function SharingFloodZonesScreen() {
 const styles = StyleSheet.create({
   container: {
     padding: 10,
-    alignItems: "center",
     justifyContent: "center",
   },
+
   header: {
     fontSize: 18,
     color: colors.primary,
@@ -66,16 +95,17 @@ const styles = StyleSheet.create({
   img_block: {
     height: 100,
     padding: 10,
-    display: "flex",
-    flexDirection: "column",
+    borderRadius: 5,
+    borderStyle: "dotted",
+    borderColor: "blue",
     justifyContent: "center",
     alignItems: "center",
   },
   imgs_container: {
-    display: "flex",
+    alignSelf: "center",
+    width: screen_width,
     flexDirection: "row",
-    justifyContent: "space-evenly",
-    padding: 10,
+    justifyContent: "center",
   },
 });