Implement outline properties on view

[acoates-ms]

Description

Implement outlineOffset, outlineColor outlineStyle and outlineWidth.

Type of Change

• New feature (non-breaking change which adds functionality)

Microsoft Reviewers: Open in CodeFlow

[github-actions]

Performance Test Results

Branch: viewoutline
Commit: 7787954b
Time: 2026-04-30T17:30:11.959Z
Tests: 159/161 passed

❌ Regressions Detected

SectionList

Scenario	Baseline	Current	Change	Status
SectionList with-3-sections-15-items	5.70ms	8.50ms	+63.6%	❌

SectionList with-3-sections-15-items: Duration increased by 63.6% / +3.50ms (threshold: 10% & 3ms)

Pressable

Scenario	Baseline	Current	Change	Status
Pressable multiple-50	14.33ms	23.33ms	+50.0%	❌

Pressable multiple-50: Duration increased by 50.0% / +7.00ms (threshold: 15% & 5ms)

✅ Passed

136 scenario(s) across 26 suite(s) — no regressions

FlatList

Scenario	Mean	Median	StdDev	Renders	vs Baseline
FlatList mount	4.80ms	4.00ms	±1.99ms	1	+0.0%
FlatList unmount	0.10ms	0.00ms	±0.32ms	0	+0.0%
FlatList rerender	9.60ms	9.50ms	±1.26ms	2	+5.6%
FlatList with-10-items	4.90ms	5.00ms	±0.99ms	1	+25.0%
FlatList with-100-items	5.40ms	5.00ms	±1.65ms	1	+0.0%
FlatList with-500-items	5.10ms	4.00ms	±1.85ms	1	+0.0%
FlatList with-1000-items	5.10ms	5.00ms	±1.37ms	1	+25.0%
FlatList horizontal	4.00ms	4.00ms	±1.15ms	1	-20.0%
FlatList with-separator	2.40ms	2.00ms	±1.26ms	1	+0.0%
FlatList with-header-footer	2.00ms	2.00ms	±0.67ms	1	+0.0%
FlatList with-empty-list	0.30ms	0.00ms	±0.48ms	1	-100.0%
FlatList with-get-item-layout	1.60ms	1.50ms	±0.70ms	1	+50.0%
FlatList inverted	1.50ms	1.50ms	±0.53ms	1	+0.0%
FlatList with-num-columns	2.20ms	2.00ms	±0.63ms	1	-33.3%

TouchableOpacity

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableOpacity mount	0.80ms	1.00ms	±0.42ms	1	+0.0%
TouchableOpacity unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
TouchableOpacity rerender	1.00ms	1.00ms	±0.47ms	2	+0.0%
TouchableOpacity custom-active-opacity	0.70ms	1.00ms	±0.48ms	1	+0.0%
TouchableOpacity disabled	0.70ms	1.00ms	±0.48ms	1	+0.0%
TouchableOpacity with-all-handlers	0.70ms	1.00ms	±0.48ms	1	+0.0%
TouchableOpacity with-hit-slop	0.90ms	1.00ms	±0.57ms	1	+0.0%
TouchableOpacity with-delay	0.90ms	1.00ms	±0.57ms	1	+0.0%
TouchableOpacity nested	1.50ms	1.50ms	±0.53ms	1	+50.0%
TouchableOpacity multiple-10	6.87ms	6.00ms	±2.85ms	1	+0.0%
TouchableOpacity multiple-50	28.47ms	28.00ms	±6.12ms	1	-3.4%
TouchableOpacity multiple-100	37.27ms	40.00ms	±9.29ms	1	-20.0%

ScrollView

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ScrollView mount	0.40ms	0.00ms	±0.52ms	1	+0.0%
ScrollView unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
ScrollView rerender	0.50ms	0.50ms	±0.53ms	2	-50.0%
ScrollView children-20	3.27ms	3.00ms	±0.70ms	1	-25.0%
ScrollView children-100	19.13ms	17.00ms	±6.07ms	1	+6.3%
ScrollView horizontal	3.50ms	3.00ms	±1.27ms	1	-25.0%
ScrollView sticky-headers	2.70ms	3.00ms	±0.82ms	1	+0.0%
ScrollView scroll-indicators	1.20ms	1.00ms	±1.40ms	1	+0.0%
ScrollView nested	1.60ms	1.00ms	±0.97ms	1	+0.0%
ScrollView content-container-style	1.00ms	1.00ms	±0.00ms	1	+0.0%
ScrollView children-500	24.13ms	24.00ms	±5.84ms	1	+26.3%

