Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Different UI on iOS 14

See original GitHub issue

Summary

I am currently preparing my app for the iOS 14. I have noticed that the date picker is not what it used to be.

Here is what it looks like on iOS 13.7:

Here is the iOS 14 version: Снимок экрана 2020-09-21 в 16 22 57

Simulator Screen Shot - iPhone 11 Pro Max - 2020-09-21 at 16 23 01

There is now an extra step, instead of spinning the wheel, I need to press it to trigger another calendar popup.

I use display: "spinner" prop.

Is there any way I can still use the wheel on iOS 14?

Environment info

react-native info output:

System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 391.89 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.9.3 - /Users/pavelermakov/.rvm/gems/ruby-2.6.5/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15
    Android SDK:
      API Levels: 23, 24, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.3, 27.0.0, 27.0.1, 27.0.3, 28.0.0, 28.0.2, 28.0.3, 29.0.3
      System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-27 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_171 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
    react-native-macos: Not Found

Library version: 3.0.2

Issue Analytics

State:
Created 3 years ago
Reactions:66
Comments:59 (2 by maintainers)

Top GitHub Comments

204reactions

jChris85commented, Nov 26, 2020

I found a quick fix for this issue. You can override your preferred Style of the UIDatePicker in your native iOS workspace. Just add the following lines of code in the function didFinishLaunchingWithOptions in your ios/APP_NAME/AppDelegate file.

if (@available(iOS 14, *)) {
  UIDatePicker *picker = [UIDatePicker appearance];
  picker.preferredDatePickerStyle = UIDatePickerStyleWheels;
}

After restarting your app the date picker should show the old wheel style. This fix can be removed after this package is updated with the new user flow and styling for the iOS 14 date picker.

45reactions

yt-devcommented, Sep 23, 2020

display={Platform.OS === ‘ios’ ? ‘inline’ : ‘default’}