DateTimePicker do not show in new RN version

[zhenguet]

Bug report

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Memory: 2.07 GB / 15.82 GB
  Binaries:
    Node: 16.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20220614.153706.0 - C:\ProgramData\chocolatey\bin\watchman.EXE
  SDKs:
    Android SDK:
      API Levels: 23, 27, 28, 29, 30, 31, 32, 33
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 33.0.0, 33.0.1, 34.0.0      
      System Images: android-25 | Google APIs Intel x86 Atom, android-29 | Google Play 
Intel x86 Atom, android-30 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom_64, 
android-31 | Intel x86 Atom_64, android-31 | Google APIs Intel x86 Atom_64, android-31 
| Google Play Intel x86 Atom_64
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: AI-213.7172.25.2113.9123335
    Visual Studio: 16.11.33423.256 (Visual Studio Professional 2019)
  Languages:
    Java: 13.0.2 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE        
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.4 => 0.71.4
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Platforms

Android

Versions

• Android: 12
• iOS: unchecked
• react-native-modal-datetime-picker: ^14.0.1
• react-native-community/datetimepicker: ^7.0.1
• react-native: 0.71.4
• react: 18.2.0

Description

set visible to true but modal do not show

Reproducible Demo

import React, { useState } from 'react';
import { Button, View } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const ConsignmentDetail = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = date => {
    console.warn('A date has been picked: ', date);
    hideDatePicker();
  };

  return (
    <View>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      {isDatePickerVisible && (
        <DateTimePicker
          testID="dateTimePicker"
          value={new Date()}
          style={{ width: 300, opacity: 1, height: 30, marginTop: 50 }}
          onChange={handleConfirm}
        />
      )}
    </View>
  );
};

export default ConsignmentDetail;

[AmahAjavon]

having the same issue

[aminta]

Me too

[Drew-Gerber]

Have you tried the Android imperative API? I'm using this w/ RN 0.71.6/Expo 48.0.11 and it appears to be working fine? The version I'm using is 6.7.3 (installed via npx expo install @react-native-community/datetimepicker)

[WKampel]

Same issue

[AndonMitev]

Any resolution on this

[AndonMitev]

Have you tried the Android imperative API? I'm using this w/ RN 0.71.6/Expo 48.0.11 and it appears to be working fine? The version I'm using is 6.7.3 (installed via npx expo install @react-native-community/datetimepicker)

Hey @Drew-Gerber , I'm using exact same versions and in my code looks like this:

const onPress = () => {
    DateTimePickerAndroid.open({ value: new Date() });
  };


<PrimaryButton onPress={onPress}>
          <Text>Datetime picker</Text>
        </PrimaryButton>

But it doesnt show up, any suggestions?

[jaiminbhut]

My @react-native-community/datetimepicker version is 3.5.2 & react-native-modal-datetime-picker version is 15.0.1. Using the pickerComponentStyleIOS property, I was able to resolve this issue. I give height in pickerComponentStyleIOS and It worked for me.

[alexu96]

Same issue with my RN version 0.69

[Buk1m]

My @react-native-community/datetimepicker version is 3.5.2 & react-native-modal-datetime-picker version is 15.0.1. Using the pickerComponentStyleIOS property, I was able to resolve this issue. I give height in pickerComponentStyleIOS and It worked for me.

After setting the height like @jaiminbhut suggested the picker on iOS 14 is working again.

pickerComponentStyleIOS={{height: 300}}

"@react-native-community/datetimepicker": "7.4.2" "react-native": "0.69.9"

[alexu96]

@Buk1m , I am unable to see, the date picker in my android device. It shows DatePickerAndroid is depreciated, any suggestions?

[Buk1m]

I followed the FAQ of react-native-modal-datetime-picker and updated @react-native-community/datetimepicker to latest version but it didn't help and after that I had errors on Android.

I went back to the version recommended by expo: "@react-native-community/datetimepicker": "6.5.2"

and used the suggested prop:

pickerComponentStyleIOS={{height: 300}}

Now I have a working picker on both platforms, but so far I only tested it on simulators.

[yasirsd10]

@Buk1m Thank You your fixes is working

[zahid502]

facing same issue

[jaagaard01]

I'm having a similar issue where the actual picker isnt rendering on an actual device but its showing in my simulator.

"@react-native-community/datetimepicker": "7.2.0",
"expo": "~49.0.15",
"react-native": "0.72.6",

but im not using react-native-modal-datetime-picker, has anyone else been having this issue?

       <DateTimePicker
            mode='date'
            display='spinner'
            value={field.value.toDate()}
            onChange={(_, date) => {
              date && field.onChange(dayjs(date))
              /// We need to close for android
              Platform.OS === 'android' && setOpen(!open)
            }}
          />