Empty date picker in iOS

[muratoner]

Issue

iOS Date picker don't have any problem in simulator but occured empty date picker problem when install in real ios device.

Expected Behavior

I want appear date picker in real device.

Code

import {Colors, TextColors} from 'common/Colors';
import {FontFamily, FontWeight} from './Text';
import React, {useEffect, useState} from 'react';
import {View, ViewStyle} from 'react-native';

import DatePickerBase from 'react-native-datepicker';
import {IcoMoon} from 'components/IcoMoon';
import styled from 'styled-components/native';

interface IProps {
  value: any;
  margin?: {left?: number; top?: number; right?: number; bottom?: number};
  onChangeDate: (date: any) => void;
  placeholder?: string;
  style?: ViewStyle;
  flex?: boolean;
}

export const DatePicker: React.FC<IProps> = ({
  value,
  onChangeDate,
  placeholder,
  margin,
  style,
  flex
}) => {
  const [selectedDate, changeDate] = useState(value);

  useEffect(() => {
    changeDate(value);
  }, [value]);

  const onSelectOption = date => {
    changeDate(date);
    onChangeDate && onChangeDate(date);
  };

  return (
    <DatePickerBaseStyled
      flex={flex}
      date={selectedDate}
      style={style}
      mode="date"
      placeholder={placeholder}
      format="DD-MM-YYYY"
      confirmBtnText="Kaydet"
      cancelBtnText="İptal"
      showIcon={true}
      is24Hour
      iconComponent={
        <IcoMoon
          name="calendar-alt"
          style={{
            left: 10,
            top: 10,
            position: 'absolute',
            marginTop: 'auto',
            marginBottom: 'auto'
          }}
        />
      }
      customStyles={{
        dateTouchBody: {
          marginLeft: margin?.left,
          marginRight: margin?.right,
          marginTop: margin?.top,
          marginBottom: margin?.bottom
        },
        btnTextConfirm: {
          color: TextColors.Primary
        },
        btnTextCancel: {
          color: TextColors.Primary
        },
        dateInput: {
          borderRadius: 4,
          borderWidth: 2,
          borderStyle: 'solid',
          borderColor: Colors.Grey200,
          paddingVertical: 5,
          paddingHorizontal: 10
        }
      }}
      onDateChange={date => {
        onSelectOption(date);
      }}
    />
  );
};

const DatePickerBaseStyled = styled(DatePickerBase)<{flex?: boolean}>`
  ${({flex}) => flex && `flex: 1`}
  ${({flex}) => flex && `width: 100%`}
`;

Environment

1. react-native --version: 3.0.4
2. react-native -v: 0.61.3
3. node -v: 10.0.0
4. npm -v: 5.6.0
5. yarn --version: 1.21.0
6. target platform: iOS
7. operating system: MacOS

[MickeyCantor]

I am also seeing this happen randomly in our app. Seems to only be a problem with iOS 13.

[MickeyCantor]

Checkout #365, Seems like there may be a problem with dark mode and iOS 13

[muratoner]

@MickeyCantor you are right. I'm switched light mode then resolved problem, thanks.

[prasad-11-cairs]

This issue still remains if dark mode is on from the system, the end-user can't recognize dark mode. What could be the solution for dark mode is enabled?