react-native-modal-datetime-picker: TypeError: _reactNative.NativeModules.RNDatePickerAndroid.dismiss is not a function

Environment

System:
    OS: Linux 5.8 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
    Memory: 1.30 GB / 15.56 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.0.1 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.9 - /usr/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 14.0.2 - /usr/bin/javac
    Python: 3.8.6 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Platforms

Android using Expo.

Versions

• Android: Expo SDK 39 support
• iOS: Expo SDK 39 support
• react-native-modal-datetime-picker: 9.1.0
• react-native-community/datetimepicker: 3.0.0 (locked by Expo)
• react-native: Expo sdk 39.0.3
• react: 16.13.1

Description

The following warning is thrown each time I select the date then the time:

[Unhandled promise rejection: TypeError: _reactNative.NativeModules.RNDatePickerAndroid.dismiss is not a function. (In '_reactNative.NativeModules.RNDatePickerAndroid.dismiss()', '_reactNative.NativeModules.RNDatePickerAndroid.dismiss' is undefined)]

Reproducible Demo

I use your component inside a re-usable input component:

import React, { ReactElement, useState } from 'react';
import DateTimePickerModal, { ReactNativeModalDateTimePickerProps } from 'react-native-modal-datetime-picker';
import { formatter } from '@kidways/typescript';
import InputWrapper, { InputWrapperProps } from './InputWrapper';
import InputValue from './InputValue';

interface Props extends Pick<ReactNativeModalDateTimePickerProps, 'mode'>, InputWrapperProps {
  value?: Date;
  defaultValue?: Date;
  label: string;
  theme?: 'primary' | 'secondary';
  onChange: (date: Date) => void;
  // TODO: Proper extends of @react-native-community/datetimepicker
  minimumDate?: Date;
  maximumDate?: Date;
}

const InputDateTime = ({
  theme, label, onChange, value, defaultValue, mode, help, error, ...props
}: Props): ReactElement => {
  const [show, setShow] = useState(false);

  const handleConfirm = (selectedDate: Date): void => {
    setShow(false);
    onChange(selectedDate);
  };

  const handleCancel = (): void => {
    setShow(false);
  };

  const formatDate = (date: Date): string => {
    switch (mode) {
      case 'date':
        return formatter.datetime.date(date);
      case 'time':
        return formatter.datetime.time(date);
      case 'datetime':
        return formatter.datetime.calendar(date, true);
      default:
        return 'Invalid date format.';
    }
  };

  return (
    <InputWrapper
      label={label}
      value={value}
      focus={show}
      onPress={() => setShow(true)}
      help={help}
      error={error}
    >
      {value && <InputValue value={formatDate(value)} />}
      <DateTimePickerModal
        isVisible={show}
        is24Hour
        display="default"
        isDarkModeEnabled={false}
        onConfirm={handleConfirm}
        onCancel={handleCancel}
        date={value ?? defaultValue ?? new Date()}
        mode={mode}
        locale="fr-FR"
        headerTextIOS="Choisissez une date"
        confirmTextIOS="Confirmer"
        cancelTextIOS="Annuler"
        {...props}
      />
    </InputWrapper>
  );
};

export default InputDateTime;

I’m sure I did not have this error before, so I suspect it happens after an update. Keep investigating.

We may suspect an issue with the react-native-community/datetimepicker, however I am not using it directly. Maybe the required dependency versions has to be updated?