Property 'preferredDatePickerStyle' not found on object of type 'UIDatePicker'

Question

I am using react-native 0.62.2 version and datetimepicker version 3.0.1. As I am trying to build the project with xcode, the following errors are being shown:

1. Use of undeclared identifier 'UIDatePickerStyleCompact'
2. Use of undeclared identifier 'UIDatePickerStyleWheels'
3. Property 'preferredDatePickerStyle' not found on object of type 'RNDateTimePicker *'
4. Property 'preferredDatePickerStyle' not found on object of type 'UIDatePicker*'
5. Implicit conversion of 'NSInteger' (aka 'long') to 'id' is disallowed with ARC
6. Statement requires expression of integer type ('__strong id' invalid)
7. Implicit conversion of 'UIDatePickerMode' (aka 'enum UIDatePickerMode') to 'id' is disallowed with ARC
8. Use of undeclared identifier 'UIDatePickerStyleWheels'

The following is the code inside RNDateTimePickerManager.h

#import "RNDateTimePickerManager.h"

#import <React/RCTBridge.h>
#import <React/RCTEventDispatcher.h>
#import "RNDateTimePicker.h"
#import <React/UIView+React.h>

@implementation RCTConvert(UIDatePicker)

RCT_ENUM_CONVERTER(UIDatePickerMode, (@{
  @"time": @(UIDatePickerModeTime),
  @"date": @(UIDatePickerModeDate),
  @"datetime": @(UIDatePickerModeDateAndTime),
}), UIDatePickerModeTime, integerValue)

RCT_ENUM_CONVERTER(UIDatePickerStyle, (@{                //Error 5
    @"default": @(UIActionSheetStyleAutomatic),
    @"compact": @(UIDatePickerStyleCompact),             //Error 1
    @"spinner": @(UIDatePickerStyleWheels),              //Error 2
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 140000
    @"inline": @(UIDatePickerStyleInline),
#endif
}), UIActionSheetStyleAutomatic, integerValue)

@end

@implementation RNDateTimePickerManager

RCT_EXPORT_MODULE()

- (UIView *)view
{
  return [RNDateTimePicker new];
}

+ (NSString*) datepickerStyleToString: (UIDatePickerStyle) style {
    // RCTConvert does not handle this.?
    switch (style) {                                       //Error 6
        case UIDatePickerStyleCompact:
            return @"compact";
        case UIDatePickerStyleWheels:
            return @"spinner";
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 140000
        case UIDatePickerStyleInline:
            return @"inline";
#endif
        default:
            [NSException raise:@"Unsupported style value" format:@"UIDatePickerStyle of %ld is unsupported", (long)style];
            return @"";
    }
}

RCT_EXPORT_METHOD(getDefaultDisplayValue:(NSDictionary *)options resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
{
    dispatch_async(dispatch_get_main_queue(), ^{
        UIDatePicker* view = [RNDateTimePicker new];
        
        view.preferredDatePickerStyle = UIActionSheetStyleAutomatic;          //Error 4
        UIDatePickerMode renderedMode = [RCTConvert UIDatePickerMode:options[@"mode"]];
        view.datePickerMode = renderedMode;
        // NOTE afaict we do not need to measure the actual dimensions here, but if we do, just look at the original PR
        
        UIDatePickerMode determinedDisplayValue = view.datePickerMode;    //Error 7

        resolve(@{
                 @"determinedDisplayValue": [RNDateTimePickerManager datepickerStyleToString:determinedDisplayValue],
                });
    });
}

RCT_EXPORT_VIEW_PROPERTY(date, NSDate)
RCT_EXPORT_VIEW_PROPERTY(locale, NSLocale)
RCT_EXPORT_VIEW_PROPERTY(minimumDate, NSDate)
RCT_EXPORT_VIEW_PROPERTY(maximumDate, NSDate)
RCT_EXPORT_VIEW_PROPERTY(minuteInterval, NSInteger)
RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
RCT_REMAP_VIEW_PROPERTY(mode, datePickerMode, UIDatePickerMode)
RCT_REMAP_VIEW_PROPERTY(timeZoneOffsetInMinutes, timeZone, NSTimeZone)

RCT_CUSTOM_VIEW_PROPERTY(textColor, UIColor, RNDateTimePicker)
{
    if (@available(iOS 14.0, *) && view.datePickerMode != UIDatePickerStyleWheels) {  //Error 8
    // prevents #247
    return;
  }
  if (json) {
    [view setValue:[RCTConvert UIColor:json] forKey:@"textColor"];
    [view setValue:@(NO) forKey:@"highlightsToday"];
  } else {
    UIColor* defaultColor;
    if (@available(iOS 13.0, *)) {
        defaultColor = [UIColor labelColor];
    } else {
        defaultColor = [UIColor blackColor];
    }
    [view setValue:defaultColor forKey:@"textColor"];
    [view setValue:@(YES) forKey:@"highlightsToday"];
  }
}

// TODO vonovak setting preferredDatePickerStyle invalidates minuteinterval
RCT_CUSTOM_VIEW_PROPERTY(displayIOS, UIDatePickerStyle, RNDateTimePicker)
{
    if (@available(iOS 13.4, *)) {
        if (json) {
            UIDatePickerMode propValue = [RCTConvert UIDatePickerStyle:json];
            view.preferredDatePickerStyle = propValue;           //Error 3
        } else {
            view.preferredDatePickerStyle = UIActionSheetStyleAutomatic;
        }
    }
}

@end

Is there any bug in the react-native datetimepicker?

Answer 1

For those who are still stuck on this, specifically using this library.

Starting from version 3.0.3, it require that your Xcode is at least v11 but they never mention that v11.3 will not work which a lot of people already noticed that you will need at least v11.6.

Mind you, downgrading might not really help you either as you're missing the point of update which addresses a lot of bugs e.g #217 fix