iOS 14 #425

isnifer · 2020-06-24T17:07:43Z

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

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

The text was updated successfully, but these errors were encountered:

pramodsharma403 · 2020-07-06T13:50:44Z

Any update on this?

karims10 · 2020-07-14T15:39:45Z

The question is: Is this lib still maintained ? 😕

ashishkanhasoft · 2020-08-07T12:41:07Z

@pramodsharma403 Have you get any solution for this issue?

ymc-thzi · 2020-08-11T12:20:04Z

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 · 2020-09-14T10:52:54Z

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 · 2020-09-14T11:55:04Z

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

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

Result: iOS 14 ( compiled with XCode 12 )

jithinlal · 2020-09-17T10:16:02Z

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

undeaDD · 2020-09-17T11:06:17Z

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 · 2020-09-17T12:11:15Z

Cool it worked

burivuhster · 2020-09-29T19:40:04Z

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

najielchemaly · 2020-10-02T13:08:43Z

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 · 2020-10-15T22:54:58Z

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 · 2020-10-22T23:22:54Z

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

cameroncharles · 2020-10-30T00:38:41Z

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 · 2020-11-08T05:56:21Z

These two things worked for me.

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;
}

In DatePicker customStyles :

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

wo-xiaoxiao · 2020-11-17T12:19:35Z

These two things worked for me.

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'
}
}}
...
/>

Cool it worked

dmitryshelomanov · 2020-11-20T08:53:06Z

@wo-xiaoxiao on real device ?

komelabbbas · 2020-12-03T16:12:47Z

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

uvrik · 2020-12-14T14:23:11Z

These two things worked for me.

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'
}
}}
...
/>

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 · 2020-12-14T14:25:49Z

@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 · 2021-01-20T03:40:10Z

Found a work around for expo apps without eject:

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

Install @react-native-community/datetimepicker

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

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 · 2021-02-11T14:12:07Z

@vhuerta this solution is not working for expo.

vhuerta · 2021-02-11T23:07:52Z

@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 · 2021-02-12T10:52:50Z

"@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 · 2021-03-02T15:57:52Z

Found a work around for expo apps without eject:

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
Install @react-native-community/datetimepicker
npm install --save @react-native-community/datetimepicker
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 · 2021-03-05T09:37:47Z

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 · 2021-03-08T21:08:51Z

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 · 2021-03-09T08:23:51Z

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

syedamirali14 · 2021-04-01T15:29:23Z

These two things worked for me.

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;
}
In DatePicker customStyles :
<DatePicker
    customStyles={{
      datePicker: {
        backgroundColor: '#d1d3d8',
        justifyContent:'center'
      }
    }}
...
/>

this worked for my xcode 11.1

ksjmb · 2021-05-04T07:30:11Z

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

ioswmtdeveloper · 2021-07-28T14:10:02Z

@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;
}

Mind blowing. Easiest solution !!!!!!

YaarPatandarAA · 2021-07-29T04:46:47Z

Workaround by @undeaDD confirmed still working. 👍🏻

maheshwarimrinal · 2022-03-15T09:00:43Z

These two things worked for me.

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;
}
In DatePicker customStyles :
<DatePicker
    customStyles={{
      datePicker: {
        backgroundColor: '#d1d3d8',
        justifyContent:'center'
      }
    }}
...
/>

This works like a charm!!

xiaohui-hiwintech mentioned this issue Jan 29, 2021

ios设置mode='data'为什么就显示一行数据 #439

Open

vhuerta mentioned this issue Feb 12, 2021

Got weird view on IOS #444

Closed

MOwais mentioned this issue Jun 3, 2021

iOS - Datepicker only showing current date #449

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iOS 14 #425

iOS 14 #425

isnifer commented Jun 24, 2020 •

edited

pramodsharma403 commented Jul 6, 2020

karims10 commented Jul 14, 2020 •

edited

ashishkanhasoft commented Aug 7, 2020

ymc-thzi commented Aug 11, 2020 •

edited

undeaDD commented Sep 14, 2020

undeaDD commented Sep 14, 2020

jithinlal commented Sep 17, 2020

undeaDD commented Sep 17, 2020

jithinlal commented Sep 17, 2020

burivuhster commented Sep 29, 2020

najielchemaly commented Oct 2, 2020

miguelacio commented Oct 15, 2020

syntag commented Oct 22, 2020

cameroncharles commented Oct 30, 2020

dhavalpanchani commented Nov 8, 2020 •

edited

wo-xiaoxiao commented Nov 17, 2020

dmitryshelomanov commented Nov 20, 2020

komelabbbas commented Dec 3, 2020

uvrik commented Dec 14, 2020

dhavalpanchani commented Dec 14, 2020 •

edited

vhuerta commented Jan 20, 2021 •

edited

aliiqbal436 commented Feb 11, 2021

vhuerta commented Feb 11, 2021 •

edited

aliiqbal436 commented Feb 12, 2021 •

edited

ikismail commented Mar 2, 2021

telltokichu commented Mar 5, 2021

adaniels5201 commented Mar 8, 2021

telltokichu commented Mar 9, 2021

syedamirali14 commented Apr 1, 2021

ksjmb commented May 4, 2021

ioswmtdeveloper commented Jul 28, 2021

YaarPatandarAA commented Jul 29, 2021 •

edited

maheshwarimrinal commented Mar 15, 2022

iOS 14 #425

iOS 14 #425

Comments

isnifer commented Jun 24, 2020 • edited

Issue

Expected Behaviour

Environment

pramodsharma403 commented Jul 6, 2020

karims10 commented Jul 14, 2020 • edited

ashishkanhasoft commented Aug 7, 2020

ymc-thzi commented Aug 11, 2020 • edited

undeaDD commented Sep 14, 2020

undeaDD commented Sep 14, 2020

jithinlal commented Sep 17, 2020

undeaDD commented Sep 17, 2020

jithinlal commented Sep 17, 2020

burivuhster commented Sep 29, 2020

najielchemaly commented Oct 2, 2020

miguelacio commented Oct 15, 2020

syntag commented Oct 22, 2020

cameroncharles commented Oct 30, 2020

dhavalpanchani commented Nov 8, 2020 • edited

wo-xiaoxiao commented Nov 17, 2020

dmitryshelomanov commented Nov 20, 2020

komelabbbas commented Dec 3, 2020

uvrik commented Dec 14, 2020

dhavalpanchani commented Dec 14, 2020 • edited

vhuerta commented Jan 20, 2021 • edited

aliiqbal436 commented Feb 11, 2021

vhuerta commented Feb 11, 2021 • edited

aliiqbal436 commented Feb 12, 2021 • edited

ikismail commented Mar 2, 2021

telltokichu commented Mar 5, 2021

adaniels5201 commented Mar 8, 2021

telltokichu commented Mar 9, 2021

syedamirali14 commented Apr 1, 2021

ksjmb commented May 4, 2021

ioswmtdeveloper commented Jul 28, 2021

YaarPatandarAA commented Jul 29, 2021 • edited

maheshwarimrinal commented Mar 15, 2022

isnifer commented Jun 24, 2020 •

edited

karims10 commented Jul 14, 2020 •

edited

ymc-thzi commented Aug 11, 2020 •

edited

dhavalpanchani commented Nov 8, 2020 •

edited

dhavalpanchani commented Dec 14, 2020 •

edited

vhuerta commented Jan 20, 2021 •

edited

vhuerta commented Feb 11, 2021 •

edited

aliiqbal436 commented Feb 12, 2021 •

edited

YaarPatandarAA commented Jul 29, 2021 •

edited