Start fixing playground composition

[vmoroz]

Description

Type of Change

• Bug fix

Why

Fix regressions introduced by PR #15979 ("Use fork-sync for Folly and FastFloat") that broke the playground-composition solution build and yarn start for the playground package.

What

1. Remove duplicate Folly.natvis entry from Microsoft.ReactNative.vcxproj

PR #15979 added Folly.natvis to vnext/external/folly/folly.vcxitems, but Microsoft.ReactNative.vcxproj already had a direct <Natvis> reference to the same file. MSBuild rejects duplicate project items, so the project failed to load entirely:

Cannot load project with duplicated project items: Folly.natvis is included as 'Natvis' and as 'Natvis' item types.

Fix: removed the now-redundant <Natvis Include="$(ExternalDir)folly\Folly.natvis" /> from Microsoft.ReactNative.vcxproj.

2. Fix build order in playground-composition.sln

SampleCustomComponent processes DrawingIsland.idl which imports Microsoft.ReactNative.winmd. Because SampleCustomComponent had no declared dependency on Microsoft.ReactNative, Visual Studio could start building SampleCustomComponent in parallel with (and before) Microsoft.ReactNative, causing the MIDL error:

midlrt : error MIDL1001: cannot open input file Microsoft.ReactNative.winmd. HRESULT 0x80070002.

Fix: added ProjectDependencies section to the SampleCustomComponent project entry in playground-composition.sln, declaring a dependency on Microsoft.ReactNative.

3. Fix yarn start for the playground package

The start and windows scripts used npx @react-native-community/cli <cmd>, which invokes npm 11's arborist to scan the workspace tree. npm 11 crashes with Cannot read properties of null (reading 'package') when it encounters the Yarn 4-managed node_modules structure.

Fix: replaced npx @react-native-community/cli with the react-native binary directly, which is provided by @react-native-community/cli (already a devDependency) and is available on PATH when run via yarn without going through npm's arborist.

Screenshots

N/A

Testing

• Built packages/playground/windows/playground-composition.sln (Debug|x64) successfully.
• yarn start from packages/playground launches the Metro bundler without errors.

Note: the RNTester bundle fails to load in the playground app — this is a pre-existing condition unrelated to this PR.

Changelog

Should this change be included in the release notes: no

Microsoft Reviewers: Open in CodeFlow

[github-actions]

Performance Test Results

Branch: PR/start-fixing-playground-composition
Commit: 1f841e53
Time: 2026-04-11T00:00:38.691Z
Tests: 161/161 passed

✅ Passed

161 scenario(s) across 28 suite(s) — no regressions

SectionList

Scenario	Mean	Median	StdDev	Renders	vs Baseline
SectionList mount	4.40ms	4.00ms	±1.43ms	1	-20.0%
SectionList unmount	0.20ms	0.00ms	±0.42ms	0	+0.0%
SectionList rerender	11.20ms	10.50ms	±3.77ms	2	+0.0%
SectionList with-3-sections-15-items	5.50ms	5.50ms	±1.58ms	1	+0.0%
SectionList with-5-sections-50-items	5.90ms	5.00ms	±2.23ms	1	-16.7%
SectionList with-10-sections-200-items	5.80ms	6.00ms	±1.32ms	1	+9.1%
SectionList with-20-sections-200-items	5.10ms	4.50ms	±1.85ms	1	-10.0%
SectionList with-section-separator	2.10ms	2.00ms	±0.32ms	1	+0.0%
SectionList with-item-separator	2.20ms	2.00ms	±0.92ms	1	+0.0%
SectionList with-header-footer	2.20ms	2.00ms	±0.92ms	1	+0.0%
SectionList with-section-footer	3.10ms	2.50ms	±2.88ms	1	+25.0%
SectionList with-sticky-section-headers	1.70ms	1.50ms	±0.95ms	1	-25.0%
SectionList with-empty-list	0.40ms	0.00ms	±0.52ms	1	-100.0%
SectionList with-50-sections-1000-items	2.40ms	2.00ms	±1.71ms	1	+0.0%

FlatList

Scenario	Mean	Median	StdDev	Renders	vs Baseline
FlatList mount	4.20ms	4.00ms	±1.03ms	1	+0.0%
FlatList unmount	0.10ms	0.00ms	±0.32ms	0	+0.0%
FlatList rerender	9.70ms	9.50ms	±2.00ms	2	+5.6%
FlatList with-10-items	4.60ms	4.50ms	±0.97ms	1	+12.5%
FlatList with-100-items	4.70ms	4.00ms	±1.25ms	1	-20.0%
FlatList with-500-items	5.50ms	4.00ms	±2.12ms	1	+0.0%
FlatList with-1000-items	4.20ms	4.00ms	±0.92ms	1	+0.0%
FlatList horizontal	4.90ms	4.00ms	±1.29ms	1	-20.0%
FlatList with-separator	1.70ms	2.00ms	±0.67ms	1	+0.0%
FlatList with-header-footer	1.60ms	1.50ms	±0.70ms	1	-25.0%
FlatList with-empty-list	0.40ms	0.00ms	±0.52ms	1	-100.0%
FlatList with-get-item-layout	2.50ms	2.00ms	±2.01ms	1	+100.0%
FlatList inverted	2.00ms	2.00ms	±0.47ms	1	+33.3%
FlatList with-num-columns	3.70ms	3.00ms	±2.31ms	1	+0.0%

