Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SudoPlz/6959001879fbfcc7e2aa42a428a5265c to your computer and use it in GitHub Desktop.
Save SudoPlz/6959001879fbfcc7e2aa42a428a5265c to your computer and use it in GitHub Desktop.
diff --git a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerManager.m b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerManager.m
index d1cd1cd..817f6c9 100644
--- a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerManager.m
+++ b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerManager.m
@@ -31,13 +31,16 @@ @implementation RCTConvert(UIDatePicker)
@end
-@implementation RNDateTimePickerManager
+@implementation RNDateTimePickerManager {
+ RNDateTimePicker* createdView;
+}
RCT_EXPORT_MODULE()
- (UIView *)view
{
- return [RNDateTimePicker new];
+ createdView = [RNDateTimePicker new];
+ return createdView;
}
+ (NSString*) datepickerStyleToString: (UIDatePickerStyle) style {
@@ -57,6 +60,31 @@ + (NSString*) datepickerStyleToString: (UIDatePickerStyle) style {
}
}
+RCT_EXPORT_METHOD(getCurrentValueUTC:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
+{
+ dispatch_async(dispatch_get_main_queue(), ^{
+ if (self->createdView == nil) {
+ resolve(@{
+ @"error": @"RNDateTimePickerManager.m createdView not initialised",
+ });
+ } else {
+ static NSDateFormatter *formatter;
+ static dispatch_once_t onceToken;
+ dispatch_once(&onceToken, ^{
+ formatter = [NSDateFormatter new];
+ formatter.dateFormat = @"yyyy-MM-dd'T'HH:mm:ss.SSSZZZZZ";
+ formatter.locale = [NSLocale localeWithLocaleIdentifier:@"en_US_POSIX"];
+ formatter.timeZone = [NSTimeZone timeZoneWithName:@"UTC"];
+ });
+ NSDate *chosenDate = [self->createdView date];
+
+ resolve(@{
+ @"value": [formatter stringFromDate:chosenDate],
+ });
+ }
+ });
+}
+
RCT_EXPORT_METHOD(getDefaultDisplayValue:(NSDictionary *)options resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
{
dispatch_async(dispatch_get_main_queue(), ^{
diff --git a/node_modules/@react-native-community/datetimepicker/src/datetimepicker.ios.js b/node_modules/@react-native-community/datetimepicker/src/datetimepicker.ios.js
index dae9076..b6f3f41 100644
--- a/node_modules/@react-native-community/datetimepicker/src/datetimepicker.ios.js
+++ b/node_modules/@react-native-community/datetimepicker/src/datetimepicker.ios.js
@@ -15,7 +15,7 @@ import {IOS_DISPLAY, MODE_DATE} from './constants';
import invariant from 'invariant';
import React, {useEffect, useState} from 'react';
import {getPickerHeightStyle} from './layoutUtilsIOS';
-import {Platform, StyleSheet} from 'react-native';
+import {Platform, StyleSheet, NativeModules} from 'react-native';
import type {
Event,
@@ -41,6 +41,10 @@ const getDisplaySafe = (display: IOSDisplay) => {
return display;
};
+export const getCurrentValueUTC = () => {
+ return NativeModules.RNDateTimePickerManager.getCurrentValueUTC();
+}
+
export default function Picker({
value,
locale,
@@ -107,6 +111,7 @@ export default function Picker({
const dates: DatePickerOptions = {value, maximumDate, minimumDate};
toMilliseconds(dates, 'value', 'minimumDate', 'maximumDate');
+
return (
<RNDateTimePicker
testID={testID}
diff --git a/node_modules/@react-native-community/datetimepicker/src/index.d.ts b/node_modules/@react-native-community/datetimepicker/src/index.d.ts
index abf71ba..f030803 100644
--- a/node_modules/@react-native-community/datetimepicker/src/index.d.ts
+++ b/node_modules/@react-native-community/datetimepicker/src/index.d.ts
@@ -189,6 +189,11 @@ export type WindowsNativeProps = Readonly<
declare const RNDateTimePicker: FC<
IOSNativeProps | AndroidNativeProps | WindowsNativeProps
->;
+>
+/**
+ * Imperatively fetches the datetime
+ * Fix for: https://github.com/facebook/react-native/issues/8169
+ */
+export type getCurrentValueUTC = () => Promise<{value?: string, error?: string}>;
export default RNDateTimePicker;
diff --git a/node_modules/@react-native-community/datetimepicker/src/index.js b/node_modules/@react-native-community/datetimepicker/src/index.js
index fbab875..848fa35 100644
--- a/node_modules/@react-native-community/datetimepicker/src/index.js
+++ b/node_modules/@react-native-community/datetimepicker/src/index.js
@@ -1,3 +1,3 @@
import RNDateTimePicker from './datetimepicker';
-
+export {getCurrentValueUTC} from './datetimepicker';
export default RNDateTimePicker;
diff --git a/node_modules/react-native-modal-datetime-picker/src/DateTimePickerModal.ios.js b/node_modules/react-native-modal-datetime-picker/src/DateTimePickerModal.ios.js
index a52a805..335f96c 100644
--- a/node_modules/react-native-modal-datetime-picker/src/DateTimePickerModal.ios.js
+++ b/node_modules/react-native-modal-datetime-picker/src/DateTimePickerModal.ios.js
@@ -7,7 +7,7 @@ import {
View,
Appearance,
} from "react-native";
-import DateTimePicker from "@react-native-community/datetimepicker";
+import DateTimePicker, { getCurrentValueUTC } from "@react-native-community/datetimepicker";
import Modal from "./Modal";
import { isIphoneX } from "./utils";
@@ -71,6 +71,10 @@ export class DateTimePickerModal extends React.PureComponent {
return null;
}
+ getDate = () => {
+ return getCurrentValueUTC();
+ }
+
handleCancel = () => {
this.didPressConfirm = false;
this.props.onCancel();
diff --git a/node_modules/react-native-modal-datetime-picker/typings/index.d.ts b/node_modules/react-native-modal-datetime-picker/typings/index.d.ts
index f1b1f40..3795121 100644
--- a/node_modules/react-native-modal-datetime-picker/typings/index.d.ts
+++ b/node_modules/react-native-modal-datetime-picker/typings/index.d.ts
@@ -210,4 +210,10 @@ export type ReactNativeModalDateTimePickerProps = DateTimePickerProps &
export default class DateTimePicker extends React.Component<
ReactNativeModalDateTimePickerProps,
any
-> {}
+> {
+ /**
+ * Imperatively fetches the datetime
+ * Fix for: https://github.com/facebook/react-native/issues/8169
+ */
+ getDate?: () => Promise<{value?: string, error?: string}>;
+}
@SudoPlz
Copy link
Author

SudoPlz commented Mar 20, 2021

This fixes cases of scrolling and then confirming in a DateTimePicker returning the wrong item.
It fixes it by asking the DateTimePicker what the selected value is whenever the user confirms. The idea was taken from here.

Usage:

this.timePickerRef.current.getDate() whenever we want to imperatively get the date or time

my declared component looks sth like:

<TimerPicker
          ref={this.timePickerRef}

and timePickerRef is this:
private timePickerRef: RefObject<TimerPicker> = React.createRef();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment