diff --git a/src/app/screens/SharingFloodZonesScreen.js b/src/app/screens/SharingFloodZonesScreen.js index cbcd893..51b4887 100644 --- a/src/app/screens/SharingFloodZonesScreen.js +++ b/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 ( - Pontos de alagamento +
console.log({ ...values, passable, location })} + validationSchema={validationSchema} + > + + setPassable(1)}> + + + Transitável + + - - setPassable(1)}> - - - Transitável - - + setPassable(0)}> + + + Intransitável + + + - setPassable(0)}> - - - Intransitável - - - + + + + +
); } @@ -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", }, });