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,7 +66,7 @@ function PluviometerSharingDataScreen(props) {
         value={new Date(date)}
         mode="date"
         maximumDate={new Date()}
-        onChange={onAndroidChange}
+        onChange={Platform.OS === 'ios' ? onChange : onAndroidChange}
       />
     )
   }
@@ -104,11 +121,64 @@ function PluviometerSharingDataScreen(props) {
             <TouchableOpacity style={styles.datepickerStyle}
               onPress={() => setShow(true)}>
               <View style={styles.datePickerView}>
-              <Text style={{ fontSize: 16, marginLeft: 15 }}>
-                {date.format('DD/MM/YYYY')}
-              </Text>
+                <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" />
-              {show && renderDatePicker()}
+                </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>
@@ -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;