Transparent Modal Background on Android 9 Datepicker

[waelvilla]

Bug report

Summary

We were previously using v3.0.8, and after upgrading to v6+ the Datepicker modal has started showing up with a transparent background. On v5.1.0 the modal renders with a white background as expected. This problem has been observed on a Smasung S8 (Android 9) device. It did not occur when running an Android emulator with Android 9, nor with another Android device with a newer Android version.

Reproducible sample code

import DateTimePicker from "@react-native-community/datetimepicker";

const Picker = () => {
  return (
    <DateTimePicker value={new Date()} mode="date" is24Hour display="spinner" />
  );
};

Steps to reproduce

1. Install the latest version of the library
2. Run the code on Samsung S8 with Android 9

Describe what you expected to happen:

1. A modal shows up with a white background and a spinner picker

Environment info

npx react-native info output:

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 125.09 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
    Watchman: 2023.01.30.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.0 => 0.66.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

datetimepicker version: ^6.0.0 to ^6.7.5

iOS / Android version: 9.0

[vonovak]

Hello and thanks for reporting, since you have the device that reproduces the issue, would you be willing to fix the bug?

I will not be able to reproduce with my device. Thank you 🙂

[rolandvar]

Hello, I'm experiencing the same error on Huawei P10.

Do you have any suggestions?

[Twinbird24]

I'm experiencing the same issue on Android as well. My temporary fix is to check for Platform.OS === 'android'and open a "modal" in the center of the screen to serve as the background for the picker using position: 'absolute' and top & left styles to center it.