Description
Description
When using or in React Native on iOS, the Dynamic Type accessibility feature is not properly supported. Even though allowFontScaling is enabled and font scaling is applied manually using PixelRatio.getFontScale(), the Xcode Accessibility Inspector reports the warning:
"Dynamic Type font sizes are unsupported. User will not be able to change the font size of this element."
This appears to be because React Native doesn’t fully bridge to iOS APIs like UIFont.preferredFont(forTextStyle:) or adjustsFontForContentSizeCategory.
Steps to reproduce
Create a basic React Native screen with a and
Enable allowFontScaling={true} and apply fontSize * PixelRatio.getFontScale()
Enable Larger Text from iOS Settings:
Settings > Accessibility > Display & Text Size > Larger Text
Open the app on an iOS device or simulator
Open Xcode → Accessibility Inspector
Hover over or select the input or text element
Observe warning:
"Dynamic Type font sizes are unsupported"
React Native Version
"react-native": "0.75.4",
Affected Platforms
Runtime - iOS
Output of npx @react-native-community/cli info
System:
OS: macOS 14.6.1
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 58.25 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.17.0
path: ~/.nvm/versions/node/v20.17.0/bin/node
Yarn:
version: 3.6.4
path: ~/.nvm/versions/node/v20.17.0/bin/yarn
npm:
version: 10.8.2
path: ~/.nvm/versions/node/v20.17.0/bin/npm
Watchman:
version: 2024.12.02.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.1
- iOS 18.1
- macOS 15.1
- tvOS 18.1
- visionOS 2.1
- watchOS 11.1
Android SDK: Not Found
IDEs:
Android Studio: 2024.2 AI-242.23339.11.2421.12483815
Xcode:
version: 16.1/16B40
path: /usr/bin/xcodebuild
Languages:
Java:
version: 19.0.2
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 14.1.0
wanted: 14.1.0
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.75.4
wanted: 0.75.4
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
Stacktrace or Logs
Dynamic Type font sizes are unsupported.
User will not be able to change the font size of this element.
MANDATORY Reproducer
import React from 'react'; import { View, Text, TextInput, PixelRatio } from 'react-native'; export default function AccessibilityIssueDemo() { const fontScale = PixelRatio.getFontScale(); return ( <View style={{ padding: 20 }}> <Text style={{ fontSize: 16 * fontScale, color: 'black', }} allowFontScaling={true} > Welcome <TextInput style={{ fontSize: 16 * fontScale, borderColor: 'gray', borderWidth: 1, marginTop: 20, padding: 10, }} allowFontScaling={true} placeholder="Enter name" /> ); }
Screenshots and Videos
“Dynamic Type font sizes are unsupported…”