Skip to content

Conversation

@EvanBacon
Copy link
Contributor

@EvanBacon EvanBacon commented Jan 1, 2026

Summary:

In Expo, we encourage the use of PlatformColor since 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.

Screenshot 2026-01-01 at 10 28 33 AM

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:

<View style={{ backgroundColor: PlatformColor({ name: 'systemGreen', prominence: "tertiary" }) }}>
  <Text style={{ color: PlatformColor('systemGreen') }}>
    Action
  </Text>
</View>

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 as text-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:

  • Tried a builder pattern 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 since PlatformColor('...').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 alpha PlatformColor on Android.

Test Plan:

  • Updated RNTester

Introduces an optional alpha (opacity) parameter to PlatformColorIOS, allowing developers to specify opacity for semantic and dynamic platform colors on iOS. Updates type definitions, JavaScript, and native iOS implementations to support and propagate the alpha value, and exposes the new API in the public interface.
Introduces a 'prominence' option to PlatformColorIOS and related types, enabling developers to specify color prominence levels ('primary', 'secondary', 'tertiary', 'quaternary') on iOS 18+. Updates type definitions, color normalization, and native code to handle the new property, and adds test cases to the PlatformColorExample. This allows more granular control over color appearance in supported iOS versions.
@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 1, 2026
@facebook-github-bot facebook-github-bot added p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Jan 1, 2026
Replaces the builder proxy pattern for PlatformColor with a simpler API that accepts either a string or an options object, supporting modifiers like alpha, prominence, and contentHeadroom directly. Updates iOS and Android implementations, type exports, and rn-tester examples to use the new object-based API, and adds examples for combined and mixed modifier usage.
This update enables the use of the alpha modifier for PlatformColor on Android by normalizing color specs to include alpha and updating the native bridge to apply alpha values. The rn-tester example is updated to demonstrate alpha usage on both iOS and Android, and documentation is clarified to reflect cross-platform support.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants