Adding shadows and refactoring event location and time to its custom

component

src/app/components/ImageInput.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { Shadow } from "react-native-shadow-2";
 import {
   View,
   StyleSheet,
@@ -70,12 +71,24 @@ const launchImageLibrary = async (onChangeImage, callBack) => {
 
 function addNewImageBtn() {
   return (
+    <View style={styles.addBtnContainer}>
+    <Shadow
+      viewStyle={{width: "100%"}}
+      offset={[0, 4]}
+      distance={4}
+      radius={4}
+      startColor="rgba(0, 0, 0, 0.25)"
+      paintInside={true}
+    >
       <View style={styles.addBtn}>
+
         <MaterialCommunityIcons color={colors.white} name="camera" size={20} />
         <Text style={{ color: colors.white, marginLeft: 10, fontSize: 14 }}>
           CÂMERA
         </Text>
       </View>
+      </Shadow>
+      </View>
   );
 }
 
@@ -227,15 +240,20 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     height: 35,
   },
+  addBtnContainer: {
+    padding: 16,
+    elevation: 40,
+    marginVertical: 24,
+    width: "100%",
+  },
   addBtn: {
-    marginVertical: 10,
-    borderRadius: 6,
-    flexDirection: "row",
-    alignItems: "center",
     justifyContent: "center",
-    backgroundColor: colors.primary,
+    flexDirection: "row",
     height: 42,
     width: "100%",
+    alignItems: "center",
+    borderRadius: 6,
+    backgroundColor: colors.primary,
   },
 });
 

src/app/components/PickEventDateLocation.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { View } from "react-native";
+
+import colors from "../config/colors";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import FormDatePicker from "../components/forms/FormDatePicker";
+import FormLocationPicker from "../components/forms/FormLocationPicker";
+
+export default function PickEventDateLocation({
+  setDate = () => {},
+  setTime = () => {},
+  navigation = () => {},
+  location = true,
+}) {
+  return (
+    <View
+      style={{
+        flex: 1,
+        paddingHorizontal: 16,
+        flexDirection: "column",
+        justifyContent: "space-between",
+        alignContent: "flex-start",
+      }}
+    >
+      {/*Data da coleta:*/}
+      <View style={{ flex: 0.1 }}>
+        <FormDatePicker
+          textStyle={{
+            borderColor: colors.gray,
+            borderWidth: 3,
+          }}
+          defaultDate={new Date()}
+          onDateChange={(value) => setDate(value)}
+          onTimeChange={(value) => setTime(value)}
+        />
+      </View>
+      {/*Local do evento:*/}
+      {location &&
+      <TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
+        <FormLocationPicker />
+      </TouchableOpacity>}
+    </View>
+  );
+}

src/app/components/TextInput.js

@@ -3,9 +3,18 @@ import { View, TextInput, StyleSheet } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import colors from "../config/colors";
 import defaultStyles from "../config/styles";
