iOS 14

[isnifer]

Issue

Looks like iOS 14 introduced new design for Calendar

Expected Behaviour

Looks like this component needs to be updated to handle these changes for iOS 14

Environment

1. react-native -v: 0.62.2
2. node -v: v10.18.1
3. npm -v: 6.13.4
4. yarn --version: 1.22.4
5. target platform: iOS (14)
6. operating system: macOS

[pramodsharma403]

Any update on this?

[karims10]

The question is: Is this lib still maintained ? 😕

[ashishkanhasoft]

@pramodsharma403 Have you get any solution for this issue?

[ymc-thzi]

Same issue here. What I experienced now is that my app displays the datepicker correctly in the "old" way when the app is built with XCode 11. My current app live in the store (archived with XCode 11) running on a real device with iOS 14 beta 4 the Datepicker looks OK. If I build/archive with XCode 12 beta 4 the DatePicker looks broken like the one above.

[undeaDD]

one solution for this may be to override the preferedStyle of any UIDatePicker in the iOS native Workspace:

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

But there is one catch 👎 The DatePickerWheel is smaller in iOS14 and wont fill the Libraries Modal sadly Maybe someone else here has any Idea for that ^^

If you are fine with a left aligned Wheel though just put the code from above in your AppDelegate -> didFinishLaunchingWithOptions function

[undeaDD]

okay i just fixed the misalignment with some customStyles ...

<DatePicker
    customStyles={{
      datePicker: {
        backgroundColor: '#d1d3d8',
        justifyContent:'center'
      }
    }}
...
/>

Result: iOS 14 ( compiled with XCode 12 )

[jithinlal]

were did you update the ios datepicker code? In workspace? @undeaDD

[undeaDD]

Anywhere before the datepicker is loaded is fine ;) I personally put it in the AppDelegate didFinishLaunching function 👍 so that it gets executed at App launch

[jithinlal]

Cool it worked

[burivuhster]

The solution from @undeaDD worked for me as well, thank you so much for sharing this.

[najielchemaly]

Hello, can anyone explain where to do the workaround for alignment issue? Knowing that if you do it inside the component rendering it only works when you save the file and after you open the picker again it goes left.. Any advise? Thanks

[miguelacio]

The solution @undeaDD provided worked just fine, but, I still kinda want to be able to use iOS 14 date picker, anyone has any approach to do this?

[syntag]

We desperately need a new repository that's maintained for date picking.

[cameroncharles]

can confirm @undeaDD workaround works well enough

Real solution i think is to just go back to reactnative(community) date pickers which look to have come a long way since this libraries inception

[dhavalpanchani]

These two things worked for me.

1. Add below code in didFinishLaunching function in appdelegate.m :

Check the full code here- https://github.com/xgfe/react-native-datepicker/issues/425#issuecomment-744475142

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

2. In DatePicker customStyles :

<DatePicker
    customStyles={{
      datePicker: {
        backgroundColor: '#d1d3d8',
        justifyContent:'center'
      }
    }}
...
/>

[wo-xiaoxiao]

These two things worked for me.

1. Add below code in didFinishLaunching function in appdelegate.m :

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

1. In DatePicker customStyles :

<DatePicker customStyles={{ datePicker: { backgroundColor: '#d1d3d8', justifyContent:'center' } }} ... />

Cool it worked

[dmitryshelomanov]

@wo-xiaoxiao on real device ?

[komelabbbas]

Any solution for expo..? I have try many thing but not work. Plz help

[uvrik]

These two things worked for me.

1. Add below code in didFinishLaunching function in appdelegate.m :

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

1. In DatePicker customStyles :

<DatePicker customStyles={{ datePicker: { backgroundColor: '#d1d3d8', justifyContent:'center' } }} ... />

Hi, @dhavalpanchani Thanks for your help, but can you show your appdelegate.m file code here, especially the rows where you added your code. I think, we have different files, but i hope i can use your code for better understanding of what i have to do to make my datepicker work correctly =).

[dhavalpanchani]

@uvrik : Sure, here it's.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
  if (@available(iOS 14, *)) {
    UIDatePicker *picker = [UIDatePicker appearance];
    picker.preferredDatePickerStyle = UIDatePickerStyleWheels;
  }
  
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"App"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
    
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  
  return YES;
}

