react-native
react-native copied to clipboard
facebook
Add Dynamic Type support for iOS (Paper and Fabric)
Summary
This adds Dynamic Type support in iOS as described here.
Text elements have a new prop, dynamicTypeRamp, that allows users to specify which font ramp a particular Text element should take on as the OS's accessibility setting for text size. The different types line up with different values of UIFontTextStyle. If not specified, we default to the current behavior.
~~For the moment, this change is only for Paper. I tried applying a corresponding change to Fabric by adding an additional field to facebook::react::TextAttributes and changing RCTEffectiveFontSizeMultiplierFromTextAttributes to use that new field, but in the process I discovered that this function doesn't seem to ever get called, hence this bug.~~
Changelog
[iOS] [Added] - Dynamic Type support
Test Plan
Validated with a test page in RNTester. Screenshots follow:
A) Default text size B) Largest non-accessibility text size C) Largest accessibility text size, split across two screenshots due to size
| A | B | C |
|---|---|---|
 |
 |
 |
 |
| Platform | Engine | Arch | Size (bytes) | Diff |
|---|---|---|---|---|
| android | hermes | arm64-v8a | 6,993,434 | +1,351 |
| android | hermes | armeabi-v7a | 6,369,583 | +965 |
| android | hermes | x86 | 7,406,626 | +1,852 |
| android | hermes | x86_64 | 7,270,277 | +1,485 |
| android | jsc | arm64-v8a | 8,857,216 | +1,259 |
| android | jsc | armeabi-v7a | 7,595,335 | +865 |
| android | jsc | x86 | 8,915,461 | +1,751 |
| android | jsc | x86_64 | 9,398,459 | +1,399 |
Base commit: d71d0db51dec825ed9151ea02533279411381bb2 Branch: main
| Platform | Engine | Arch | Size (bytes) | Diff |
|---|---|---|---|---|
| ios | - | universal | n/a | -- |
Base commit: 7964d484bc800e1108e8462fc7aeb1fbaae842b9 Branch: main
Hey there. When we talked about this PR a bit internally, there was a little bit of concern on accepting new capabilities which are paper-only. Having functionality that works on Paper, but not Fabric, means we would be taking new features away when the new Architecture is rolled out/default in OSS.
I see that the Fabric implementation is blocked by a separate bug in #34990. I will make sure this is surfaced internally.
@NickGerleman Now that e9b89b5ff2b0085128bec2879d761352747d6714 is a thing, I've added a Fabric implementation as well.
@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
PR build artifact for 355c7d2e6acc9a2dba87620db1036db0dd1f65ba is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 0254c3a23d761e512a781031a1afd88173486c3a is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
Seeing the below when we are invoking the Cocoapods build internally via react-native-oss-ios-jsc, but not coverage in CircleCI. @cipolleschi @hramos any guesses?
The following build commands failed:
CompileC <>/Library/Developer/Xcode/DerivedData/RNTesterPods-avhcctdswdycllfjzyasqkbrubnn/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-RCTText.build/Objects-normal/x86_64/RCTUITextView.o <>/Libraries/Text/TextInput/Multiline/RCTUITextView.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler (in target 'React-RCTText' from project 'Pods') (1 failure)