diff --git a/README.md b/README.md index ac7b7e9c..1434c82a 100644 --- a/README.md +++ b/README.md @@ -76,12 +76,13 @@ React Native date & time picker component for iOS, Android and Windows. - [`themeVariant` (`optional`, `iOS only`)](#themevariant-optional-ios-only) - [`locale` (`optional`, `iOS only`)](#locale-optional-ios-only) - [`is24Hour` (`optional`, `Windows and Android only`)](#is24hour-optional-windows-and-android-only) - - [`positiveButtonLabel` (`optional`, `Android only`)](#positiveButtonLabel-optional-android-only) - - [`negativeButtonLabel` (`optional`, `Android only`)](#negativeButtonLabel-optional-android-only) - - [`neutralButtonLabel` (`optional`, `Android only`)](#neutralbuttonlabel-optional-android-only) + - [`positiveButton` (`optional`, `Android only`)](#positiveButton-optional-android-only) + - [`negativeButton` (`optional`, `Android only`)](#negativeButton-optional-android-only) + - [`neutralButton` (`optional`, `Android only`)](#neutralButton-optional-android-only) - [`minuteInterval` (`optional`)](#minuteinterval-optional) - [`style` (`optional`, `iOS only`)](#style-optional-ios-only) - [`disabled` (`optional`, `iOS only`)](#disabled-optional-ios-only) + - [`view props` (`optional`, `iOS only`)](#view-props-optional-ios-only) - [`onError` (`optional`, `Android only`)](#onError-optional-android-only) - [Testing with Jest](#testing-with-jest) - [Migration from the older components](#migration-from-the-older-components) @@ -448,7 +449,7 @@ Allows displaying neutral button on picker dialog. Pressing button can be observed in onChange handler as `event.type === 'neutralButtonPressed'` ```js - + ``` #### `negativeButton` (`optional`, `Android only`) @@ -515,6 +516,10 @@ Alternatively, use the `themeVariant` prop. If true, the user won't be able to interact with the view. +#### `View Props` (`optional`, `iOS only`) + +On iOS, you can pass any [View props](https://reactnative.dev/docs/view#props) to the component. Given that the underlying component is a native view, not all of them are guaranteed to be supported, but `testID` and `onLayout` are known to work. + #### `onError` (`optional`, `Android only`) Callback that is called when an error occurs inside the date picker native code (such as null activity). diff --git a/src/datetimepicker.ios.js b/src/datetimepicker.ios.js index da457d4e..af363e2b 100644 --- a/src/datetimepicker.ios.js +++ b/src/datetimepicker.ios.js @@ -48,8 +48,6 @@ export default function Picker({ locale, maximumDate, minimumDate, - style, - testID, minuteInterval, timeZoneOffsetInMinutes, textColor, @@ -59,6 +57,7 @@ export default function Picker({ mode = IOS_MODE.date, display: providedDisplay = IOS_DISPLAY.default, disabled = false, + ...other }: IOSNativeProps): React.Node { sharedPropsValidation({value}); @@ -92,8 +91,7 @@ export default function Picker({ return ( ; -export type BaseProps = Readonly; +export type BaseProps = Readonly & DateOptions>; export type IOSNativeProps = Readonly< BaseProps & { diff --git a/src/types.js b/src/types.js index f701a62b..aff89406 100644 --- a/src/types.js +++ b/src/types.js @@ -6,7 +6,7 @@ import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes'; import type {HostComponent} from 'react-native'; import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type {ElementRef} from 'react'; +import type {ElementRef, Node} from 'react'; import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet'; import { ANDROID_MODE, @@ -84,8 +84,13 @@ type TimeOptions = $ReadOnly<{| is24Hour?: ?boolean, |}>; +type ViewPropsWithoutChildren = $Diff< + ViewProps, + {children: ViewProps['children']}, +>; + export type BaseProps = $ReadOnly<{| - ...ViewProps, + ...ViewPropsWithoutChildren, ...DateOptions, |}>;