feat(ios): support passing view props (#693)

Author: vonovak

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
-<RNDateTimePicker neutralButton={{label: 'Clear', textColor: 'red'}} />
+<RNDateTimePicker neutralButton={{label: 'Clear', textColor: 'grey'}} />
 ```
 
 #### `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).

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 (
     <RNDateTimePicker
-      testID={testID}
-      style={style}
+      {...other}
       date={dateToMilliseconds(value)}
       locale={locale !== null && locale !== '' ? locale : undefined}
       maximumDate={dateToMilliseconds(maximumDate)}

src/index.d.ts

@@ -63,7 +63,7 @@ type TimeOptions = Readonly<
   }
 >;
 
-export type BaseProps = Readonly<ViewProps & DateOptions>;
+export type BaseProps = Readonly<Omit<ViewProps, 'children'> & DateOptions>;
 
 export type IOSNativeProps = Readonly<
   BaseProps & {

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,
 |}>;