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 */