River Flood Sharing Data Screen

src/app/screens/PluviometerSharingDataScreen.js

@@ -16,7 +16,7 @@ import FormImagePicker from "../components/forms/FormImagePicker";
 
 const validationSchema = Yup.object().shape({
     pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"),
-    images: Yup.array().min(1, "Please select at least one image."),
+    images: Yup.array().min(1, "Por favor, selecione uma imagem."),
 });
 
 

src/app/screens/RainSharingDataScreen.js

@@ -30,6 +30,9 @@ function RainSharingDataScreen() {
 
   return (
     <Screen style={styles.container}>
+      <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#1976D2', textAlign: 'center', marginBottom: 30 }}>
+        Chuva
+      </Text>
       <Form
         initialValues={{
           title: "",
@@ -42,16 +45,6 @@ function RainSharingDataScreen() {
         validationSchema={validationSchema}
       >
         <View>
-          {/* <Text
-            style={{
-              fontSize: 25,
-              textAlign: "center",
-              backgroundColor: "lightgray",
-            }}
-          >
-            Enviar uma informação
-          </Text> */}
-
           <View
             style={{ flexDirection: "row", justifyContent: "space-around" }}
           >
@@ -148,7 +141,7 @@ function RainSharingDataScreen() {
 
 const styles = StyleSheet.create({
   container: {
-    padding: 10,
+    paddingHorizontal: 10,
   },
   img_block: {
     borderRadius: 5,
@@ -156,6 +149,7 @@ const styles = StyleSheet.create({
     borderStyle: "dotted",
     borderColor: colors.primary,
     alignItems: "center",
+    width: 110,
   },
   floodingLogo: {
     width: 85,

src/app/screens/RiverFloodSharingDataScreen.js

@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import { Button, StyleSheet, View } from "react-native";
+import * as Yup from "yup";
+
+import {
+    Form,
+    FormField,
+    FormPicker as Picker,
+    SubmitButton,
+} from "../components/forms";
+import CategoryPickerItem from "../components/CategoryPickerItem";
+import Screen from "../components/Screen";
+import FormImagePicker from "../components/forms/FormImagePicker";
+import useLocation from "../hooks/useLocation";
+import { Image, Text, TouchableOpacity } from "react-native";
+import colors from "../config/colors";
+import { TouchableNativeFeedback } from "react-native-gesture-handler";
+
+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 borderWidth = 4;
+
+function RiverFloodSharingDataScreen() {
+    const [passable, setPassable] = useState(0);
+
+    return (
+        <Screen style={styles.container}>
+            <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#1976D2', textAlign: 'center', marginBottom: 30 }}>
+                Nível da água do rio
+            </Text>
+            <Form
+                initialValues={{
+                    title: "",
+                    price: "",
+                    description: "",
+                    category: null,
+                    images: [],
+                }}
+                onSubmit={(values) => submitForm({ ...values, passable, location })}
+                validationSchema={validationSchema}
+            >
+                <View>
+                    <View
+                        style={{ flexDirection: "row", justifyContent: "space-around" }}
+                    >
+                        <TouchableNativeFeedback onPress={() => setPassable(0)}>
+                            <View
+                                borderWidth={passable == 0 ? borderWidth : 0}
+                                style={styles.img_block}
+                            >
+                                <Image
+                                    style={styles.floodingLogo}
+                                    source={require("../assets/rio_baixo.png")}
+                                />
+                                <Text style={styles.text}>Baixo</Text>
+                            </View>
+                        </TouchableNativeFeedback>
+
+                        <TouchableNativeFeedback onPress={() => setPassable(1)}>
+                            <View
+                                borderWidth={passable == 1 ? borderWidth : 0}
+                                style={styles.img_block}
+                            >
+                                <Image
+                                    style={styles.floodingLogo}
+                                    source={require("../assets/rio_normal.png")}
+                                />
+                                <Text style={styles.text}>Rio normal</Text>
+                            </View>
+                        </TouchableNativeFeedback>
+                    </View>
+
+                    <View
+                        style={{ flexDirection: "row", justifyContent: "space-around" }}
+                    >
+                        <TouchableNativeFeedback onPress={() => setPassable(2)}>
+                            <View
+                                borderWidth={passable == 2 ? borderWidth : 0}
+                                style={styles.img_block}
+                            >
+                                <Image
+                                    style={styles.floodingLogo}
+                                    source={require("../assets/rio_alto.png")}
+                                />
+                                <Text style={styles.text}>Alto</Text>
+                            </View>
+                        </TouchableNativeFeedback>
+
+                        <TouchableNativeFeedback onPress={() => setPassable(3)}>
+                            <View
+                                borderWidth={passable == 3 ? borderWidth : 0}
+                                style={styles.img_block}
+                            >
+                                <Image
+                                    style={styles.floodingLogo}
+                                    source={require("../assets/rio_transbordando.png")}
+                                />
+                                <Text style={styles.text}>Transbordando</Text>
+                            </View>
+                        </TouchableNativeFeedback>
+                    </View>
+                </View>
+                <FormImagePicker backgroundColor="#1976D2" name="images" />
+
+                <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+            </Form>
+        </Screen>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 10,
+    },
+    img_block: {
+        borderRadius: 5,
+        padding: 10,
+        borderStyle: "dotted",
+        borderColor: colors.primary,
+        alignItems: "center",
+        width:130,
+    },
+    floodingLogo: {
+        width: 85,
+        height: 85,
+    },
+    text: {
+        fontSize: 14,
+        textAlign: "center",
+        marginTop: 10,
+    },
+});
+
+export default RiverFloodSharingDataScreen;

src/app/screens/SharingDataScreen.js

@@ -6,6 +6,7 @@ import { createStackNavigator } from "@react-navigation/stack";
 import RainSharingDataScreen from "../screens/RainSharingDataScreen";
 import SharingFloodZonesScreen from "./SharingFloodZonesScreen";
 import PluviometerSharingDataScreen from "./PluviometerSharingDataScreen";
+import RiverFloodSharingDataScreen from "./RiverFloodSharingDataScreen";
 
 //1/3
 
@@ -55,7 +56,7 @@ function SharingDataScreen({ navigation }) {
           <Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity style={{ alignItems: "center" }}>
+        <TouchableOpacity style={{ alignItems: "center" }} onPress={() => navigation.navigate('RiverFloodData')}>
           <Image
             style={styles.floodingLogo}
             source={require("../assets/nivel_rio.png")}
@@ -92,12 +93,11 @@ function RainSharingDataNavigator() {
   return (
     <Stack.Navigator initialRouteName="SharingData">
       <Stack.Screen name="SharingData" component={SharingDataScreen} />
+
       <Stack.Screen name="RainSharingData" component={RainSharingDataScreen} />
-      <Stack.Screen
-        name="FloodSharingData"
-        component={SharingFloodZonesScreen}
-      />
+      <Stack.Screen name="FloodSharingData" component={SharingFloodZonesScreen}/>
       <Stack.Screen name="PluviometerSharingData" component={PluviometerSharingDataScreen} />
+      <Stack.Screen name="RiverFloodData" component={RiverFloodSharingDataScreen} />
     </Stack.Navigator>
   );
 }

src/app/screens/SharingFloodZonesScreen.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Dimensions } from "react-native";
-import { StyleSheet, Text, Image, View } from "react-native";
+import { StyleSheet, Text, Image, View, KeyboardAvoidingView } from "react-native";
 import * as Yup from "yup";
 
 import { Form, SubmitButton, FormField } from "../components/forms";
@@ -31,7 +31,12 @@ function SharingFloodZonesScreen() {
   const location = useLocation();
 
   return (
-    <Screen style={styles.container}>
+    <KeyboardAvoidingView
+      behavior="padding"
+      style={styles.container}>
+      <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#1976D2', textAlign: 'center', marginBottom: 30 }}>
+        Pontos de alagamento
+      </Text>
       <Form
         initialValues={{
           images: [],
@@ -69,7 +74,6 @@ function SharingFloodZonesScreen() {
         </View>
 
         <FormImagePicker name="images" height={10} />
-
         <FormField
           maxLength={255}
           multiline
@@ -79,14 +83,14 @@ function SharingFloodZonesScreen() {
         />
         <SubmitButton title="Enviar" backgroundColor={colors.primary} />
       </Form>
-    </Screen>
+
+    </KeyboardAvoidingView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    padding: 10,
-    justifyContent: "center",
+    paddingHorizontal: 10,
   },
 
   header: {