[vhuerta]

Found a work around for expo apps without eject:

1. Install this fork that allows using a custom datepicker controller for iOS (https://github.com/codynguyen/react-native-datepicker/tree/ios-datepicker-component) with:

 npm install git+https://github.com/codynguyen/react-native-datepicker.git#ios-datepicker-component --save

2. Install @react-native-community/datetimepicker

npm install --save @react-native-community/datetimepicker

3. Add this prop to your datepicker

import RNDatePicker from '@react-native-community/datetimepicker';
// ...
<DatePicker 
    iOSDatePickerComponent={(props) => (<RNDatePicker {...props} display={Platform.OS === 'ios' ? 'spinner' : 'default' }/>)} 
/>

enjoy :)

[aliiqbal436]

@vhuerta this solution is not working for expo.

[vhuerta]

@aliiqbal436 have it working on my own expo app, these are my versions

"react-native-datepicker": "git+https://github.com/codynguyen/react-native-datepicker.git#ios-datepicker-component",
"@react-native-community/datetimepicker": "^3.0.9",

I think expo installs a different @react-native-community/datetimepicker version

[aliiqbal436]

"@react-native-community/datetimepicker": "3.0.9", "react-native-datepicker": "git+https://github.com/codynguyen/react-native-datepicker.git#ios-datepicker-component", @vhuerta I also have the same versions.

[ikismail]

Found a work around for expo apps without eject:

1. Install this fork that allows using a custom datepicker controller for iOS (https://github.com/codynguyen/react-native-datepicker/tree/ios-datepicker-component) with:

 npm install git+https://github.com/codynguyen/react-native-datepicker.git#ios-datepicker-component --save

1. Install @react-native-community/datetimepicker

npm install --save @react-native-community/datetimepicker

1. Add this prop to your datepicker

import RNDatePicker from '@react-native-community/datetimepicker';
// ...
<DatePicker 
    iOSDatePickerComponent={(props) => (<RNDatePicker {...props} display={Platform.OS === 'ios' ? 'spinner' : 'default' }/>)} 
/>

enjoy :)

Works like charm.. Thanks @vhuerta 👍

[telltokichu]

These two things worked for me only in Development mode .

Add below code in didFinishLaunching function in appdelegate.m : if (@available(iOS 14, *)) { UIDatePicker *picker = [UIDatePicker appearance]; picker.preferredDatePickerStyle = UIDatePickerStyleWheels; }

In DatePicker customStyles : <DatePicker customStyles={{ datePicker: { backgroundColor: '#d1d3d8', justifyContent:'center' } }} ... />

but after building it in release mode in ios, I'm getting like this

any fix ?

[adaniels5201]

These two things worked for me only in Development mode .

Add below code in didFinishLaunching function in appdelegate.m : if (@available(iOS 14, *)) { UIDatePicker *picker = [UIDatePicker appearance]; picker.preferredDatePickerStyle = UIDatePickerStyleWheels; }

In DatePicker customStyles : <DatePicker customStyles={{ datePicker: { backgroundColor: '#d1d3d8', justifyContent:'center' } }} ... />

but after building it in release mode in ios, I'm getting like this

any fix ?

Looks like a dark mode issue. Do you have the same view in light mode?

[telltokichu]

yes It was issue with dark mode - after changing uiappearance mode in xcode to light - it got fixed

[syedamirali14]

These two things worked for me.

1. Add below code in didFinishLaunching function in appdelegate.m :

Check the full code here- #425 (comment)

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

1. In DatePicker customStyles :

<DatePicker
    customStyles={{
      datePicker: {
        backgroundColor: '#d1d3d8',
        justifyContent:'center'
      }
    }}
...
/>

this worked for my xcode 11.1

[ksjmb]

okay i just fixed the misalignment with some customStyles ...

<DatePicker
    customStyles={{
      datePicker: {
        backgroundColor: '#d1d3d8',
        justifyContent:'center'
      }
    }}
...
/>

Result: iOS 14 ( compiled with XCode 12 )

Thank you, it will work for me