CODEWITHSUNDEEP
reactjsreact-nativedatepicker
Jim
Jim

Reputation: 669

iOS DatePicker does not display in React Native

I cannot see my DatePicker on iOS. The modal is opened, but there is nothing visible, and when I move the DatePicker inside the modal the date changes so I know it works. It's just invisible and I don't know why.

Can you help?

thx

type Props = {
  date: Date,
  updateDate: Function
}

type State = {

}

export class DatePickerComponent extends React.Component<Props, State> {
  constructor(Props: Object) {
    super(Props);
  }

  render() {
    return (
      <DatePicker 
        cancelBtnText="Annuler"
        confirmBtnText="Valider"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 5,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 45
          }
        }}
        date={this.props.date}
        format="DD-MM-YYYY"
        iconSource={require("../../assets/Birthday.png")}
        locale="fr"
        onDateChange={(date) => this.props.updateDate(date)}
        style={{width: "60%", marginTop: 15}}
      />
    );
  }
}

Upvotes: 3

Views: 7202

Answers (3)

Daniel Loiterton
Daniel Loiterton

Reputation: 5308

I had the same issue and found the explanation in the docs under style (here):

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.

There are two ways to solve it...

  1. Opt out of Dark Mode altogether, by adding the following to info.plist:
<key>UIUserInterfaceStyle</key>
<string>Light</string>
  1. Use the textColor prop. eg:
<DatePicker
  ...
  textColor: "#000"
/>

Upvotes: 0

Hitesh Chauhan
Hitesh Chauhan

Reputation: 1540

1.Open Info.plist. 2.Add these: 

  <key>UIUserInterfaceStyle</key>
  <string>Light</string>

Upvotes: 5

marizikmund
marizikmund

Reputation: 408

It's a bug in DatePickerIOS, which happens when your phone is set to dark mode, see https://github.com/xgfe/react-native-datepicker/issues/365

As a workaround, you can install react-native-appearance module, check if dark mode is active and adjust DatePicker's style:

const colorScheme = Appearance.getColorScheme();

<DatePicker
  ...
  customStyles={{
    datePicker: {
      backgroundColor: colorScheme === "dark" ? "#222" : "white"
    }
  }}
/>

Upvotes: 0

Related Questions