From 323169d2ce096676864b3c18a6ce1bcf7999ca73 Mon Sep 17 00:00:00 2001
From: Lode Kennes <LodeKennes@users.noreply.github.com>
Date: Thu, 10 Mar 2022 11:26:32 +0100
Subject: [PATCH] feat: Added ability to change button font color using
 `buttonTextColorIOS` (#632)

Added ability to change button font color using `buttonTextColorIOS`
---
 README.md                      |  3 ++-
 src/DateTimePickerModal.ios.js | 10 ++++++++--
 typings/index.d.ts             |  7 +++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 4c01d16..5ba46f0 100644
--- a/README.md
+++ b/README.md
@@ -92,7 +92,8 @@ export default Example;
 👉 Please notice that **all the [`@react-native-community/react-native-datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker) props are supported** as well!
 
 | Name                      | Type      | Default      | Description                                                                                         |
-| ------------------------- | --------- | ------------ | --------------------------------------------------------------------------------------------------- |
+|---------------------------|-----------| ------------ |-----------------------------------------------------------------------------------------------------|
+| `buttonTextColorIOS`      | string    |              | The color of the confirm button texts (iOS)                                                         |
 | `backdropStyleIOS`        | style     |              | The style of the picker backdrop view style (iOS)                                                   |
 | `cancelButtonTestID`      | string    |              | Used to locate cancel button in end-to-end tests                                                    |
 | `cancelTextIOS`           | string    | "Cancel"     | The label of the cancel button (iOS)                                                                |
diff --git a/src/DateTimePickerModal.ios.js b/src/DateTimePickerModal.ios.js
index c913ada..22575e0 100644
--- a/src/DateTimePickerModal.ios.js
+++ b/src/DateTimePickerModal.ios.js
@@ -24,6 +24,7 @@ export const HIGHLIGHT_COLOR_LIGHT = "#ebebeb";
 
 export class DateTimePickerModal extends React.PureComponent {
   static propTypes = {
+    buttonTextColorIOS: PropTypes.string,
     cancelButtonTestID: PropTypes.string,
     confirmButtonTestID: PropTypes.string,
     cancelTextIOS: PropTypes.string,
@@ -122,6 +123,7 @@ export class DateTimePickerModal extends React.PureComponent {
       onChange,
       onHide,
       backdropStyleIOS,
+      buttonTextColorIOS,
       ...otherProps
     } = this.props;
     const isAppearanceModuleAvailable = !!(
@@ -181,6 +183,7 @@ export class DateTimePickerModal extends React.PureComponent {
             isDarkModeEnabled={_isDarkModeEnabled}
             onPress={this.handleConfirm}
             label={confirmTextIOS}
+            buttonTextColorIOS={buttonTextColorIOS}
           />
         </View>
         <CancelButtonComponent
@@ -188,6 +191,7 @@ export class DateTimePickerModal extends React.PureComponent {
           isDarkModeEnabled={_isDarkModeEnabled}
           onPress={this.handleCancel}
           label={cancelTextIOS}
+          buttonTextColorIOS={buttonTextColorIOS}
         />
       </Modal>
     );
@@ -224,6 +228,7 @@ export const ConfirmButton = ({
   confirmButtonTestID,
   onPress,
   label,
+  buttonTextColorIOS,
   style = confirmButtonStyles,
 }) => {
   const themedButtonStyle = isDarkModeEnabled
@@ -243,7 +248,7 @@ export const ConfirmButton = ({
       accessibilityRole="button"
       accessibilityLabel={label}
     >
-      <Text style={style.text}>{label}</Text>
+      <Text style={[style.text, buttonTextColorIOS && { color: buttonTextColorIOS }]}>{label}</Text>
     </TouchableHighlight>
   );
 };
@@ -275,6 +280,7 @@ export const CancelButton = ({
   isDarkModeEnabled,
   onPress,
   label,
+  buttonTextColorIOS,
   style = cancelButtonStyles,
 }) => {
   const themedButtonStyle = isDarkModeEnabled
@@ -293,7 +299,7 @@ export const CancelButton = ({
       accessibilityRole="button"
       accessibilityLabel={label}
     >
-      <Text style={style.text}>{label}</Text>
+      <Text style={[style.text, buttonTextColorIOS && { color: buttonTextColorIOS }]}>{label}</Text>
     </TouchableHighlight>
   );
 };
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 50664ca..d5272bc 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -31,6 +31,13 @@ export type HeaderComponent = React.ComponentType<{
 export type PickerComponent = React.ComponentType<IOSNativeProps>;
 
 export interface DateTimePickerProps {
+  /**
+   * iOS buttons text color
+   *
+   * Default is '#007ff9'
+   */
+  buttonTextColorIOS?: string;
+  
   /**
    * The prop to locate cancel button for e2e testing
    */