TouchableHighlight

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableHighlight mount	0.50ms	0.50ms	±0.53ms	1	+0.0%
TouchableHighlight unmount	0.20ms	0.00ms	±0.42ms	0	+0.0%
TouchableHighlight rerender	0.40ms	0.00ms	±0.52ms	2	-100.0%
TouchableHighlight custom-underlay-color	0.60ms	1.00ms	±0.52ms	1	+Infinity%
TouchableHighlight custom-active-opacity	0.40ms	0.00ms	±0.52ms	1	+0.0%
TouchableHighlight disabled	0.40ms	0.00ms	±0.52ms	1	+0.0%
TouchableHighlight with-all-handlers	0.30ms	0.00ms	±0.48ms	1	+0.0%
TouchableHighlight with-hit-slop	0.20ms	0.00ms	±0.42ms	1	+0.0%
TouchableHighlight nested-touchables	1.00ms	1.00ms	±0.00ms	1	+0.0%
TouchableHighlight multiple-touchables-10	2.40ms	2.00ms	±0.52ms	1	-33.3%
TouchableHighlight multiple-touchables-50	16.10ms	15.00ms	±3.93ms	1	+20.0%
TouchableHighlight multiple-touchables-100	24.30ms	24.00ms	±5.12ms	1	+6.7%

Modal

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Modal mount	0.60ms	0.00ms	±1.26ms	1	+0.0%
Modal unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Modal rerender	0.40ms	0.00ms	±0.52ms	2	+0.0%
Modal slide-animation	0.30ms	0.00ms	±0.48ms	1	+0.0%
Modal fade-animation	0.30ms	0.00ms	±0.48ms	1	+0.0%
Modal transparent	0.10ms	0.00ms	±0.32ms	1	+0.0%
Modal with-callbacks	0.30ms	0.00ms	±0.48ms	1	+0.0%
Modal rich-content	1.60ms	1.50ms	±0.70ms	1	-25.0%
Modal with-accessibility	0.40ms	0.00ms	±0.52ms	1	+0.0%

Image

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Image mount	0.20ms	0.00ms	±0.42ms	1	+0.0%
Image unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Image rerender	0.20ms	0.00ms	±0.42ms	2	+0.0%
Image with-resize-mode	0.20ms	0.00ms	±0.42ms	1	+0.0%
Image with-border-radius	0.10ms	0.00ms	±0.32ms	1	+0.0%
Image with-tint-color	0.10ms	0.00ms	±0.32ms	1	+0.0%
Image with-blur-radius	0.20ms	0.00ms	±0.42ms	1	+0.0%
Image with-accessibility	0.20ms	0.00ms	±0.42ms	1	+0.0%
Image multiple-10	0.80ms	1.00ms	±0.41ms	1	+0.0%
Image multiple-50	3.40ms	3.00ms	±1.12ms	1	+0.0%
Image multiple-100	7.73ms	7.00ms	±1.67ms	1	-12.5%

ActivityIndicator

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ActivityIndicator mount	0.20ms	0.00ms	±0.42ms	1	+0.0%
ActivityIndicator unmount	0.10ms	0.00ms	±0.32ms	0	+0.0%
ActivityIndicator rerender	0.20ms	0.00ms	±0.42ms	2	+0.0%
ActivityIndicator size-large	0.10ms	0.00ms	±0.32ms	1	+0.0%
ActivityIndicator size-small	0.10ms	0.00ms	±0.32ms	1	+0.0%
ActivityIndicator with-color	0.10ms	0.00ms	±0.32ms	1	+0.0%
ActivityIndicator not-animating	0.10ms	0.00ms	±0.32ms	1	+0.0%
ActivityIndicator with-accessibility	0.20ms	0.00ms	±0.42ms	1	+0.0%
ActivityIndicator multiple-10	0.87ms	1.00ms	±0.35ms	1	+0.0%
ActivityIndicator multiple-50	3.80ms	4.00ms	±1.26ms	1	+0.0%
ActivityIndicator multiple-100	8.47ms	8.00ms	±2.36ms	1	+14.3%

