iOS Larger Text Accessibility

[rnigro-rwb]

Describe the bug On iOS, when the phone is configured to have a contentSize of UIContentSizeCategoryAccessibilityLarge or bigger, this code handles adjusting the height

https://github.com/henninghall/react-native-date-picker/blob/master/ios/RNDatePickerManager.mm#L83

        // Adjust height based on content size category
        if ([contentSize isEqualToString:UIContentSizeCategoryAccessibilityLarge]) {
            heightIncrement = 15;
        } else if ([contentSize isEqualToString:UIContentSizeCategoryAccessibilityExtraLarge]) {
            heightIncrement = 40;
        } else if ([contentSize isEqualToString:UIContentSizeCategoryAccessibilityExtraExtraLarge]) {
            heightIncrement = 70;
        } else if ([contentSize isEqualToString:UIContentSizeCategoryAccessibilityExtraExtraExtraLarge]) {
            heightIncrement = 90;
        }

However, the title also is larger in the case and overlaps the date selections.

Expected behavior The pickerBounds.size.height and pickerBounds.origin.y should both be adjusted to allow for additional height for the title.

To Reproduce Add example code that reproduces the behavior.

export default class App extends Component {

  state = { date: new Date() }

  render = () =>
    <DatePicker
      modal
      mode="date"
      title={'Manufactured Date'}
      date={this.state.date}
      onDateChange={date => this.setState({ date })}
    />

}

iPhone 7, iOS version 15.8.3, content size of UIContentSizeCategoryAccessibilityExtraExtraExtraLarge

Smartphone (please complete the following information):

• OS: iOS
• React Native version 0.72.12
• react-native-date-picker version 5.0.7

Possible Workaround

This is what worked for us. I didn't submit it as a PR because of the drastic difference in height adjustments, but I can if it makes sense.

        // Adjust height based on content size category
        if ([contentSize isEqualToString:UIContentSizeCategoryAccessibilityLarge]) {
            heightIncrement = 95;
            paddingIncrement = 60;
        } else if ([contentSize isEqualToString:UIContentSizeCategoryAccessibilityExtraLarge]) {
            heightIncrement = 120;
            paddingIncrement = 80;
        } else if ([contentSize isEqualToString:UIContentSizeCategoryAccessibilityExtraExtraLarge]) {
            heightIncrement = 150;
            paddingIncrement = 100;
        } else if ([contentSize isEqualToString:UIContentSizeCategoryAccessibilityExtraExtraExtraLarge]) {
            heightIncrement = 170;
            paddingIncrement = 120;
        }
 
        // height
        double pickerHeight = [self getPickerHeight:alertView];
        int alertHeightPx = iPad ? (title ? 300 : 260) : (title ? 370 + heightIncrement : 340 + heightIncrement);
        NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:alertView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:alertHeightPx];
        [alertView addConstraint:height];
        pickerBounds.size.height = pickerHeight;
        
        // width
        double pickerWidth = [self getPickerWidth:alertView];
        int alertWidthPx = pickerWidth;
        NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:alertView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:alertWidthPx];
        [alertView addConstraint:width];
        pickerBounds.size.width = pickerWidth;
 
        // top padding
        pickerBounds.origin.y += iPad ? (title ? 20: 5) : (title ? paddingIncrement : 10);