feat: Add alpha, prominence, and contentHeadroom settings for PlatformColor #55012
+1,053
−340
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
In Expo, we encourage the use of
PlatformColorsince it gives users the most Apple-themed outcome on iOS. We've found LLMs often try to augment the opacity however. This PR adds support for such a modification.In SwiftUI it's common to use tint properties on controls which results in a layered platform color that we can't easily replicate without prominence.
The text could be defined with
PlatformColor("systemGreen"), but the backing layer can't be easily replicated. Now you can set the prominence on the color to replicate the style:The API is clearly more clunky than SwiftUI
.tint(.green)but user-space styling libraries such as react-native-css could implement as a tailwind class such astext-sf-green-3({ prominence: 'tertiary' }),text-sf-red/50(50% opacity).Since I was in there already, I also added the other UIColor modification
applyingContentHeadroom(iOS 26).Alternative APIs:
PlatformColor("systemMint").alpha(0.5)— but the types were less sensible and chaining wouldn't work.PlatformColor("systemMint", {alpha: 0.5})— Perform type check internally to disable color fallback behavior.PlatformColor("systemMint").withAlpha(0.5)— more robust but more sensible to add types for sincePlatformColor('...').alpha(1).alpha(1)won't work.Open to ideas for how we might implement alpha/prominence/content headroom on Android. It appears that if we modify the alpha factor then the color will no longer be dynamic/adaptive to system themes.
Changelog:
[IOS] [ADDED] - Added support for alpha, prominence, and contentHeadroom for Apple PlatformColors.
[ANDROID] [ADDED] - Added support for
alphaPlatformColor on Android.Test Plan: