Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS Larger Text Accessibility #864

Open
rnigro-rwb opened this issue Oct 14, 2024 · 0 comments
Open

iOS Larger Text Accessibility #864

rnigro-rwb opened this issue Oct 14, 2024 · 0 comments

Comments

@rnigro-rwb
Copy link

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant