CODEWITHSUNDEEP
iosreact-nativereact-navigation
Nouman Tahir
Nouman Tahir

Reputation: 849

react native - ios - enabling Larger Text form accessibility messed up everything

So far my app was looking gorgeous but as soon as this "Larger Text" option is enabled from "Accessibility" everything started looking dirty, even the navigation bar.

Please suggest a way to handle these changes intelligently. enter image description here

Upvotes: 3

Views: 1555

Answers (2)

MattyK14
MattyK14

Reputation: 2126

After a lot of source code digging & Google searching, it seems you can use the AccessibilityManager native module. I don't see any documentation for it but an example function can be seen in this test file:

AccessibilityManager.setAccessibilityContentSizeMultipliers({
  'extraSmall': 1.0,
  'small': 2.0,
  'medium': 3.0,
  'large': 4.0,
  'extraLarge': 5.0,
  'extraExtraLarge': 6.0,
  'extraExtraExtraLarge': 7.0,
  'accessibilityMedium': 8.0,
  'accessibilityLarge': 9.0,
  'accessibilityExtraLarge': 10.0,
  'accessibilityExtraExtraLarge': 11.0,
  'accessibilityExtraExtraExtraLarge': 12.0,
});

For reference, this seems to be the default values:

{UIContentSizeCategoryExtraSmall: @0.823,
 UIContentSizeCategorySmall: @0.882,
 UIContentSizeCategoryMedium: @0.941,
 UIContentSizeCategoryLarge: @1.0,
 UIContentSizeCategoryExtraLarge: @1.118,
 UIContentSizeCategoryExtraExtraLarge: @1.235,
 UIContentSizeCategoryExtraExtraExtraLarge: @1.353,
 UIContentSizeCategoryAccessibilityMedium: @1.786,
 UIContentSizeCategoryAccessibilityLarge: @2.143,
 UIContentSizeCategoryAccessibilityExtraLarge: @2.643,
 UIContentSizeCategoryAccessibilityExtraExtraLarge: @3.143,
 UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: @3.571}

Upvotes: 5

Ryan Turnbull
Ryan Turnbull

Reputation: 3944

You need to disable font scaling in your app for this to not happen. To do this, put this line in class constructor found in index.ios.js

Text.defaultProps.allowFontScaling = false;

Note: This may shrink your font, depending on what your accessibility settings were previously, but now you are free to set fontSize to whatever you want.

Upvotes: 3

Related Questions