TouchableOpacity

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableOpacity mount	0.70ms	1.00ms	±0.48ms	1	+0.0%
TouchableOpacity unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
TouchableOpacity rerender	1.40ms	1.00ms	±0.84ms	2	+0.0%
TouchableOpacity custom-active-opacity	0.50ms	0.50ms	±0.53ms	1	-50.0%
TouchableOpacity disabled	0.70ms	1.00ms	±0.48ms	1	+0.0%
TouchableOpacity with-all-handlers	0.60ms	1.00ms	±0.52ms	1	+0.0%
TouchableOpacity with-hit-slop	0.80ms	1.00ms	±0.63ms	1	+0.0%
TouchableOpacity with-delay	0.60ms	1.00ms	±0.52ms	1	+0.0%
TouchableOpacity nested	1.60ms	2.00ms	±0.52ms	1	+100.0%
TouchableOpacity multiple-10	6.20ms	6.00ms	±2.11ms	1	+0.0%
TouchableOpacity multiple-50	27.27ms	26.00ms	±5.36ms	1	-10.3%
TouchableOpacity multiple-100	35.60ms	40.00ms	±12.21ms	1	-20.0%

ScrollView

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ScrollView mount	0.30ms	0.00ms	±0.48ms	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.40ms	3.00ms	±1.92ms	1	-25.0%
ScrollView children-100	21.07ms	20.00ms	±8.21ms	1	+25.0%
ScrollView horizontal	3.50ms	3.00ms	±0.97ms	1	-25.0%
ScrollView sticky-headers	2.90ms	3.00ms	±1.66ms	1	+0.0%
ScrollView scroll-indicators	0.80ms	1.00ms	±0.42ms	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	21.53ms	20.00ms	±5.62ms	1	+5.3%

TouchableHighlight

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableHighlight mount	0.50ms	0.50ms	±0.53ms	1	+0.0%
TouchableHighlight unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
TouchableHighlight rerender	0.70ms	1.00ms	±0.48ms	2	+0.0%
TouchableHighlight custom-underlay-color	0.50ms	0.50ms	±0.53ms	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.30ms	0.00ms	±0.48ms	1	+0.0%
TouchableHighlight nested-touchables	0.80ms	1.00ms	±0.42ms	1	+0.0%
TouchableHighlight multiple-touchables-10	2.70ms	2.00ms	±1.89ms	1	-33.3%
TouchableHighlight multiple-touchables-50	12.70ms	12.00ms	±2.21ms	1	-4.0%
TouchableHighlight multiple-touchables-100	23.10ms	22.00ms	±3.96ms	1	-2.2%

Pressable

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Pressable mount	0.40ms	0.00ms	±0.52ms	1	+0.0%
Pressable unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Pressable rerender	0.30ms	0.00ms	±0.48ms	2	-100.0%
Pressable with-all-handlers	0.30ms	0.00ms	±0.48ms	1	+0.0%
Pressable with-style-function	0.10ms	0.00ms	±0.32ms	1	+0.0%
Pressable disabled	0.40ms	0.00ms	±0.52ms	1	+0.0%
Pressable with-hit-slop	0.30ms	0.00ms	±0.48ms	1	+0.0%
Pressable nested	0.90ms	0.50ms	±1.52ms	1	-50.0%
Pressable multiple-10	2.53ms	3.00ms	±0.52ms	1	+0.0%
Pressable multiple-50	14.87ms	14.00ms	±3.16ms	1	+0.0%
Pressable multiple-100	16.27ms	13.00ms	±9.72ms	1	+8.3%

