react-native-ui-lib 7.44.0-snapshot.7227 → 7.44.0-snapshot.7228

package/babel.config.js

@@ -1,5 +1,17 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  env: {
+    test: {
+      presets: [
+        [
+          'module:@react-native/babel-preset',
+          {
+            disableStaticViewConfigsCodegen: true
+          }
+        ]
+      ]
+    }
+  },
   plugins: [
     'react-native-reanimated/plugin',
     [

package/lib/components/HighlighterOverlayView/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { processColor, StyleSheet, Modal } from 'react-native';
 // Import the Codegen specification for New Architecture
-import HighlighterViewNativeComponent from "./HighlighterViewNativeComponent";
+import HighlighterViewNativeComponent from "../../specs/HighlighterViewNativeComponent";
 const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)';
 const HighlighterOverlayView = props => {
   const {

package/lib/components/HighlighterOverlayView/index.web.d.ts

@@ -19,7 +19,7 @@ export type HighlighterOverlayViewProps = {
     onRequestClose?: () => void;
     highlightFrame?: HighlightFrameType;
     style?: ViewStyle;
-    highlightViewTag?: number | null;
+    highlightViewTag?: number;
     children?: JSX.Element[] | JSX.Element;
     highlightViewTagParams?: HighlightViewTagParams;
     minimumRectSize?: Pick<HighlightFrameType, 'width' | 'height'>;

package/lib/components/Keyboard/KeyboardTrackingView/KeyboardTrackingView.ios.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import ReactNative, { NativeModules } from 'react-native';
 // Import the Codegen specification for New Architecture
-import KeyboardTrackingViewNativeComponent from "./KeyboardTrackingViewNativeComponent";
+import KeyboardTrackingViewNativeComponent from "../../../specs/KeyboardTrackingViewNativeComponent";
 const KeyboardTrackingViewTempManager = NativeModules.KeyboardTrackingViewTempManager;
 
 /**

package/lib/components/SafeArea/SafeAreaInsetsManager.js

@@ -2,7 +2,7 @@ import _isEqual from "lodash/isEqual";
 import _remove from "lodash/remove";
 import _forEach from "lodash/forEach";
 /* eslint no-underscore-dangle: 0 */
-import { NativeModules, DeviceEventEmitter, Platform } from 'react-native';
+import { NativeModules, DeviceEventEmitter } from 'react-native';
 let SafeAreaInsetsCache = null;
 class SafeAreaInsetsManager {
   _defaultInsets = {
@@ -45,9 +45,6 @@ class SafeAreaInsetsManager {
     }
   }
   setupEventListener() {
-    if (Platform.OS !== 'ios') {
-      return;
-    }
     try {
       // Use DeviceEventEmitter instead of NativeEventEmitter to avoid getConstants      
       DeviceEventEmitter.addListener('SafeAreaInsetsDidChangeEvent', data => {

package/lib/components/SafeArea/SafeAreaSpacerView.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
+import { ViewStyle, StyleProp } from 'react-native';
 export type SafeAreaSpacerViewProps = {
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 };
 declare const SafeAreaSpacerView: {
     ({ style }: SafeAreaSpacerViewProps): React.JSX.Element;

package/lib/components/SafeArea/SafeAreaSpacerView.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { View, Dimensions } from 'react-native';
 import SafeAreaInsetsManager from "./SafeAreaInsetsManager";
 const SafeAreaSpacerView = ({
@@ -10,6 +10,7 @@ const SafeAreaSpacerView = ({
     bottom: 0,
     right: 0
   });
+  const [componentHeight, setComponentHeight] = useState(0);
   const [spacerHeight, setSpacerHeight] = useState(0);
   useEffect(() => {
     const getSafeAreaInsets = async () => {
@@ -43,22 +44,24 @@ const SafeAreaSpacerView = ({
     const {
       y
     } = event.nativeEvent.layout;
+    setComponentHeight(y);
+  }, []);
+  useEffect(() => {
     const screenHeight = Dimensions.get('window').height;
     let height = 0;
     // Check if positioned within safe area bounds
-    if (y < safeAreaInsets.top) {
+    if (componentHeight < safeAreaInsets.top) {
       height = safeAreaInsets.top;
-    } else if (y > screenHeight - safeAreaInsets.bottom) {
+    } else if (componentHeight > screenHeight - safeAreaInsets.bottom) {
       height = safeAreaInsets.bottom;
     }
     if (height !== spacerHeight) {
       setSpacerHeight(height);
     }
-  }, [safeAreaInsets, spacerHeight]);
-  const spacerStyle = {
-    height: spacerHeight,
-    ...style
-  };
+  }, [componentHeight, safeAreaInsets, spacerHeight]);
+  const spacerStyle = useMemo(() => [{
+    height: spacerHeight
+  }, style], [spacerHeight, style]);
   return <View style={spacerStyle} onLayout={handleLayout} />;
 };
 SafeAreaSpacerView.displayName = 'SafeAreaSpacerView';

package/lib/components/SafeArea/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+export type SafeAreaSpacerViewProps = {
+    style?: StyleProp<ViewStyle>;
+};
+declare const SafeAreaSpacerView: {
+    ({ style }: SafeAreaSpacerViewProps): React.JSX.Element;
+    displayName: string;
+};
+export default SafeAreaSpacerView;

package/lib/components/SafeArea/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View, Platform } from 'react-native';
+import SafeAreaSpacerViewIos from "./SafeAreaSpacerView";
+const isIOS = Platform.OS === 'ios';
+const SafeAreaSpacerView = ({
+  style
+}) => {
+  return isIOS ? <SafeAreaSpacerViewIos style={style} /> : <View style={style} />;
+};
+SafeAreaSpacerView.displayName = 'SafeAreaSpacerView';
+export default SafeAreaSpacerView;

package/lib/components/index.d.ts

@@ -1,6 +1,6 @@
 import DynamicFonts, { FontExtension } from './DynamicFonts';
 import HighlighterOverlayView from './HighlighterOverlayView';
-import SafeAreaSpacerView from './SafeArea/SafeAreaSpacerView';
+import SafeAreaSpacerView from './SafeArea';
 import SafeAreaInsetsManager from './SafeArea/SafeAreaInsetsManager';
 import Keyboard, { KeyboardTrackingViewProps, KeyboardAccessoryViewProps } from './Keyboard';
 export { DynamicFonts, FontExtension, HighlighterOverlayView, SafeAreaSpacerView, SafeAreaInsetsManager, Keyboard, KeyboardTrackingViewProps, KeyboardAccessoryViewProps };

package/lib/components/index.js

@@ -1,6 +1,6 @@
 import DynamicFonts, { FontExtension } from "./DynamicFonts";
 import HighlighterOverlayView from "./HighlighterOverlayView";
-import SafeAreaSpacerView from "./SafeArea/SafeAreaSpacerView";
+import SafeAreaSpacerView from "./SafeArea";
 import SafeAreaInsetsManager from "./SafeArea/SafeAreaInsetsManager";
 import Keyboard, { KeyboardTrackingViewProps, KeyboardAccessoryViewProps } from "./Keyboard";
 export { DynamicFonts, FontExtension, HighlighterOverlayView, SafeAreaSpacerView, SafeAreaInsetsManager, Keyboard, KeyboardTrackingViewProps, KeyboardAccessoryViewProps };

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "5.0.0-snapshot.7227",
+  "version": "5.0.0-snapshot.7228",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.44.0-snapshot.7227",
+  "version": "7.44.0-snapshot.7228",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -56,7 +56,7 @@
     "react-native-redash": "^12.0.3",
     "semver": "^5.5.0",
     "tinycolor2": "^1.4.2",
-    "uilib-native": "4.5.1",
+    "uilib-native": "5.0.0-snapshot.7216",
     "url-parse": "^1.2.0",
     "wix-react-native-text-size": "1.0.9"
   },

package/panView.d.ts

@@ -0,0 +1,2 @@
+import {PanView} from './src';
+export default PanView;

package/panView.js

@@ -0,0 +1 @@
+module.exports = require('./src/components/panView').default;

package/src/components/KeyboardAwareScrollView/KeyboardAwareBase.js

@@ -107,7 +107,7 @@ export default class KeyboardAwareBase extends Component {
           setTimeout(() => {
             this._keyboardAwareView
               .getScrollResponder()
-              .scrollResponderScrollNativeHandleToKeyboard(ReactNative.findNodeHandle(textInputRef),
+              .scrollResponderScrollNativeHandleToKeyboard(this.findNodeHandle(textInputRef),
                 this.props.scrollToInputAdditionalOffset,
                 true);
           }, 0);
@@ -117,6 +117,10 @@ export default class KeyboardAwareBase extends Component {
     }
   }
 
+  findNodeHandle(ref) {
+    return ref.current?.getNodeHandle?.() || ref?.getNodeHandle?.() || ReactNative.findNodeHandle(ref.current || ref);
+  }
+
   _onKeyboardWillShow(event) {
     this._scrollToFocusedTextInput();
 

package/src/components/actionSheet/index.d.ts

@@ -1,14 +1,9 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { DialogProps } from '../dialog';
 import { ButtonProps } from '../button';
-import { DialogProps as IncubatorDialogProps } from '../../incubator';
+import { type DialogProps } from '../dialog';
 type ActionSheetOnOptionPress = (index: number) => void;
 type ActionSheetProps = {
-    /**
-     * Migrate to the Incubator.Dialog component
-     */
-    migrateDialog?: boolean;
     /**
      * Whether to show the action sheet or not
      */
@@ -68,11 +63,6 @@ type ActionSheetProps = {
      * Note: you will need to call onOptionPress so the option's onPress will be called
      */
     renderAction?: (option: ButtonProps, index: number, onOptionPress: ActionSheetOnOptionPress) => JSX.Element;
-    /**
-     * @deprecated
-     * Called once the modal has been dismissed completely
-     */
-    onModalDismissed?: DialogProps['onDialogDismissed'];
     /**
      * Whether or not to handle SafeArea
      */
@@ -80,7 +70,7 @@ type ActionSheetProps = {
     /**
      * Additional props to send to the Dialog
      */
-    dialogProps?: Omit<DialogProps, 'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'> | IncubatorDialogProps;
+    dialogProps?: Omit<DialogProps, 'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'> | DialogProps;
     /**
      * testID for e2e tests
      */

package/src/components/actionSheet/index.js

@@ -6,15 +6,12 @@ import React, { Component } from 'react';
 import { ActionSheetIOS, StyleSheet } from 'react-native';
 import { Colors } from "../../style";
 import { asBaseComponent, Constants } from "../../commons/new";
-import Dialog from "../dialog";
 import View from "../view";
 import Text from "../text";
 import Image from "../image";
 //@ts-ignore
 import ListItem from "../listItem";
-import PanningProvider from "../panningViews/panningProvider";
-import { Dialog as IncubatorDialog } from "../../incubator";
-import { LogService } from "../../services";
+import Dialog from "../dialog";
 const VERTICAL_PADDING = 8;
 /**
  * @description: Cross platform Action Sheet, with a support for native iOS solution
@@ -130,55 +127,19 @@ class ActionSheet extends Component {
         {this.renderActions()}
       </View>;
   }
-  renderOldDialog() {
+  render() {
     const {
-      useNativeIOS,
       visible,
       onDismiss,
       dialogStyle,
-      onModalDismissed,
       testID,
       useSafeArea,
       dialogProps
     } = this.props;
-    if (Constants.isIOS && useNativeIOS) {
-      return null;
-    }
-    return <Dialog bottom centerH width="100%" panDirection={PanningProvider.Directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.dialog, dialogStyle]} visible={visible} onDismiss={onDismiss} onDialogDismissed={onModalDismissed}>
+    return <Dialog bottom centerH width="100%" direction={Dialog.directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.incubatorDialog, dialogStyle]} visible={visible} onDismiss={onDismiss}>
         {this.renderSheet()}
       </Dialog>;
   }
-  renderNewDialog() {
-    const {
-      visible,
-      onDismiss,
-      dialogStyle,
-      onModalDismissed,
-      testID,
-      useSafeArea,
-      dialogProps
-    } = this.props;
-    if (onModalDismissed) {
-      LogService.deprecationWarn({
-        component: 'ActionSheet',
-        oldProp: 'onModalDismissed',
-        newProp: 'onDismiss'
-      });
-    }
-    return <IncubatorDialog bottom centerH width="100%" direction={PanningProvider.Directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.incubatorDialog, dialogStyle]} visible={visible} onDismiss={onDismiss}>
-        {this.renderSheet()}
-      </IncubatorDialog>;
-  }
-  render() {
-    const {
-      migrateDialog
-    } = this.props;
-    if (migrateDialog) {
-      return this.renderNewDialog();
-    } else {
-      return this.renderOldDialog();
-    }
-  }
 }
 export default asBaseComponent(ActionSheet);
 const styles = StyleSheet.create({

package/src/components/checkbox/index.d.ts

@@ -120,7 +120,6 @@ declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
     getLabelStyle: () => {
         color: string;
     };
-    getAccessibleHitSlop(size: number): number;
     renderCheckbox(): React.JSX.Element;
     render(): React.JSX.Element;
     validate: () => boolean;

package/src/components/checkbox/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Animated, Easing, StyleSheet } from 'react-native';
 import { Colors, Spacings } from "../../style";
+import { StyleUtils } from "../../utils";
 //@ts-ignore
 import Assets from "../../assets";
 import { asBaseComponent } from "../../commons/new";
@@ -146,9 +147,6 @@ class Checkbox extends Component {
       color: this.props.disabled ? Colors.$textDisabled : this.state.showError ? Colors.$textDangerLight : Colors.$textDefault
     };
   };
-  getAccessibleHitSlop(size) {
-    return Math.max(0, (48 - size) / 2);
-  }
   renderCheckbox() {
     const {
       selectedIcon,
@@ -161,7 +159,7 @@ class Checkbox extends Component {
     } = this.props;
     return (
       //@ts-ignore
-      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
+      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress} hitSlop={StyleUtils.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
         {<Animated.View style={[this.styles.container, {
           opacity: this.animationStyle.opacity
         }, {

package/src/components/colorPicker/ColorPickerDialog.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { DialogProps } from '../../incubator/dialog';
+import { DialogProps } from '../dialog';
 export interface ColorPickerDialogProps extends DialogProps {
     /**
      * The initial color to pass the picker dialog

package/src/components/colorPicker/ColorPickerDialog.js

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { LayoutAnimation, StyleSheet, Keyboard } from 'react-native';
 import { Constants, asBaseComponent } from "../../commons/new";
 import { Colors } from "../../style";
-import Dialog from "../../incubator/dialog";
+import Dialog from "../dialog";
 import { getColorValue, getValidColorString, getTextColor, BORDER_RADIUS } from "./ColorPickerPresenter";
 import ColorPickerDialogHeader from "./ColorPickerDialogHeader";
 import ColorPickerPreview from "./ColorPickerPreview";

package/src/components/dateTimePicker/index.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { BaseComponentInjectedProps } from '../../commons/new';
 import { TextFieldProps } from '../textField';
-import type { DialogMigrationProps } from '../../incubator/dialog';
+import type { DialogProps } from '../dialog';
 import { ButtonProps } from '../button';
 import { OldApiProps } from './useOldApi';
 export type DateTimePickerMode = 'date' | 'time';
-export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & DialogMigrationProps & {
+export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & {
     /**
      * The type of picker to display ('date' or 'time')
      */
@@ -15,6 +15,10 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      * The initial value to set the picker to. Defaults to device's date / time
      */
     value?: Date;
+    /**
+     *  The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps;
     /**
      * The onChange callback
      */
@@ -92,7 +96,6 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      */
     cancelButtonProps?: ButtonProps;
 };
-type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
 /**
  * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -101,7 +104,185 @@ type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedPr
  * @extendsLink: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerPropsInternal & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
+    /**
+     * The type of picker to display ('date' or 'time')
+     */
+    mode?: DateTimePickerMode | undefined;
+    /**
+     * The initial value to set the picker to. Defaults to device's date / time
+     */
+    value?: Date | undefined;
+    /**
+     *  The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps | undefined;
+    /**
+     * The onChange callback
+     */
+    onChange?: ((date: Date) => void) | undefined;
+    /**
+     * Should this input be editable or disabled
+     */
+    editable?: boolean | undefined;
+    /**
+     * The minimum date or time value to use
+     */
+    minimumDate?: Date | undefined;
+    /**
+     * The maximum date or time value to use
+     */
+    maximumDate?: Date | undefined;
+    /**
+     * A callback function to format the time or date
+     * @param mode the type of the picker ('date' or 'time')
+     * @returns the formatted string to display
+     */
+    dateTimeFormatter?: ((value: Date, mode: DateTimePickerMode) => string) | undefined;
+    /**
+     * Allows changing of the locale of the component (iOS only)
+     */
+    locale?: string | undefined;
+    /**
+     * Allows changing of the time picker to a 24 hour format (Android only)
+     */
+    is24Hour?: boolean | undefined;
+    /**
+     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
+     */
+    minuteInterval?: number | undefined;
+    /**
+     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
+     */
+    timeZoneOffsetInMinutes?: number | undefined;
+    /**
+     * style to apply to the iOS dialog header
+     */
+    headerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Render custom input
+     */
+    renderInput?: ((props: Omit<DateTimePickerProps, 'value'> & {
+        value?: string;
+    }) => React.ReactElement) | undefined;
+    /**
+     * Override system theme variant (dark or light mode) used by the date picker.
+     */
+    themeVariant?: "light" | "dark" | undefined;
+    /**
+     * The component testID
+     */
+    testID?: string | undefined;
+    /**
+     * Allows changing the visual display of the picker
+     */
+    display?: string | undefined;
+    /**
+     * Text color of the wheel picker items
+     */
+    textColor?: string | undefined;
+    /**
+     * Background color of the wheel picker
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Confirm button props
+     */
+    confirmButtonProps?: ButtonProps | undefined;
+    /**
+     * Cancel button props
+     */
+    cancelButtonProps?: ButtonProps | undefined;
+} & BaseComponentInjectedProps & React.RefAttributes<any>>;
 export { DateTimePicker };
-declare const _default: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
+    /**
+     * The type of picker to display ('date' or 'time')
+     */
+    mode?: DateTimePickerMode | undefined;
+    /**
+     * The initial value to set the picker to. Defaults to device's date / time
+     */
+    value?: Date | undefined;
+    /**
+     *  The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps | undefined;
+    /**
+     * The onChange callback
+     */
+    onChange?: ((date: Date) => void) | undefined;
+    /**
+     * Should this input be editable or disabled
+     */
+    editable?: boolean | undefined;
+    /**
+     * The minimum date or time value to use
+     */
+    minimumDate?: Date | undefined;
+    /**
+     * The maximum date or time value to use
+     */
+    maximumDate?: Date | undefined;
+    /**
+     * A callback function to format the time or date
+     * @param mode the type of the picker ('date' or 'time')
+     * @returns the formatted string to display
+     */
+    dateTimeFormatter?: ((value: Date, mode: DateTimePickerMode) => string) | undefined;
+    /**
+     * Allows changing of the locale of the component (iOS only)
+     */
+    locale?: string | undefined;
+    /**
+     * Allows changing of the time picker to a 24 hour format (Android only)
+     */
+    is24Hour?: boolean | undefined;
+    /**
+     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
+     */
+    minuteInterval?: number | undefined;
+    /**
+     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
+     */
+    timeZoneOffsetInMinutes?: number | undefined;
+    /**
+     * style to apply to the iOS dialog header
+     */
+    headerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Render custom input
+     */
+    renderInput?: ((props: Omit<DateTimePickerProps, "value"> & {
+        value?: string | undefined;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
+    /**
+     * Override system theme variant (dark or light mode) used by the date picker.
+     */
+    themeVariant?: "light" | "dark" | undefined;
+    /**
+     * The component testID
+     */
+    testID?: string | undefined;
+    /**
+     * Allows changing the visual display of the picker
+     */
+    display?: string | undefined;
+    /**
+     * Text color of the wheel picker items
+     */
+    textColor?: string | undefined;
+    /**
+     * Background color of the wheel picker
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Confirm button props
+     */
+    confirmButtonProps?: ButtonProps | undefined;
+    /**
+     * Cancel button props
+     */
+    cancelButtonProps?: ButtonProps | undefined;
+} & React.RefAttributes<any>>;
 export default _default;

package/src/components/dateTimePicker/index.js

@@ -42,7 +42,6 @@ const DateTimePicker = forwardRef((props, ref) => {
     themeVariant = Colors.getScheme(),
     onChange,
     dialogProps,
-    migrateDialog,
     textColor = Colors.$textDefault,
     backgroundColor = Colors.$backgroundDefault,
     headerStyle,
@@ -165,7 +164,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   return <>
       <ExpandableOverlay
     // @ts-expect-error
-    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} migrateDialog={migrateDialog} disabled={editable === false}
+    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} disabled={editable === false}
     // NOTE: Android picker comes with its own overlay built-in therefor we're not using ExpandableOverlay for it
     renderCustomOverlay={Constants.isAndroid ? renderAndroidDateTimePicker : undefined} testID={`${testID}.overlay`}>
         {renderInput ? renderInput({