creating datepicker for ios

src/app/screens/PluviometerSharingDataScreen.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { StyleSheet, Text, View, Image, ScrollView } from "react-native";
+import { StyleSheet, Text, View, Image, ScrollView, Modal, Platform } from "react-native";
 import * as Yup from "yup";
 
 import {
@@ -13,7 +13,7 @@ import Screen from "../components/Screen";
 import useLocation from "../hooks/useLocation";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import { insertPluviometerData } from "../database/databaseLoader";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableHighlight, TouchableOpacity } from "react-native-gesture-handler";
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { FontAwesome5 } from '@expo/vector-icons';
 import { showMessage } from "react-native-flash-message";
@@ -33,6 +33,22 @@ function PluviometerSharingDataScreen(props) {
   const [date, setDate] = useState(moment(defaultDate))
   const [show, setShow] = useState(false);
   let dateTime = new Date().toString();
+  //---------------ios------------------------
+  const onChange = (e, selectedDate) => {
+    setShow(false);
+    if (selectedDate) {
+      setDate(moment(defaultDate));
+    }
+  }
+  const onCancelPress = () => {
+    setDate(moment(defaultDate));
+    setShow(false);
+  }
+  const onDonePress = () => {
+    setDate(moment(date));
+    setShow(false);
+  }
+  //-------------------------------------------
 
   const onAndroidChange = (e, selectedDate) => {
     setShow(false);
@@ -42,6 +58,7 @@ function PluviometerSharingDataScreen(props) {
       //props.onDateChange(selectedDate);
     }
   }
+
   const renderDatePicker = () => {
     return (
       <DateTimePicker
@@ -49,14 +66,14 @@ function PluviometerSharingDataScreen(props) {
         value={new Date(date)}
         mode="date"
         maximumDate={new Date()}
-        onChange={onAndroidChange}
+        onChange={Platform.OS === 'ios' ? onChange : onAndroidChange}
       />
     )
   }
   /*---------------------------------------------------------------------------------------------------------*/
   return (
     <Screen style={styles.container}>
-      
+
       <View style={{ alignSelf: "center" }}>
         <Image
           style={styles.image}
@@ -67,60 +84,113 @@ function PluviometerSharingDataScreen(props) {
         </Text>
       </View>
       <ScrollView style={styles.container}>
-      <Form
-        initialValues={{
-          pluviometer: "",
-          images: [],
-        }}
-        onSubmit={(values) => {
-          insertPluviometerData({ ...values, dateTime, location });
-          showMessage({
-            message: "Informação enviada!",
-            duration: 1950,
-            icon: "success",
-            type: "success",
-          });
-          props.navigation.goBack(null);
-        }}
-        validationSchema={validationSchema}
-      >
-        <View style={{ marginTop: 30 }}>
-          <Text style={styles.labelStyle}>
-            Quantidade de chuva:
+        <Form
+          initialValues={{
+            pluviometer: "",
+            images: [],
+          }}
+          onSubmit={(values) => {
+            insertPluviometerData({ ...values, dateTime, location });
+            showMessage({
+              message: "Informação enviada!",
+              duration: 1950,
+              icon: "success",
+              type: "success",
+            });
+            props.navigation.goBack(null);
+          }}
+          validationSchema={validationSchema}
+        >
+          <View style={{ marginTop: 30 }}>
+            <Text style={styles.labelStyle}>
+              Quantidade de chuva:
           </Text>
-          <FormField
-            keyboardType="number-pad"
-            maxLength={200}
-            name="pluviometer"
-            placeholder="Digite a quantidade de chuva"
-            width={280}
-          />
-        </View>
+            <FormField
+              keyboardType="number-pad"
+              maxLength={200}
+              name="pluviometer"
+              placeholder="Digite a quantidade de chuva"
+              width={280}
+            />
+          </View>
 
-        <View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
-          <Text style={styles.labelStyle}>
-            Data da coleta:
+          <View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
+            <Text style={styles.labelStyle}>
+              Data da coleta:
           </Text>
-          <TouchableOpacity style={styles.datepickerStyle}
-            onPress={() => setShow(true)}>
-            <View style={styles.datePickerView}>
-              <Text style={{ fontSize: 16, marginLeft: 15 }}>
-                {date.format('DD/MM/YYYY')}
-              </Text>
-              <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
-              {show && renderDatePicker()}
-            </View>
-          </TouchableOpacity>
-        </View>
-        <FormImagePicker
-          backgroundColor="#1976D2"
-          name="images"
-          styles={{ width: 50 }}
-        />
-        <SubmitButton title="Enviar" style={{marginBottom:100}}/>
-        <View style={{ flex: 1 }}>
-        </View>
-      </Form>
+            <TouchableOpacity style={styles.datepickerStyle}
+              onPress={() => setShow(true)}>
+              <View style={styles.datePickerView}>
+                <View style={{ flexDirection:"row", justifyContent:"space-between", width: 280 }}>
+                  <Text style={{fontSize: 16, marginLeft: 15}}>{date.format('DD/MM/YYYY')}</Text>
+                  <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
+                </View>
+                {Platform.OS !== 'ios' && show &&  renderDatePicker()}
+                {Platform.OS === 'ios' && show && (
+                    <Modal
+                      transparent={true}
+                      animationType="slide"
+                      visible={show}
+                      supportedOrientations={['portrait']}
+                      onRequestClose={() => setShow(false)}>
+                      <View style={{ flex: 1 }}>
+                        <TouchableHighlight
+                          style={{
+                            flex: 1,
+                            alignItems: 'flex-end',
+                            flexDirection: 'row',
+                          }}
+                          activeOpacity={1}
+                          visible={show}>
+                          onPress={() => setShow(false)}
+                          <TouchableHighlight
+                            underlayColor={''}
+                            style={{
+                              flex: 1,
+                              borderTopColor: 'primary',
+                              borderTopWidth: 1,
+                            }}
+                            onPress={() => console.log('Datepicker press')}>
+                            <View
+                              style={{
+                                backgroundColor: '#f8f8ff',
+                                height: 256,
+                                overflow: 'hidden',
+                              }}>
+                                <View style={{ marginTop:20 }}>
+                                  { renderDatePicker }
+                                </View>
+                              <TouchableHighlight
+                                underlayColor={'transparent'}
+                                onPress={() => onCancelPress()}
+                                style={(styles.btnText, styles.btnCancel)}>
+                                <Text>Cancelar</Text>
+                              </TouchableHighlight>
+        
+                              <TouchableHighlight
+                                underlayColor={'transparent'}
+                                onPress={() => onDonePress()}
+                                style={(styles.btnText, styles.btnDone)}>
+                                <Text>OK</Text>
+                              </TouchableHighlight>
+                            </View>
+                          </TouchableHighlight>
+                        </TouchableHighlight>
+                      </View>
+                    </Modal>
+                )}
+              </View>
+            </TouchableOpacity>
+          </View>
+          <FormImagePicker
+            backgroundColor="#1976D2"
+            name="images"
+            styles={{ width: 50 }}
+          />
+          <SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
+          <View style={{ flex: 1 }}>
+          </View>
+        </Form>
       </ScrollView>
     </Screen>
   );
@@ -148,7 +218,7 @@ const styles = StyleSheet.create({
     backgroundColor: "#f8f4f4",
   },
   dateIcon: {
-    marginRight: 15,
+    marginRight: 25,
   },
   labelStyle: {
     fontSize: 16,
@@ -157,6 +227,21 @@ const styles = StyleSheet.create({
     color: "#1976D2",
     marginBottom: 5,
   },
+  btnText: {
+    position: "absolute",
+    top: 0,
+    height: 42,
+    paddingHorizontal: 20,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  btnCancel: {
+    left: 0,
+  },
+  btnDone: {
+    right: 0,
+  },
 });
 
 export default PluviometerSharingDataScreen;