Skip to content

Reproducer for #57836: Fabric dynamic border/outline colors resolve against the system appearance - #57838

Closed
JacquesLeupin wants to merge 1 commit into
react:mainfrom
JacquesLeupin:repro/fabric-border-trait-collection-57836
Closed

Reproducer for #57836: Fabric dynamic border/outline colors resolve against the system appearance#57838
JacquesLeupin wants to merge 1 commit into
react:mainfrom
JacquesLeupin:repro/fabric-border-trait-collection-57836

Conversation

@JacquesLeupin

Copy link
Copy Markdown

Summary

Runnable reproducer for #57836 — on Fabric, borderColor/outlineColor set from a dynamic color (PlatformColor / DynamicColorIOS) resolve against the system appearance and ignore overrideUserInterfaceStyle. Edits only RNTesterPlayground.js; not intended to be merged.

How to run

  1. Set the iOS Simulator's System Appearance to Light.
  2. Run RNTester on iOS (New Architecture) and open the Playground example.
  3. The demo forces the app dark via Appearance.setColorScheme('dark') at 2s and mounts a second row of boxes at 4s; a button resets to the system scheme and re-runs.

One DynamicColorIOS({light: red, dark: green}) feeds every fill and border; the two bordered boxes cover both border code paths (border-image, and CoreAnimation layer.borderColor via overflow: 'hidden').

Expected: once useColorScheme() reports dark, every fill and border is green.

Actual: fills turn green, but row A's borders (mounted before the override) stay red — the light variant — on both border paths, and persist indefinitely. Freshly-created views in row B can heal via the attach-time trait change; recycled views in real apps reattach with unchanged traits and stick like row A.

Fix proposed in #57837.

Changelog

[INTERNAL] - Reproducer for #57836, not for merge

@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 Aug 5, 2026
@JacquesLeupin

Copy link
Copy Markdown
Author

Moving the reproducer to a fork branch per our workflow — runnable single-file reproducer lives at https://github.com/JacquesLeupin/react-native/tree/repro/fabric-border-trait-collection-57836 (diff: main...JacquesLeupin:react-native:repro/fabric-border-trait-collection-57836), linked from #57836.

@github-actions

github-actions Bot commented Aug 5, 2026

Copy link
Copy Markdown

Warning

Missing Test Plan

Please add a "## Test Plan" section to your PR description. A Test Plan lets us know how these changes were tested.

Caution

Missing Changelog

Please add a Changelog to your PR description. See Changelog format

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.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant