diff --git a/README.md b/README.md
index 77aea667..ed24d0e9 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,7 @@ React Native date & time picker component for iOS and Android
     - [`dayOfWeekFormat` (`optional`, `Windows only`)](#dayOfWeekFormat-optional-windows-only)
     - [`dateFormat` (`optional`, `Windows only`)](#dateFormat-optional-windows-only)
     - [`firstDayOfWeek` (`optional`, `Windows only`)](#firstDayOfWeek-optional-windows-only)
+    - [`textColor` (`optional`, `iOS only`)](#textColor-optional-ios-only)
     - [`locale` (`optional`, `iOS only`)](#locale-optional-ios-only)
     - [`is24Hour` (`optional`, `Android only`)](#is24hour-optional-android-only)
     - [`neutralButtonLabel` (`optional`, `Android only`)](#neutralbuttonlabel-optional-android-only)
@@ -322,8 +323,11 @@ Possible values are: `1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30`
 
 #### `style` (`optional`, `iOS only`)
 
-Sets style directly on picker component.
-By default height of picker is fixed to 216px.
+Sets style directly on picker component. By default, the picker height is fixed to 216px.
+
+Please note that by default, picker's text color is controlled by the application theme (light / dark mode). In dark mode, text is white and in light mode, text is black.
+
+This means that eg. if the device has dark mode turned on, and your screen background color is white, you will not see the picker. Please use the `Appearance` api to adjust the picker's background color so that it is visible, as we do in the [example App](/example/App.js) or [opt-out from dark mode](https://stackoverflow.com/a/56546554/2070942).
 
 ```js
 <RNDateTimePicker style={{flex: 1}} />
diff --git a/example/App.js b/example/App.js
index 1b48a3ef..7abd59ad 100644
--- a/example/App.js
+++ b/example/App.js
@@ -8,6 +8,7 @@ import {
   Button,
   Platform,
   TextInput,
+  useColorScheme,
 } from 'react-native';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import {Header, Colors} from 'react-native/Libraries/NewAppScreen';
@@ -16,6 +17,17 @@ import {Picker} from 'react-native-windows';
 import moment from 'moment';
 import {DAY_OF_WEEK} from '../src/constants';
 
+const ThemedText = props => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const textColorByMode = {color: isDarkMode ? Colors.white : Colors.black};
+
+  const TextElement = React.createElement(Text, props);
+  return React.cloneElement(TextElement, {
+    style: [props.style, textColorByMode],
+  });
+};
+
 export const App = () => {
   const [date, setDate] = useState(new Date(1598051730000));
   const [mode, setMode] = useState('date');
@@ -68,97 +80,103 @@ export const App = () => {
     setDisplay('spinner');
   };
 
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.dark : Colors.lighter,
+  };
+
   if (Platform.OS !== 'windows') {
     return (
-      <>
+      <SafeAreaView style={[backgroundStyle, {flex: 1}]}>
         <StatusBar barStyle="dark-content" />
-        <SafeAreaView>
-          <ScrollView
-            contentInsetAdjustmentBehavior="automatic"
-            style={styles.scrollView}>
-            <Header />
-            {global.HermesInternal !== null && (
-              <View style={styles.engine}>
-                <Text testID="hermesIndicator" style={styles.footer}>
-                  Engine: Hermes
-                </Text>
-              </View>
-            )}
-            <View style={styles.body}>
-              <View testID="appRootView" style={styles.container}>
-                <View style={styles.header}>
-                  <Text style={styles.text}>Example DateTime Picker</Text>
-                </View>
-                <View style={styles.header}>
-                  <Text style={{margin: 10, flex: 1}}>
-                    text color (iOS only)
-                  </Text>
-                  <TextInput
-                    value={color}
-                    style={{height: 60, flex: 1}}
-                    onChangeText={text => {
-                      setColor(text.toLowerCase());
-                    }}
-                    placeholder="color"
-                  />
-                </View>
-                <View style={styles.button}>
-                  <Button
-                    testID="datePickerButton"
-                    onPress={showDatepicker}
-                    title="Show date picker default!"
-                  />
-                </View>
-                <View style={styles.button}>
-                  <Button
-                    testID="datePickerButtonSpinner"
-                    onPress={showDatepickerSpinner}
-                    title="Show date picker spinner!"
-                  />
-                </View>
-                <View style={styles.button}>
-                  <Button
-                    testID="timePickerButton"
-                    onPress={showTimepicker}
-                    title="Show time picker!"
-                  />
-                </View>
-                <View style={styles.button}>
-                  <Button
-                    testID="timePickerButtonSpinner"
-                    onPress={showTimepickerSpinner}
-                    title="Show time picker spinner!"
-                  />
-                </View>
-                <View style={styles.header}>
-                  <Text testID="dateTimeText" style={styles.dateTimeText}>
-                    {mode === 'time' && moment.utc(date).format('HH:mm')}
-                    {mode === 'date' && moment.utc(date).format('MM/DD/YYYY')}
-                  </Text>
-                  <Button
-                    testID="hidePicker"
-                    onPress={() => setShow(false)}
-                    title="hide picker"
-                  />
-                </View>
-                {show && (
-                  <DateTimePicker
-                    testID="dateTimePicker"
-                    timeZoneOffsetInMinutes={0}
-                    value={date}
-                    mode={mode}
-                    is24Hour
-                    display={display}
-                    onChange={onChange}
-                    style={styles.iOsPicker}
-                    textColor={color || undefined}
-                  />
-                )}
-              </View>
+        <ScrollView>
+          <Header />
+          {global.HermesInternal != null && (
+            <View style={styles.engine}>
+              <Text testID="hermesIndicator" style={styles.footer}>
+                Engine: Hermes
+              </Text>
             </View>
-          </ScrollView>
-        </SafeAreaView>
-      </>
+          )}
+          <View
+            testID="appRootView"
+            style={{
+              backgroundColor: isDarkMode ? Colors.black : Colors.white,
+            }}>
+            <View style={styles.header}>
+              <ThemedText style={styles.text}>
+                Example DateTime Picker
+              </ThemedText>
+            </View>
+            <View style={styles.header}>
+              <ThemedText style={{margin: 10, flex: 1}}>
+                text color (iOS only)
+              </ThemedText>
+              <TextInput
+                value={color}
+                style={{height: 60, flex: 1}}
+                onChangeText={text => {
+                  setColor(text.toLowerCase());
+                }}
+                placeholder="color"
+              />
+            </View>
+            <View style={styles.button}>
+              <Button
+                testID="datePickerButton"
+                onPress={showDatepicker}
+                title="Show date picker default!"
+              />
+            </View>
+            <View style={styles.button}>
+              <Button
+                testID="datePickerButtonSpinner"
+                onPress={showDatepickerSpinner}
+                title="Show date picker spinner!"
+              />
+            </View>
+            <View style={styles.button}>
+              <Button
+                testID="timePickerButton"
+                onPress={showTimepicker}
+                title="Show time picker!"
+              />
+            </View>
+            <View style={styles.button}>
+              <Button
+                testID="timePickerButtonSpinner"
+                onPress={showTimepickerSpinner}
+                title="Show time picker spinner!"
+              />
+            </View>
+            <View style={styles.header}>
+              <ThemedText testID="dateTimeText" style={styles.dateTimeText}>
+                {mode === 'time' && moment.utc(date).format('HH:mm')}
+                {mode === 'date' && moment.utc(date).format('MM/DD/YYYY')}
+              </ThemedText>
+              <Button
+                testID="hidePicker"
+                onPress={() => setShow(false)}
+                title="hide picker"
+              />
+            </View>
+            {show && (
+              <DateTimePicker
+                testID="dateTimePicker"
+                timeZoneOffsetInMinutes={0}
+                value={date}
+                mode={mode}
+                is24Hour
+                display={display}
+                onChange={onChange}
+                style={styles.iOsPicker}
+                textColor={color || undefined}
+              />
+            )}
+          </View>
+        </ScrollView>
+      </SafeAreaView>
     );
   } else {
     return (
diff --git a/react-native.config.js b/react-native.config.js
index b646727a..450a3665 100644
--- a/react-native.config.js
+++ b/react-native.config.js
@@ -22,4 +22,4 @@ if (process.argv.includes(windowsSwitch)) {
   module.exports = {
     reactNativePath: 'node_modules/react-native-windows',
   };
-}
\ No newline at end of file
+}