fixing pre-selected items on forms

src/app/screens/RainSharingDataScreen.js

@@ -15,13 +15,14 @@ import { scaleDimsFromWidth } from "../config/dimensions";
 import assets from "../config/assets";
 
 const validationSchema = Yup.object().shape({
-  images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
+  images: Yup.array(),
 });
 
 const borderWidth = 4;
 
 function RainSharingDataScreen(props) {
-  const [rain, setRain] = useState(0);
+  const [rain, setRain] = useState(-1);
+  const [error, setError] = useState(false);
   const location = useLocation();
 
   return (
@@ -43,6 +44,10 @@ function RainSharingDataScreen(props) {
             images: [],
           }}
           onSubmit={(values) => {
+            if (rain == -1) {
+              setError(true);
+              return;
+            }
             insertRainData({ ...values, rain, location });
             showMessage({
               message: "Informação enviada!",
@@ -138,6 +143,13 @@ function RainSharingDataScreen(props) {
               </TouchableNativeFeedback>
             </View>
           </View>
+
+          {error && rain == -1 && (
+            <Text style={styles.error_txt}>
+              Selecione se está passável ou não
+            </Text>
+          )}
+
           <FormImagePicker backgroundColor={colors.primary} name="images" />
 
           <SubmitButton title="Enviar" backgroundColor={colors.primary} />
@@ -176,6 +188,10 @@ const styles = StyleSheet.create({
     textAlign: "center",
     marginTop: 10,
   },
+  error_txt: {
+    fontSize: 18,
+    color: colors.danger,
+  },
 });
 
 export default RainSharingDataScreen;

src/app/screens/RiverFloodSharingDataScreen.js

@@ -15,14 +15,15 @@ import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view
 import assets from "../config/assets";
 
 const validationSchema = Yup.object().shape({
-  images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
+  images: Yup.array(),
 });
 
 const borderWidth = 4;
 
 function RiverFloodSharingDataScreen(props) {
-  const [riverScale, setRiverScale] = useState(0);
+  const [riverScale, setRiverScale] = useState(-1);
   const location = useLocation();
+  const [error, setError] = useState(false);
 
   return (
     <Screen style={styles.container}>
@@ -47,6 +48,10 @@ function RiverFloodSharingDataScreen(props) {
             images: [],
           }}
           onSubmit={(values) => {
+            if (riverScale == -1) {
+              setError(true);
+              return;
+            }
             insertRiverData({ ...values, riverScale, location });
             showMessage({
               message: "Informação enviada!",
@@ -124,6 +129,10 @@ function RiverFloodSharingDataScreen(props) {
             </View>
           </View>
 
+          {error && riverScale == -1 && (
+            <Text style={styles.error_txt}>Selecione ao menos uma opção</Text>
+          )}
+
           <FormImagePicker backgroundColor={colors.primary} name="images" />
 
           <SubmitButton title="Enviar" backgroundColor={colors.primary} />
@@ -156,6 +165,10 @@ const styles = StyleSheet.create({
     textAlign: "center",
     marginTop: 10,
   },
+  error_txt: {
+    fontSize: 18,
+    color: colors.danger,
+  },
 });
 
 export default RiverFloodSharingDataScreen;

src/app/screens/SharingFloodZonesScreen.js

@@ -15,18 +15,18 @@ import Screen from "../components/Screen";
 import assets from "../config/assets";
 
 function submitForm(props) {
+  console.log(props);
   insertFloodZone(props);
 }
 
 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"),
+  images: Yup.array(),
+  description: Yup.string().label("Description"),
 });
 
 function SharingFloodZonesScreen(props) {
-  const [passable, setPassable] = useState(0);
+  const [passable, setPassable] = useState(-1);
+  const [error, setError] = useState(false);
   const location = useLocation();
 
   return (
@@ -53,6 +53,10 @@ function SharingFloodZonesScreen(props) {
             description: "",
           }}
           onSubmit={(values) => {
+            if (passable == -1) {
+              setError(true);
+              return;
+            }
             submitForm({ ...values, passable, location });
             showMessage({
               message: "Informação enviada!",
@@ -92,6 +96,10 @@ function SharingFloodZonesScreen(props) {
             </TouchableNativeFeedback>
           </View>
 
+          {error && passable == -1 && (
+            <Text style={styles.error_txt}>Selecione ao menos uma opção</Text>
+          )}
+
           <FormImagePicker name="images" height={10} />
           <FormField
             maxLength={255}
@@ -106,7 +114,7 @@ function SharingFloodZonesScreen(props) {
     </Screen>
   );
 }
-const borderWidth = 3;
+const borderWidth = 4;
 
 const styles = StyleSheet.create({
   container: {
@@ -142,6 +150,10 @@ const styles = StyleSheet.create({
   text: {
     fontSize: 14,
   },
+  error_txt: {
+    fontSize: 18,
+    color: colors.danger,
+  },
 });
 
 export default SharingFloodZonesScreen;