[neutronm]

Summary:

Fixes #57841.

outlineStyle: 'dotted' and 'dashed' render as solid on iOS. Android renders all three correctly, and the documented API lists all three values with no platform caveat.

Root cause

-[RCTViewComponentView invalidateLayer] draws the outline through one of two paths:

• Core Animation — sets _outlineLayer.borderWidth / .borderColor. Cheap, but CALayer can only stroke a solid border.
• Core Graphics — RCTAddContourEffectToLayer, which forwards outlineStyle to RCTGetBorderImage and does honour dotted/dashed.

The branch choosing between them only looked at the border radii:

if (areBorderRadiiCircular(borderMetrics.borderRadii) && borderMetrics.borderRadii.topLeft.horizontal == 0) {

Every view without a border radius therefore took the Core Animation path, and its outlineStyle was silently dropped. Rounded views fell through to Core Graphics — which is why a dotted or dashed outline starts working as soon as a borderRadius is set.

The equivalent branch for borders, ~80 lines above, already gets this right: useCoreAnimationBorderRendering includes borderMetrics.borderStyles.left == BorderStyle::Solid, so a non-solid border falls through to Core Graphics. The outline branch never got the matching check when outline was implemented in #46444.

Fix

Add the missing outlineStyle == OutlineStyle::Solid term, so non-solid outlines fall through to Core Graphics exactly as non-solid borders already do. Solid outlines keep the cheaper Core Animation path, so there is no cost for the common case.

Why it went unnoticed

The only RNTester examples using outlineStyle: 'dotted' / 'dashed' also set a borderRadius, so they only ever exercised the working path. This PR adds the square-cornered cases next to them, labelled, so all six combinations of {square, rounded} × {solid, dashed, dotted} are visible at once.

Note on #57837

#57837 (open) rewrites the two UIColor *outlineColor = ... lines in this same block to resolve
dynamic colors against the trait collection. This change deliberately leaves those two lines
untouched — it only adds a term to the surrounding if — so the two patches touch disjoint lines
and should merge without conflict in either order.

Changelog:

[IOS] [FIXED] - Render outlineStyle: 'dotted' and 'dashed' on views without border radii

Test Plan:

Manual verification

RNTester → Components → View → Outline, iPhone 17 Pro Simulator (iOS 26.1), New Architecture, built from source (RCT_USE_PREBUILT_RNCORE=0).

Before	After
square dashed and square dotted render solid	all six render correctly

The rounded cases and every pre-existing example in the Outline screen are pixel-identical before and after; only the two square non-solid outlines change.

Automated

Command	Result
yarn jest	222/223 suites, 5713 tests pass
yarn flow-check	Found 0 errors
yarn lint (eslint --max-warnings 0 .)	clean
node ./scripts/clang-format.js <changed .mm files>	no changes
yarn build-types --validate	PASS API snapshot is up to date.
tsc -p packages/react-native/__typetests__/tsconfig.json	clean
yarn test-ios (RNTesterUnitTests)	** TEST SUCCEEDED ** — 167 tests, 16 skipped, 0 failures

The one Jest suite that did not pass in the full run (GenerateComponentDescriptorH-test.js) was a worker SIGSEGV, not an assertion failure; it passes 18/18 when run on its own.

Unit tests

React/Tests/Mounting/RCTViewComponentViewTests.mm gains two cases next to the existing ones:

• testSquareSolidOutlineUsesCoreAnimationBorder — a square solid outline still uses CALayer.borderWidth (the fast path is not regressed).
• testSquareDottedAndDashedOutlinesAreDrawnWithCoreGraphics — square dotted and dashed outlines are drawn into layer.contents with borderWidth == 0.

React/Tests/** is excluded from the React-Core podspec, so these are not built by the OSS RNTesterUnitTests target. They were verified to compile against the installed pod headers with clang -fsyntax-only -x objective-c++ -std=c++20.

[meta-cla]

Hi @neutronm!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[meta-codesync]

@javache has imported this pull request. If you are a Meta employee, you can view this in D116779403.

[meta-codesync]

@javache merged this pull request in 9f31d5a.