Switch

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Switch mount	0.20ms	0.00ms	±0.42ms	1	+0.0%
Switch unmount	0.10ms	0.00ms	±0.32ms	0	+0.0%
Switch rerender	0.30ms	0.00ms	±0.48ms	2	-100.0%
Switch value-true	0.30ms	0.00ms	±0.48ms	1	+0.0%
Switch disabled	0.30ms	0.00ms	±0.48ms	1	+0.0%
Switch custom-colors	0.10ms	0.00ms	±0.32ms	1	+0.0%
Switch on-value-change	0.20ms	0.00ms	±0.42ms	1	+0.0%
Switch with-accessibility	0.20ms	0.00ms	±0.42ms	1	+0.0%
Switch multiple-10	1.40ms	1.00ms	±0.51ms	1	-50.0%
Switch multiple-50	8.73ms	7.00ms	±3.22ms	1	-22.2%
Switch multiple-100	18.40ms	18.00ms	±4.81ms	1	+12.5%

Button

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Button mount	0.50ms	0.50ms	±0.53ms	1	-50.0%
Button unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Button rerender	1.50ms	1.00ms	±1.58ms	2	+0.0%
Button disabled	0.50ms	0.50ms	±0.53ms	1	-50.0%
Button with-color	0.50ms	0.50ms	±0.53ms	1	+0.0%
Button with-accessibility	0.50ms	0.50ms	±0.53ms	1	-50.0%
Button multiple-10	5.60ms	5.00ms	±1.35ms	1	-16.7%
Button multiple-50	20.27ms	24.00ms	±8.57ms	1	-11.1%
Button multiple-100	16.00ms	14.00ms	±4.12ms	1	-26.3%

TextInput

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TextInput mount	0.10ms	0.00ms	±0.32ms	1	+0.0%
TextInput unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
TextInput rerender	0.40ms	0.00ms	±0.52ms	2	+0.0%
TextInput multiline	0.20ms	0.00ms	±0.42ms	1	+0.0%
TextInput with-value	0.10ms	0.00ms	±0.32ms	1	+0.0%
TextInput styled	0.20ms	0.00ms	±0.42ms	1	+0.0%
TextInput multiple-100	7.80ms	7.00ms	±2.14ms	1	+0.0%

View

Scenario	Mean	Median	StdDev	Renders	vs Baseline
View mount	0.00ms	0.00ms	±0.00ms	1	+0.0%
View unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
View rerender	0.20ms	0.00ms	±0.42ms	2	+0.0%
View nested-50	4.07ms	4.00ms	±1.33ms	1	+33.3%
View nested-100	8.47ms	7.00ms	±2.53ms	1	+0.0%
View shadow	0.10ms	0.00ms	±0.32ms	1	+0.0%
View border-radius	0.20ms	0.00ms	±0.42ms	1	+0.0%
View nested-500	18.53ms	13.00ms	±13.27ms	1	+30.0%

Text

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Text mount	0.20ms	0.00ms	±0.42ms	1	+0.0%
Text unmount	0.10ms	0.00ms	±0.32ms	0	+0.0%
Text rerender	0.30ms	0.00ms	±0.48ms	2	+0.0%
Text long-1000	0.20ms	0.00ms	±0.42ms	1	+0.0%
Text nested	0.00ms	0.00ms	±0.00ms	1	+0.0%
Text styled	0.20ms	0.00ms	±0.42ms	1	+0.0%
Text multiple-100	7.87ms	7.00ms	±1.60ms	1	+0.0%

SectionList.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
SectionList native mount	4.69ms	4.77ms	±0.46ms	1	-26.7%

FlatList.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
FlatList native mount	4.51ms	4.24ms	±1.00ms	1	-54.1%

TouchableHighlight.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableHighlight native mount	1.47ms	1.44ms	±0.18ms	1	-31.0%

TouchableOpacity.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableOpacity native mount	1.79ms	1.66ms	±0.35ms	1	-47.1%

Pressable.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Pressable native mount	1.55ms	1.48ms	±0.22ms	1	-40.9%

ScrollView.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ScrollView native mount	3.23ms	3.11ms	±0.40ms	1	-23.2%

ActivityIndicator.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ActivityIndicator native mount	1.29ms	1.28ms	±0.10ms	1	-48.3%

TextInput.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TextInput native mount	2.19ms	2.21ms	±0.19ms	1	-45.9%

Switch.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Switch native mount	1.21ms	1.16ms	±0.17ms	1	-33.1%

Button.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Button native mount	1.84ms	1.78ms	±0.18ms	1	-31.8%

Image.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Image native mount	1.59ms	1.50ms	±0.23ms	1	-33.8%

Modal.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Modal native mount	0.98ms	0.95ms	±0.12ms	1	-22.2%

View.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
View native mount	1.05ms	1.03ms	±0.16ms	1	-27.6%

Text.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Text native mount	1.30ms	1.29ms	±0.09ms	1	-25.6%