datepicker display for ios

src/app/screens/PluviometerSharingDataScreen.js

@@ -40,23 +40,23 @@ const validationSchema = Yup.object().shape({
     .min(0, "O valor deve ser maior ou igual a 0.")
     .max(10000)
     .label("pluviometer"),
-  data: Yup.string().required("Campo obrigatório. Por favor, selecione a data"),
+  //data: Yup.string().required("Campo obrigatório. Por favor, selecione a data"),
   images: Yup.array(),
 });
 
 function PluviometerSharingDataScreen(props) {
   const location = useLocation();
-  let dateTime = new Date().toString();
-  /*-------------------------------------------DATETIMEPICKER------------------------------------------------
+  //-------------------------------------------DATETIMEPICKER------------------------------------------------
 
   const { textStyle, defaultDate } = props;
   const [date, setDate] = useState(moment(defaultDate))
   const [show, setShow] = useState(false);
+  const [dateTime, setDateTime] = useState(moment(defaultDate)) //gambi pra inserir no BD
   
   //---------------ios------------------------
   const onChange = (e, selectedDate) => {
-      setDate(moment(selectedDate));
-      dateTime = moment(selectedDate).format("DD/MM/YYYY").toString();
+      setDate(moment(selectedDate));      
+      setDateTime(moment(selectedDate).format("DD/MM/YYYY").toString());
   }
   const onCancelPress = () => {
     setDate(moment(defaultDate));
@@ -71,8 +71,7 @@ function PluviometerSharingDataScreen(props) {
     setShow(false);
     if (selectedDate) {
       setDate(moment(selectedDate));
-      dateTime = moment(selectedDate).format("DD/MM/YYYY").toString();
-      //props.onDateChange(selectedDate);
+      setDateTime(moment(selectedDate).format("DD/MM/YYYY").toString());
     }
   }
 
@@ -84,11 +83,12 @@ function PluviometerSharingDataScreen(props) {
         mode="date"
         minimumDate={new Date(moment().subtract(1, 'month'))}
         maximumDate={new Date(moment())}
+        display={Platform.OS === 'ios' ? 'spinner' : 'default'} 
         onChange={Platform.OS === 'ios' ? onChange : onAndroidChange}
       />
     )
   }
-  ---------------------------------------------------------------------------------------------------------*/
+ // ---------------------------------------------------------------------------------------------------------*/
   return (
     <Screen style={styles.container}>
       <View style={{ alignItems: "center" }}>
@@ -104,7 +104,7 @@ function PluviometerSharingDataScreen(props) {
         <Form
           initialValues={{
             pluviometer: "",
-            data: "",
+            //data: "",
             images: [],
           }}
           onSubmit={(values) => {
@@ -129,34 +129,15 @@ function PluviometerSharingDataScreen(props) {
               />
           </View>
 
-          <View style={{ marginTop: 10, flex: 1, borderRadius: 25 }}>
-            <Text style={styles.labelStyle}>Data da coleta:</Text>
-            <View style={{ flex: 1, flexDirection: "row" }}>
-              <View style={{ flex: 1 }}>
-                <FormField
-                  keyboardType="numbers-and-punctuation"
-                  maxLength={10}
-                  name="data"
-                  placeholder="dd/mm/aaaa"
-                  values={dateTime}
-                  flex={1}
-                />
-              </View>
-              <FontAwesome5
-                style={styles.dateIcon}
-                name="calendar-day"
-                size={24}
-                color="grey"
-              />
-            </View>
-            {/*
+          <View style={{ marginTop: 10, flex: 1 }}>
+            <Text style={styles.labelStyle}>Data da coleta:</Text>            
             <TouchableOpacity style={styles.datepickerStyle}
               onPress={() => setShow(true)}>
               <View style={styles.datePickerView}>
-                <View style={{ flexDirection: "row", justifyContent: "space-between", width: 280 }}>
+                <View style={{ flexDirection: "row", flex: 0.8}}>
                   <Text style={{ fontSize: 16, marginLeft: 15 }}>{date.format('DD/MM/YYYY')}</Text>
-                  <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
-                </View>
+                </View>                
+                <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
                 {Platform.OS !== 'ios' && show && renderDatePicker()}
                 {Platform.OS === 'ios' && show && (
                   <Modal
@@ -190,7 +171,7 @@ function PluviometerSharingDataScreen(props) {
                               overflow: 'hidden',
                             }}>
                             <View style={{ marginTop: 20 }}>
-                              {renderDatePicker()}
+                              { renderDatePicker() }
                             </View>
                             <TouchableHighlight
                               underlayColor={'transparent'}
@@ -213,7 +194,6 @@ function PluviometerSharingDataScreen(props) {
                 )}
               </View>
             </TouchableOpacity>
-           */}
           </View>
           <FormImagePicker
             backgroundColor="#1976D2"
@@ -240,15 +220,16 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   datePickerView: {
-    width: 280,
     flexDirection: "row",
     justifyContent: "space-between",
     paddingVertical: 15,
+    flex: 1,
   },
   datepickerStyle: {
     borderRadius: 25,
-    width: 280,
     backgroundColor: "#f8f4f4",
+    flex: 0.9,
+    flexDirection: "row"
   },
   dateIcon: {
     marginTop: 25,