From c2bc66c77527a1175fec2b83e6c990209005acf7 Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
Date: Tue, 7 Jan 2025 15:55:05 +0200
Subject: [PATCH] Add textColor and backgroundColor props to DateTimePicker
 component (#3481)

* Add textColor and backgroundColor props to DateTimePicker component

* Add cancelButtonProps to DateTimePickerScreen for customizable icon style
---
 .../componentScreens/DateTimePickerScreen.tsx   |  3 +++
 src/components/dateTimePicker/index.tsx         | 17 +++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/demo/src/screens/componentScreens/DateTimePickerScreen.tsx b/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
index e2d645f60e..24d0b0d39e 100644
--- a/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
+++ b/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -66,6 +66,9 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             containerStyle={{marginVertical: 20}}
             label={'Date'}
             placeholder={'Select a date'}
+            // textColor={Colors.red30}
+            // backgroundColor={Colors.$backgroundDark}
+            // cancelButtonProps={{iconStyle: {tintColor: Colors.$iconDefaultLight}}}
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker
diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx
index 5a87e42cc0..a2b0320094 100644
--- a/src/components/dateTimePicker/index.tsx
+++ b/src/components/dateTimePicker/index.tsx
@@ -94,6 +94,14 @@ export type DateTimePickerProps = OldApiProps &
      * Allows changing the visual display of the picker
      */
     display?: string;
+    /**
+     * Text color of the wheel picker items
+     */
+    textColor?: string;
+    /**
+     * Background color of the wheel picker
+     */
+    backgroundColor?: string;
     /**
      * Confirm button props
      */
@@ -137,6 +145,8 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
     onChange,
     dialogProps,
     migrateDialog,
+    textColor = Colors.$textDefault,
+    backgroundColor = Colors.$backgroundDefault,
     headerStyle,
     testID,
     display = Constants.isIOS ? 'spinner' : undefined,
@@ -186,6 +196,10 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
     };
   }, [dialogProps, testID]);
 
+  const dateTimePickerStyle = useMemo(() => {
+    return {backgroundColor};
+  }, [backgroundColor]);
+
   const {getStringValue: getStringValueOld} = useOldApi({dateFormat, dateFormatter, timeFormat, timeFormatter});
 
   const getStringValue = () => {
@@ -240,6 +254,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
         row
         spread
         bg-$backgroundDefault
+        backgroundColor={backgroundColor}
         paddingH-20
         style={[styles.header, headerStyle]}
         testID={`${testID}.header`}
@@ -280,6 +295,8 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
         minuteInterval={minuteInterval}
         timeZoneOffsetInMinutes={timeZoneOffsetInMinutes}
         display={display}
+        textColor={textColor}
+        style={dateTimePickerStyle}
         themeVariant={themeVariant}
         testID={`${testID}.picker`}
       />