Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add iOS 13 dark-mode support #288

Merged
merged 2 commits into from
Sep 25, 2019
Merged

feat: Add iOS 13 dark-mode support #288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4757c7
Handled iOS dark-mode
mmazzarolo Sep 24, 2019
07af16e
Update CustomDatePickerIOS.js
mmazzarolo Sep 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export default class DateTimePickerTester extends Component {
| dismissOnBackdropPressIOS | bool | true | Dismiss the picker on backdrop press (on iOS)? |
| hideTitleContainerIOS | bool | false | If true, hide the modal title container on iOS |
| is24Hour | bool | true | If false, the picker shows an AM/PM chooser on Android |
| isDarkModeEnabled | bool | false | Is the dark mode enabled? |
| isVisible | bool | false | Show the datetime picker? |
| maximumDate | Date | undefined | Max Date. Does not work with 'time' picker on Android |
| minimumDate | Date | undefined | Min Date. Does not work with 'time' picker on Android |
Expand Down Expand Up @@ -168,7 +169,13 @@ Edit your `AppDelegate.m` file, and add:
// Force DatePicker locale to current language (for: 24h or 12h format, full day names etc...)
NSString *currentLanguage = [[NSLocale preferredLanguages] firstObject];
[[UIDatePicker appearance] setLocale:[[NSLocale alloc]initWithLocaleIdentifier:currentLanguage]];
```

### Is the iOS dark mode supported?

iOS 13 dark mode is not supported out-of-the-box yet and requires a bit of manual setup:
1. Install and link [react-native-appearance](https://github.com/expo/react-native-appearance)
2. Use it to detect the device color scheme: `const colorScheme = Appearance.getColorScheme();`
3. Use the color scheme to enable/disable the `react-native-modal-datetime-picker` dark mode trough the `isDarkModeEnabled` prop: `isDarkModeEnabled: colorScheme === 'dark'`

### How do I make it work with snapshot testing?

Expand Down
14 changes: 9 additions & 5 deletions src/CustomDatePickerIOS.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default class CustomDatePickerIOS extends React.PureComponent {
customTitleContainerIOS: PropTypes.node,
dismissOnBackdropPressIOS: PropTypes.bool,
hideTitleContainerIOS: PropTypes.bool,
isDarkModeEnabled: PropTypes.bool,
isVisible: PropTypes.bool,
date: PropTypes.instanceOf(Date),
datePickerContainerStyleIOS: PropTypes.any,
Expand All @@ -46,6 +47,7 @@ export default class CustomDatePickerIOS extends React.PureComponent {
date: new Date(),
dismissOnBackdropPressIOS: true,
hideTitleContainerIOS: false,
isDarkModeEnabled: false,
isVisible: false,
mode: "date",
neverDisableConfirmIOS: false,
Expand Down Expand Up @@ -131,6 +133,7 @@ export default class CustomDatePickerIOS extends React.PureComponent {
datePickerContainerStyleIOS,
dismissOnBackdropPressIOS,
hideTitleContainerIOS,
isDarkModeEnabled,
isVisible,
minuteInterval,
mode,
Expand Down Expand Up @@ -185,6 +188,8 @@ export default class CustomDatePickerIOS extends React.PureComponent {
...reactNativeModalPropsIOS
};

const backgroundColor = isDarkModeEnabled ? BACKGROUND_COLOR_DARK : BACKGROUND_COLOR_LIGHT;

return (
<ReactNativeModal
isVisible={isVisible}
Expand All @@ -194,7 +199,7 @@ export default class CustomDatePickerIOS extends React.PureComponent {
backdropOpacity={0.4}
{...reactNativeModalProps}
>
<View style={[styles.datepickerContainer, datePickerContainerStyleIOS]}>
<View style={[styles.datepickerContainer, { backgroundColor }, datePickerContainerStyleIOS]}>
{!hideTitleContainerIOS &&
(customTitleContainerIOS || titleContainer)}
<View
Expand Down Expand Up @@ -224,7 +229,7 @@ export default class CustomDatePickerIOS extends React.PureComponent {
</View>

<TouchableHighlight
style={[styles.cancelButton, cancelButtonContainerStyleIOS]}
style={[styles.cancelButton, { backgroundColor }, cancelButtonContainerStyleIOS]}
underlayColor={HIGHLIGHT_COLOR}
onPress={this.handleCancel}
>
Expand All @@ -236,7 +241,8 @@ export default class CustomDatePickerIOS extends React.PureComponent {
}

const BORDER_RADIUS = 13;
const BACKGROUND_COLOR = "white";
const BACKGROUND_COLOR_LIGHT = "white";
const BACKGROUND_COLOR_DARK = "#0E0E0E";
const BORDER_COLOR = "#d5d5d5";
const TITLE_FONT_SIZE = 13;
const TITLE_COLOR = "#8f8f8f";
Expand All @@ -251,7 +257,6 @@ const styles = StyleSheet.create({
margin: 10
},
datepickerContainer: {
backgroundColor: BACKGROUND_COLOR,
borderRadius: BORDER_RADIUS,
marginBottom: 8,
overflow: "hidden"
Expand Down Expand Up @@ -282,7 +287,6 @@ const styles = StyleSheet.create({
backgroundColor: "transparent"
},
cancelButton: {
backgroundColor: BACKGROUND_COLOR,
borderRadius: BORDER_RADIUS,
height: 57,
marginBottom: isIphoneX() ? 20 : 0,
Expand Down
7 changes: 7 additions & 0 deletions typings/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,13 @@ interface DateTimePickerProps {
*/
locale?: string;

/**
* Toggles the dark mode style of the picker
*
* Default is false
*/
isDarkModeEnabled?: boolean;

/**
* Sets the visibility of the picker
*
Expand Down