datetimepicker: Not showing on iOS, works on Android.

In this ios case:

1. apply style

<DateTimePicker 
                  style={{width:'100%'}}
                   value={this.state.date}
                    mode={this.state.mode}
                    is24Hour={true}
                    display="default"
                    onChange={this.dateChanged} />

1. include in View

<View>
      <DateTimePicker 
                   value={this.state.date}
                    mode={this.state.mode}
                    is24Hour={true}
                    display="default"
                    onChange={this.dateChanged} />
</View>

I think difference between ios and android to operate datetimepicker system

You can also add the following to your info.plist file: <key>UIUserInterfaceStyle</key> <string>Light</string>

@chris-gaona I believe that’s based on the OS dark/light mode setting. We’ve run into that issue on a couple of projects as well. The OS dark mode setting determines the font color. We use the react-native-appearance package to determine what the OS is doing, so you can set the background color accordingly. As far as I’ve found, there’s no way to change the text color in the Date Picker.

This is a critical issue, and I’m not sure I understand the component enough to fix it. The RN docs state

DatePickerIOS has been merged with TimePickerAndroid and DatePickerAndroid into a single component called DateTimePicker and will be removed in a future release.

So for those who are trying to prepare for this by using this component now, it is not functional (on iOS). I will comment if I find any solution as I keep searching.

Update 1: I’m getting the same problem using DatePickerIOS now, and appears to be at least partially related to https://github.com/facebook/react-native/issues/8730, though it is not rendering as a popover when I remove alignItems = 'center'. Also, this looks related: https://github.com/react-native-community/react-native-datetimepicker/issues/42

Update 2: I am able to get it to show, but now I have to explicity include it in a <Modal> component and set the backgroundColor to white in order to get consistent behavior between ios and android. E.g.

{
  Platform.OS === 'ios' &&
      (
        <Modal
          visible={this.state.visible}
          onDismiss={() => this.setState({ visible: false })}
        >
          <DateTimePicker
            style={{ width: '100%', backgroundColor: 'white' }}
            value={this.state.value}
            onChange={async (e, value) => {
              this.setState({ value })
            }}
          />
        </Modal>
      )
}

https://github.com/react-native-community/datetimepicker#textcolor-optional-ios-only

This issue can be worked around by forcing iOS to use the light theme. Add the following code to AppDelegate.m:

if (@available(iOS 13.0, *)) {
    rootView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
}

Is it intended that the exact same RN code has totally different outcomes between iOS and Android? As far as I can see iOS is an inline picker that you have to modal yourself, and Android has its own modal and you can’t change that. Very counter-intuitive to someone who does not know this and it is not mentioned on the Readme page.

This is a critical issue, and I’m not sure I understand the component enough to fix it. The RN docs state

DatePickerIOS has been merged with TimePickerAndroid and DatePickerAndroid into a single component called DateTimePicker and will be removed in a future release.

So for those who are trying to prepare for this by using this component now, it is not functional (on iOS). I will comment if I find any solution as I keep searching.

Update 1: I’m getting the same problem using DatePickerIOS now, and appears to be at least partially related to facebook/react-native#8730, though it is not rendering as a popover when I remove alignItems = 'center'. Also, this looks related: #42

Update 2: I am able to get it to show, but now I have to explicity include it in a <Modal> component and set the backgroundColor to white in order to get consistent behavior between ios and android. E.g.

{
  Platform.OS === 'ios' &&
      (
        <Modal
          visible={this.state.visible}
          onDismiss={() => this.setState({ visible: false })}
        >
          <DateTimePicker
            style={{ width: '100%', backgroundColor: 'white' }}
            value={this.state.value}
            onChange={async (e, value) => {
              this.setState({ value })
            }}
          />
        </Modal>
      )
}

This solution worked for me. There was a problem when i was using ui-kitten’s Modal. when i use react-native Modal, it is working now.

A very frustrating bug. I’ve wrapped the picker in <Modal> and I’ve set the bg color in some shade of a gray color, so the text will be visible in any case (Light/Dark).

The other way would be to use react-native-appearance like @slushman suggested, but I didn’t wanted 1 more dependency in my project, so it’s some kind of a compromise.

This package is working for me in iOS but not necessarily as intended. When I set my background color behind the DateTimePicker to white it did NOT show on my physical iOS device but it did show on the iOS simulator. I found it was because the font color of the picker was set to white on the physical device but auto set to black on the simulator. When I set the background color behind the DateTimePicker to a dark color like black, it showed & worked as expected on the physical device.

I’m not sure how the font color changes & if it’s dynamic for UIDatePicker. Maybe there needs to be some option exposed for us to be able to change the font color of the picker text. Hopefully it helps.

<Modal
  animationType="fade"
  transparent
  visible={showTimeOfDayPicker}
  presentationStyle="overFullScreen"
>
  <View
    style={{
      flex: 1,
      height: SCREEN_HEIGHT,
      backgroundColor: 'rgba(0,0,0,.2)',
      justifyContent: 'flex-end',
      flexDirection: 'column',
    }}
  >
    <View
      style={{
        backgroundColor: 'black',
        padding: 15,
        paddingBottom: 40,
      }}
    >
      <View>
        <DateTimePicker
          value={dateTime}
          mode="time"
          display="default"
          onChange={this.setTimeOfDay}
          style={{ width: '100%' }}
        />
      </View>
      <View style={{ alignItems: 'center' }}>
        <Button text="Done" onPress={this.toggleTimeOfDay} />
      </View>
    </View>
  </View>
</Modal>