swaping datepicker for textinput

src/app/screens/PluviometerSharingDataScreen.js

@@ -22,18 +22,19 @@ import colors from "../config/colors";
 
 const validationSchema = Yup.object().shape({
   pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"),
+  data: Yup.string().min(1, "Por favor preencha a data"),
   images: Yup.array().min(1, "Por favor, selecione uma imagem."),
 });
 
 function PluviometerSharingDataScreen(props) {
   const location = useLocation();
-
-  /*-------------------------------------------DATETIMEPICKER------------------------------------------------*/
+  let dateTime = new Date().toString();
+  /*-------------------------------------------DATETIMEPICKER------------------------------------------------
 
   const { textStyle, defaultDate } = props;
   const [date, setDate] = useState(moment(defaultDate))
   const [show, setShow] = useState(false);
-  let dateTime = new Date().toString();
+  
   //---------------ios------------------------
   const onChange = (e, selectedDate) => {
       setDate(moment(selectedDate));
@@ -69,7 +70,7 @@ function PluviometerSharingDataScreen(props) {
       />
     )
   }
-  /*---------------------------------------------------------------------------------------------------------*/
+  ---------------------------------------------------------------------------------------------------------*/
   return (
     <Screen style={styles.container}>
 
@@ -86,6 +87,7 @@ function PluviometerSharingDataScreen(props) {
         <Form
           initialValues={{
             pluviometer: "",
+            data:"",
             images: [],
           }}
           onSubmit={(values) => {
@@ -117,6 +119,18 @@ function PluviometerSharingDataScreen(props) {
             <Text style={styles.labelStyle}>
               Data da coleta:
             </Text>
+            <View style={{flexDirection:"row"}}>
+            <FormField
+              keyboardType="numbers-and-punctuation"
+              maxLength={10}
+              name="data"
+              placeholder="dd/mm/aaaa" 
+              width={240}
+              values={dateTime}
+            />
+            <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
+            </View>
+            {/*
             <TouchableOpacity style={styles.datepickerStyle}
               onPress={() => setShow(true)}>
               <View style={styles.datePickerView}>
@@ -180,6 +194,7 @@ function PluviometerSharingDataScreen(props) {
                 )}
               </View>
             </TouchableOpacity>
+           */}
             </View>
           <FormImagePicker
             backgroundColor="#1976D2"
@@ -217,7 +232,8 @@ const styles = StyleSheet.create({
     backgroundColor: "#f8f4f4",
   },
   dateIcon: {
-    marginRight: 25,
+    marginTop: 25,
+    marginLeft: 15,
   },
   labelStyle: {
     fontSize: 16,