feat: Add iOS 13 dark-mode support (#288)

* Handled iOS dark-mode * Update CustomDatePickerIOS.js
mmazzarolo · Sep 25, 2019 · 68fd9a1 · 68fd9a1
1 parent 27ce732
commit 68fd9a1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -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                                                                                                                     |
@@ -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?
 

diff --git a/src/CustomDatePickerIOS.js b/src/CustomDatePickerIOS.js
@@ -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,
@@ -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,
@@ -131,6 +133,7 @@ export default class CustomDatePickerIOS extends React.PureComponent {
       datePickerContainerStyleIOS,
       dismissOnBackdropPressIOS,
       hideTitleContainerIOS,
+      isDarkModeEnabled,
       isVisible,
       minuteInterval,
       mode,
@@ -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}
@@ -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
@@ -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}
         >
@@ -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";
@@ -251,7 +257,6 @@ const styles = StyleSheet.create({
     margin: 10
   },
   datepickerContainer: {
-    backgroundColor: BACKGROUND_COLOR,
     borderRadius: BORDER_RADIUS,
     marginBottom: 8,
     overflow: "hidden"
@@ -282,7 +287,6 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent"
   },
   cancelButton: {
-    backgroundColor: BACKGROUND_COLOR,
     borderRadius: BORDER_RADIUS,
     height: 57,
     marginBottom: isIphoneX() ? 20 : 0,

diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -129,6 +129,13 @@ interface DateTimePickerProps {
    */
   locale?: string;
 
+  /**
+   * Toggles the dark mode style of the picker
+   *
+   * Default is false
+   */
+  isDarkModeEnabled?: boolean;
+
   /**
    * Sets the visibility of the picker
    *