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}
/>
);
@@ -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}
>
- {label}
+ {label}
);
};
@@ -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}
>
- {label}
+ {label}
);
};
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;
export interface DateTimePickerProps {
+ /**
+ * iOS buttons text color
+ *
+ * Default is '#007ff9'
+ */
+ buttonTextColorIOS?: string;
+
/**
* The prop to locate cancel button for e2e testing
*/