feat: Added ability to change button font color using `buttonTextColo…

…rIOS` (#632) Added ability to change button font color using `buttonTextColorIOS`
mmazzarolo · Mar 10, 2022 · 323169d · 323169d
1 parent 630a0e7
commit 323169d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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,13 +183,15 @@ export class DateTimePickerModal extends React.PureComponent {
             isDarkModeEnabled={_isDarkModeEnabled}
             onPress={this.handleConfirm}
             label={confirmTextIOS}
+            buttonTextColorIOS={buttonTextColorIOS}
           />
         </View>
         <CancelButtonComponent
           cancelButtonTestID={cancelButtonTestID}
           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
@@ -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
    */