Not showing on iOS, works on Android.

[staklau]

I'm wondering if there's anything extra that needs to be done for this component to work on iOS. The picker works fine on Android, but the same code does not display the picker on iOS. Here's my render method:

render() {

    const datePickerText = this.state.valuePicked ? getSentDateString(moment(this.state.date).unix()) : "Not picked";

    const removeValueButton = this.state.valuePicked ? this.getRemoveValueButton() : null;

      return (
        <View style={{ flex: 1, alignItems: 'center', marginBottom: 20, marginTop: 2 }}>
          <Button 
          block
          style={{marginLeft:20, marginRight:20, marginTop: 10}}
                    onPress={() => this.show(true)}
                    >
            <Icon type="FontAwesome5" name='calendar-alt' />
                        <Text>{datePickerText}</Text>
                    </Button>
          {removeValueButton}
          { this.state.show && <DateTimePicker value={this.state.date}
                    mode={this.state.mode}
                    is24Hour={true}
                    display="default"
                    onChange={this.dateChanged} />
        }
        </View>
      );
}

[clark-choi]

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

2) 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

[kathirpandian1993]

Same issue date Picker is not opening i'm using react-hooks, Picker works fine in Android. but its not opening in Ios

here is my code

  const DatePicker =({}) =>{
      const [state, setState] = useState({
        date:  new Date(),
        mode: 'date',
        show: false
    });

    const showPicker = mode => {
        setState(prevState => ({
        ...prevState,
        show: Platform.OS === 'ios',
        mode
        }));
    };

    const datePicker = () => {
        showPicker('datetime');
    };

    return(
        <>
            <View>
                <View style={styles.createBorder}>
                    <TouchableHighlight
                        underlayColor={disable ? 'transperant' : ''}
                        onPress={!disable && timePicker}
                    >
                        <View style={styles.datePickerBox}>
                        <Text
                            style={{
                            ...styles.datePickerText,
                            ...{ width: width - 60 }
                            }}
                        >
                            {globalHelper.getMomentDates(
                            mode === 'datetime' ? 'DD-MM-YYYY' : 'hh:mm A',
                            state.date
                            )}
                        </Text>
                        </View>
                    </TouchableHighlight>
                </View>
                {state.show && Platform.OS === 'ios' && (
                    <DateTimePicker
                    style={{
                        ...styles.inputBackground,
                        ...{ width: '100%' }
                    }}
                    value={state.date}
                    mode="date"
                    testID="dateTimePicker"
                    is24Hour={false}
                    display="default"
                    onChange={setDate}
                    />
                )}
            </View>
        </>
    );
  } 
  export default DatePicker;

[yilakt]

Same issue here, works in Android as expected but not on ios. UI looks great on Android, so I'm hoping to not have to switch.

I've included steps for manual installation in IOS but didn't do the trick.

[ikosakwe]

Same issue.. perfect on android, buggy on ios

[hsivakum]

Same issue here works on android as expected but ios, when button clicks nothing, happen and I have used react-hooks

[ketan1062]

Same issue occurs. It works fine some days before after that automatically stops working. Please help me. Working fine in Android only issue in iOS Note: DateTimePicker shows when clicking on the iOS home button and again open app.

[JBaczuk]

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>
      )
}

[chris-gaona]

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>

[slushman]

@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.

[Hristijan95]

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.

[dan-abc]

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;
}

[habibmiranda]

You can also add the following to your info.plist file: ` UIUserInterfaceStyle

Light`

[arsimr16]

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

[TaylorDale]

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.

[MorenoMdz]

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.

I am facing this issue right now. Also somehow it works in Expo but not in the built version from the store (Android).

I need to have the datepicker inside a Modal to work in IOS, but when I try it in android it shows up "behind" the modal, as a modal behind the modal.

Anyway, this should be set to have a z-index above the RN modal for android, if possible if not, it would be good to make it clear in the docs that you cant have it inside a Modal for android as the component is a modal itself.

[sanjeevkse]

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.

[vonovak]

closing as outdated, thank you