Modal

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Modal mount	0.30ms	0.00ms	±0.48ms	1	+0.0%
Modal unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Modal rerender	0.50ms	0.50ms	±0.53ms	2	+Infinity%
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.30ms	0.00ms	±0.48ms	1	+0.0%
Modal with-callbacks	0.20ms	0.00ms	±0.42ms	1	+0.0%
Modal rich-content	1.60ms	1.50ms	±0.70ms	1	-25.0%
Modal with-accessibility	0.30ms	0.00ms	±0.48ms	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.10ms	0.00ms	±0.32ms	2	+0.0%
Image with-resize-mode	0.10ms	0.00ms	±0.32ms	1	+0.0%
Image with-border-radius	0.00ms	0.00ms	±0.00ms	1	+0.0%
Image with-tint-color	0.10ms	0.00ms	±0.32ms	1	+0.0%
Image with-blur-radius	0.10ms	0.00ms	±0.32ms	1	+0.0%
Image with-accessibility	0.10ms	0.00ms	±0.32ms	1	+0.0%
Image multiple-10	1.27ms	1.00ms	±1.33ms	1	+0.0%
Image multiple-50	3.20ms	3.00ms	±0.56ms	1	+0.0%
Image multiple-100	7.73ms	7.00ms	±2.02ms	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.00ms	0.00ms	±0.00ms	0	+0.0%
ActivityIndicator rerender	0.70ms	0.00ms	±1.57ms	2	+0.0%
ActivityIndicator size-large	0.10ms	0.00ms	±0.32ms	1	+0.0%
ActivityIndicator size-small	0.20ms	0.00ms	±0.42ms	1	+0.0%
ActivityIndicator with-color	0.20ms	0.00ms	±0.42ms	1	+0.0%
ActivityIndicator not-animating	0.20ms	0.00ms	±0.42ms	1	+0.0%
ActivityIndicator with-accessibility	0.20ms	0.00ms	±0.42ms	1	+0.0%
ActivityIndicator multiple-10	0.80ms	1.00ms	±0.41ms	1	+0.0%
ActivityIndicator multiple-50	3.73ms	4.00ms	±0.80ms	1	+0.0%
ActivityIndicator multiple-100	8.13ms	8.00ms	±1.81ms	1	+14.3%

Switch

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Switch mount	0.30ms	0.00ms	±0.48ms	1	+0.0%
Switch unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
Switch rerender	0.30ms	0.00ms	±0.48ms	2	-100.0%
Switch value-true	0.40ms	0.00ms	±0.52ms	1	+0.0%
Switch disabled	0.40ms	0.00ms	±0.52ms	1	+0.0%
Switch custom-colors	0.40ms	0.00ms	±0.52ms	1	+0.0%
Switch on-value-change	0.00ms	0.00ms	±0.00ms	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.93ms	7.00ms	±3.53ms	1	-22.2%
Switch multiple-100	19.07ms	20.00ms	±4.42ms	1	+25.0%

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.00ms	1.00ms	±0.00ms	2	+0.0%
Button disabled	0.60ms	1.00ms	±0.52ms	1	+0.0%
Button with-color	0.60ms	1.00ms	±0.52ms	1	+100.0%
Button with-accessibility	0.60ms	1.00ms	±0.52ms	1	+0.0%
Button multiple-10	5.93ms	5.00ms	±1.22ms	1	-16.7%
Button multiple-50	22.60ms	23.00ms	±9.26ms	1	-14.8%
Button multiple-100	17.67ms	17.00ms	±4.69ms	1	-10.5%

TextInput

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TextInput mount	0.00ms	0.00ms	±0.00ms	1	+0.0%
TextInput unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
TextInput rerender	0.50ms	0.50ms	±0.53ms	2	+Infinity%
TextInput multiline	0.10ms	0.00ms	±0.32ms	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.27ms	6.00ms	±2.25ms	1	-14.3%

View

Scenario	Mean	Median	StdDev	Renders	vs Baseline
View mount	0.10ms	0.00ms	±0.32ms	1	+0.0%
View unmount	0.00ms	0.00ms	±0.00ms	0	+0.0%
View rerender	0.00ms	0.00ms	±0.00ms	2	+0.0%
View nested-50	4.27ms	4.00ms	±2.19ms	1	+33.3%
View nested-100	8.07ms	7.00ms	±1.75ms	1	+0.0%
View shadow	0.00ms	0.00ms	±0.00ms	1	+0.0%
View border-radius	0.30ms	0.00ms	±0.48ms	1	+0.0%
View nested-500	18.20ms	14.00ms	±11.67ms	1	+40.0%

Text

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

SectionList.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
SectionList native mount	6.40ms	6.05ms	±1.30ms	1	-6.9%

FlatList.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
FlatList native mount	6.10ms	6.23ms	±0.83ms	1	-32.5%

TouchableHighlight.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableHighlight native mount	1.83ms	1.81ms	±0.13ms	1	-13.2%

TouchableOpacity.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TouchableOpacity native mount	2.45ms	2.15ms	±0.85ms	1	-31.4%

Pressable.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Pressable native mount	2.09ms	2.00ms	±0.31ms	1	-20.3%

ScrollView.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ScrollView native mount	4.06ms	4.08ms	±0.29ms	1	+0.8%

ActivityIndicator.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
ActivityIndicator native mount	1.64ms	1.58ms	±0.19ms	1	-36.4%

TextInput.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
TextInput native mount	2.50ms	2.43ms	±0.29ms	1	-40.4%

Switch.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Switch native mount	1.81ms	1.52ms	±1.17ms	1	-12.2%

Button.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Button native mount	2.29ms	2.29ms	±0.33ms	1	-12.1%

Modal.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Modal native mount	1.34ms	1.19ms	±0.34ms	1	-1.9%

Image.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Image native mount	1.87ms	1.79ms	±0.23ms	1	-20.8%

View.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
View native mount	1.58ms	1.33ms	±0.84ms	1	-7.2%

Text.native-perf-test.ts

Scenario	Mean	Median	StdDev	Renders	vs Baseline
Text native mount	1.55ms	1.53ms	±0.15ms	1	-11.8%