+import {Shadow} from "react-native-shadow-2";
 
 function AppTextInput({ icon, width = "100%", ...otherProps }) {
   return (
+    <Shadow
+      viewStyle={{ width: width}}
+      offset={[0, 4]}
+      distance={4}
+      radius={4}
+      startColor="rgba(0, 0, 0, 0.25)"
+      paintInside={true}
+    >
     <View style={[styles.container, { width }]}>
       {icon && (
         <MaterialCommunityIcons
@@ -21,6 +30,7 @@ function AppTextInput({ icon, width = "100%", ...otherProps }) {
         {...otherProps}
       />
     </View>
+      </Shadow>
   );
 }
 
@@ -32,7 +42,6 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     padding: 10,
     flexDirection: "row",
-    marginVertical: 10,
   },
   icon: {
     marginRight: 10,

src/app/components/forms/FormField.js

@@ -3,12 +3,14 @@ import { useFormikContext } from "formik";
 
 import TextInput from "../TextInput";
 import ErrorMessage from "./ErrorMessage";
+import {View} from "react-native";
 
 function AppFormField({ name, width, ...otherProps }) {
   const { setFieldTouched, handleChange, errors, touched } = useFormikContext();
 
   return (
-    <>
+    <View
+      paddingHorizontal={16}>
       <TextInput
         onBlur={() => setFieldTouched(name)}
         onChangeText={handleChange(name)}
@@ -16,7 +18,7 @@ function AppFormField({ name, width, ...otherProps }) {
         {...otherProps}
       />
       <ErrorMessage error={errors[name]} visible={touched[name]} />
-    </>
+    </View>
   );
 }
 

src/app/components/forms/FormImagePicker.js

@@ -1,16 +1,13 @@
-import React, { useState } from "react";
+import React from "react";
 import { useFormikContext } from "formik";
 
 import ErrorMessage from "./ErrorMessage";
 import ImageInputList from "../ImageInputList";
-import { View, Text, StyleSheet, Modal, Alert } from "react-native";
-import colors from "../../config/colors";
-import { dimensions } from "../../config/dimensions";
+import { View, Alert } from "react-native";
 
 function FormImagePicker({ name }) {
   const { errors, setFieldValue, touched, values } = useFormikContext();
   const imageUris = values[name];
-  const [modalVisible, setModalVisible] = useState(false);
 
   const handleAdd = (uri) => {
     if (imageUris.length === 0) {
@@ -55,23 +52,5 @@ function FormImagePicker({ name }) {
   );
 }
 
-const styles = StyleSheet.create({
-  labelStyle: {
-    fontSize: dimensions.text.secondary,
-    fontWeight: "bold",
-    textAlign: "left",
-    color: colors.primary,
-    marginBottom: 5,
-    marginTop: 15,
-  },
-  centeredView: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    marginTop: 22,
-  },
-});
-
-
 
 export default FormImagePicker;

src/app/components/forms/SubmitButton.js

@@ -2,11 +2,17 @@ import React from "react";
 import { useFormikContext } from "formik";
 
 import Button from "../Button";
+import {View} from "react-native";
 
 function SubmitButton({ title }) {
   const { handleSubmit } = useFormikContext();
 
-  return <Button title={title} onPress={handleSubmit} />;
+  return (
+  <View
+    style={{paddingHorizontal: 16}}>
+      <Button  title={title} onPress={handleSubmit} />
+    </View>
+  );
 }
 
 export default SubmitButton;

src/app/screens/MapFeedScreen.js

@@ -9,19 +9,19 @@ export default function MapFeedScreen() {
   const focusChanged = attachFocusToQuery();
   const [error, setError] = useState(false);
 
-  useEffect(() => {
-    loadForms();
-  }, []);
+  // useEffect(() => {
+  //   loadForms();
+  // }, []);
 
-  const loadForms = async () => {
-    const response = await formsApi.getForms();
-    console.log(response);
-    if (!response.ok) {
-      console.log("resposta não ok!");
-      return setError(true);
-    }
-    setError(false);
-  }
+  // const loadForms = async () => {
+  //   const response = await formsApi.getForms();
+  //   console.log(response);
+  //   if (!response.ok) {
+  //     console.log("resposta não ok!");
+  //     return setError(true);
+  //   }
+  //   setError(false);
+  // }
 
 
   return (

src/app/screens/PluviometerSharingDataScreen.js

@@ -19,6 +19,7 @@ import moment from "moment";
 import FormLocationPicker from "../components/forms/FormLocationPicker";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { EventLocationContext } from "../context/EventLocationContext";
+import PickEventDateLocation from "../components/PickEventDateLocation";
 
 const dims = scaleDimsFromWidth(85, 85, 25);
 
@@ -92,26 +93,13 @@ function PluviometerSharingDataScreen(props) {
               alignContent: "flex-start",
             }}
           >
-            {/*Data da coleta:*/}
-            <View style={{ flex: 1 }}>
-              <FormDatePicker
-                textStyle={{
-                  borderColor: colors.gray,
-                  borderWidth: 3,
-                }}
-                defaultDate={new Date()}
-                onDateChange={(value) => setDateTime(value)}
-                onTimeChange={(value) => setTime(value)}
+          <PickEventDateLocation
+            setDate={setDateTime}
+            setTime={setTime}
+            navigation={props.navigation}
+            location={false}
             />
-            </View>
-            {/*Local do evento:*/}
-            {/* <View style={{ flex: 1 }}> */}
-            {/*   <TouchableOpacity */}
-            {/*     onPress={() => props.navigation.navigate("FormMap")} */}
-            {/*   > */}
-            {/*     <FormLocationPicker /> */}
-            {/*   </TouchableOpacity> */}
-            {/* </View> */}
+
           </View>
           <View style={{ flex: 1 }}>
             <Text style={styles.labelStyle}>Comentário:</Text>
@@ -133,7 +121,6 @@ function PluviometerSharingDataScreen(props) {
 
 const styles = StyleSheet.create({
   container: {
-    padding: 10,
     flex: 1,
   },
   image: {
@@ -143,6 +130,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   labelStyle: {
+    paddingHorizontal: 16,
     fontSize: dimensions.text.secondary,
     fontWeight: "bold",
     textAlign: "left",

src/app/screens/RainSharingDataScreen.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import { StyleSheet, View, ScrollView, PixelRatio } from "react-native";
+import { StyleSheet, View, ScrollView } from "react-native";
 import * as Yup from "yup";
 
 import { Form, SubmitButton, FormField } from "../components/forms";
@@ -17,6 +17,7 @@ import FormDatePicker from "../components/forms/FormDatePicker";
 import FormLocationPicker from "../components/forms/FormLocationPicker";
 import { EventLocationContext } from "../context/EventLocationContext";
 import { useIsFocused } from "@react-navigation/native";
+import PickEventDateLocation from "../components/PickEventDateLocation";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
@@ -68,7 +69,11 @@ function RainSharingDataScreen(props) {
           }}
           validationSchema={validationSchema}
         >
-          <View>
+          <View
+            style={{
+              paddingHorizontal: 16,
+            }}
+          >
             <View style={styles.imgs_row}>
               <TouchableNativeFeedback onPress={() => setRain(0)}>
                 <View style={styles.img_block}>
@@ -130,41 +135,14 @@ function RainSharingDataScreen(props) {
 
           <FormImagePicker backgroundColor={colors.primary} name="images" />
 
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "column",
-              justifyContent: "space-between",
-              alignContent: "flex-start",
-            }}
-          >
-            {/*Data da coleta:*/}
-            <View
-              style={{
-                flex: 1,
-              }}
-            >
-              <FormDatePicker
-                textStyle={{
-                  borderColor: colors.gray,
-                  borderWidth: 3,
-                }}
-                defaultDate={new Date()}
-                onDateChange={(value) => setDate(value)}
-                onTimeChange={(value) => setTime(value)}
+          <PickEventDateLocation
+            setDate={setDate}
+            setTime={setTime}
+            navigation={props.navigation}
           />
-            </View>
-            {/*Local do evento:*/}
-            <View style={{ flex: 1 }}>
-              <TouchableOpacity
-                onPress={() => props.navigation.navigate("FormMap")}
-              >
-                <FormLocationPicker />
-              </TouchableOpacity>
-            </View>
-          </View>
-          <View style={{ flex: 1 }}>
+
           <Text style={styles.labelStyle}>Comentário:</Text>
+
           <FormField
             maxLength={255}
             multiline
@@ -172,7 +150,7 @@ function RainSharingDataScreen(props) {
             numberOfLines={3}
             placeholder="Escreva um comentário (Opcional)..."
           />
-          </View>
+
           <SubmitButton title="Enviar" backgroundColor={colors.primary} />
         </Form>
       </ScrollView>
@@ -182,7 +160,6 @@ function RainSharingDataScreen(props) {
 
 const styles = StyleSheet.create({
   container: {
-    padding: 10,
     backgroundColor: colors.white,
   },
   img_block: {
@@ -202,6 +179,7 @@ const styles = StyleSheet.create({
     color: colors.danger,
   },
   labelStyle: {
+    paddingHorizontal: 16,
     fontSize: dimensions.text.secondary,
     fontWeight: "bold",
     textAlign: "left",

src/app/screens/RiverFloodSharingDataScreen.js

@@ -23,6 +23,7 @@ import moment from "moment";
 import FormDatePicker from "../components/forms/FormDatePicker";
 import FormLocationPicker from "../components/forms/FormLocationPicker";
 import { EventLocationContext } from "../context/EventLocationContext";
+import PickEventDateLocation from "../components/PickEventDateLocation";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
@@ -76,7 +77,7 @@ function RiverFloodSharingDataScreen(props) {
           }}
           validationSchema={validationSchema}
         >
-          <View>
+          <View style={{paddingHorizontal: 16}}>
             <View style={styles.imgs_row}>
               <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
                 <View style={styles.img_block}>
@@ -125,38 +126,11 @@ function RiverFloodSharingDataScreen(props) {
           )}
 
           <FormImagePicker backgroundColor={colors.primary} name="images" />
+          <PickEventDateLocation
+            setDate={setDate}
+            setTime={setTime}
+            navigation={props.navigation}/>
 
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "column",
-              justifyContent: "space-between",
-              alignContent: "flex-start",
-            }}
-          >
-            {/*Data da coleta:*/}
-            <View
-              style={{ flex: 1 }}
-            >
-              <FormDatePicker
-                textStyle={{
-                  borderColor: colors.gray,
-                  borderWidth: 3,
-                }}
-                defaultDate={new Date()}
-                onDateChange={(value) => setDate(value)}
-                onTimeChange={(value) => setTime(value)}
-              />
-            </View>
-            {/*Local do evento:*/}
-            <View style={{ flex: 1 }}>
-              <TouchableOpacity
-                onPress={() => props.navigation.navigate("FormMap")}
-              >
-                <FormLocationPicker />
-              </TouchableOpacity>
-            </View>
-          </View>
           <View style={{ flex: 1 }}>
             <Text style={styles.labelStyle}>Comentário:</Text>
             <FormField
@@ -176,7 +150,6 @@ function RiverFloodSharingDataScreen(props) {
 
 const styles = StyleSheet.create({
   container: {
-    padding: 10,
     backgroundColor: colors.white,
   },
   img_block: {
@@ -195,6 +168,7 @@ const styles = StyleSheet.create({
     color: colors.danger,
   },  
   labelStyle: {
+    paddingHorizontal: 16,
     fontSize: dimensions.text.secondary,
     fontWeight: "bold",
     textAlign: "left",

src/app/screens/SharingFloodZonesScreen.js

@@ -20,6 +20,7 @@ import moment from "moment";
 import FormDatePicker from "../components/forms/FormDatePicker";
 import FormLocationPicker from "../components/forms/FormLocationPicker";
 import { EventLocationContext } from "../context/EventLocationContext";
+import PickEventDateLocation from "../components/PickEventDateLocation";
 
 /*function submitForm(props) {
   console.log(props);
@@ -61,7 +62,14 @@ function SharingFloodZonesScreen(props) {
               setError(true);
               return;
             }
-            insertFloodZone({ ...values, passable, location, date, time, address });
+            insertFloodZone({
+              ...values,
+              passable,
+              location,
+              date,
+              time,
+              address,
+            });
             showMessage({
               message: "Informação enviada!",
               duration: 1950,
@@ -112,38 +120,11 @@ function SharingFloodZonesScreen(props) {
 
           <FormImagePicker name="images" height={10} />
 
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "column",
-              justifyContent: "space-between",
-              alignContent: "flex-start",
-            }}
-          >
-            {/*Data da coleta:*/}
-            <View
-              style={{ flex: 0.1 }}
-            >
-              <FormDatePicker
-                textStyle={{
-                  borderColor: colors.gray,
-                  borderWidth: 3,
-                }}
-                defaultDate={new Date()}
-                onDateChange={(value) => setDate(value)}
-                onTimeChange={(value) => setTime(value)}
-              />
-            </View>
-            {/*Local do evento:*/}
-            <View style={{ flex: 1 }}>
-              <TouchableOpacity
-                onPress={() => props.navigation.navigate("FormMap")}
-              >
-                <FormLocationPicker />
-              </TouchableOpacity>
-            </View>
-          </View>
-          <View style={{ flex: 1 }}>
+          <PickEventDateLocation
+            setDate={setDate}
+            setTime={setTime}
+            navigation={props.navigation}/>
+
           <Text style={styles.labelStyle}>Comentário:</Text>
           <FormField
             maxLength={255}
@@ -152,7 +133,6 @@ function SharingFloodZonesScreen(props) {
             numberOfLines={3}
             placeholder="Escreva um comentário (Opcional)..."
           />
-          </View>
           <SubmitButton title="Enviar" backgroundColor={colors.primary} />
         </Form>
       </KeyboardAwareScrollView>
@@ -164,7 +144,7 @@ const dims = scaleDimsFromWidth(93, 106, 30.0);
 
 const styles = StyleSheet.create({
   container: {
-    padding: 10,
+    // padding: 17,
     backgroundColor: colors.white,
   },
 
@@ -190,12 +170,14 @@ const styles = StyleSheet.create({
     fontSize: dimensions.text.default,
   },
   error_txt: {
+    paddingHorizontal: 16,
     fontSize: 18,
     color: colors.danger,
   },
   labelStyle: {
     fontSize: dimensions.text.secondary,
     fontWeight: "bold",
+    paddingHorizontal: 16,
     textAlign: "left",
     color: colors.lightBlue,
   },

src/package.json

@@ -51,6 +51,7 @@
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
     "react-native-searchable-dropdown": "^1.1.3",
+    "react-native-shadow-2": "^3.0.0",
     "react-native-simple-dialogs": "^1.4.0",
     "react-native-svg": "^12.1.0",
     "react-native-svg-uri": "^1.2.3",