updating date input layout

src/app/components/forms/FormDatePicker.js

@@ -8,6 +8,7 @@ import {
   Platform,
   TouchableOpacity,
 } from "react-native";
+import { FontAwesome5 } from "@expo/vector-icons";
 import DateTimePicker from "@react-native-community/datetimepicker";
 
 import moment from "moment";
@@ -64,7 +65,16 @@ const FormDatePicker = (props) => {
 
   return (
     <TouchableOpacity onPress={() => setShow(true)}>
-      <Text> {date.format("DD/MM/YYYY")}</Text>
+      <View style={{ flex: 1, flexDirection: "row", alignItems: 'center', justifyContent: "space-between" }}>
+        <View style={ styles.dateInput }>
+          <Text> {date.format("DD/MM/YYYY")}</Text>
+        </View>
+        <FontAwesome5
+          name="calendar-day"
+          size={30}
+          color="grey"
+        />
+      </View>
       {Platform.OS !== "ios" && show && renderDatePicker()}
 
       {Platform.OS === "ios" && show && (
@@ -130,7 +140,7 @@ const FormDatePicker = (props) => {
 FormDatePicker.defaultProps = {
   textStyle: {},
   defaultDate: moment(),
-  onDateChange: () => {},
+  onDateChange: () => { },
 };
 
 const styles = StyleSheet.create({
@@ -149,6 +159,13 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  dateInput: {
+    flex: 0.97,
+    backgroundColor: colors.light,
+    borderRadius: 25,
+    padding: 18,
+    marginVertical: 10,
+  }
 });
 
 export default FormDatePicker;

src/app/screens/PluviometerSharingDataScreen.js

@@ -19,9 +19,7 @@ import Screen from "../components/Screen";
 import useLocation from "../hooks/useLocation";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import { insertPluviometerData } from "../database/databaseLoader";
-import { FontAwesome5 } from "@expo/vector-icons";
 import { showMessage } from "react-native-flash-message";
-import colors from "../config/colors";
 import { scaleDimsFromWidth } from "../config/dimensions";
 import FormDatePicker from "../components/forms/FormDatePicker";
 
@@ -83,8 +81,8 @@ function PluviometerSharingDataScreen(props) {
             />
           </View>
 
-          <View style={{ marginTop: 10 }}>
-            <Text style={styles.labelStyle}>Data da coleta:</Text>
+          <View style={{ marginTop: 10, flex: 1 }}>
+            <Text style={styles.labelStyle}>Data da coleta:</Text> 
             <FormDatePicker
               textStyle={{
                 padding: 15,
@@ -95,7 +93,7 @@ function PluviometerSharingDataScreen(props) {
               onDateChange={(value) => setDateTime(value)}
             />
           </View>
-
+          
           <FormImagePicker
             backgroundColor="#1976D2"
             name="images"
@@ -122,22 +120,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
-  datePickerView: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    paddingVertical: 15,
-    flex: 1,
-  },
-  datepickerStyle: {
-    borderRadius: 25,
-    backgroundColor: "#f8f4f4",
-    flex: 0.9,
-    flexDirection: "row"
-  },
-  dateIcon: {
-    marginTop: 25,
-    marginLeft: 15,
-  },
   labelStyle: {
     fontSize: 16,
     fontWeight: "bold",