Xaml NativeComponent added to Sample Fabric

change/react-native-windows-c93ed00c-bbe5-46ff-b2a7-cacfd804e375.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Picker Xaml NativeComponent added to Sample Fabric",
+  "packageName": "react-native-windows",
+  "email": "66076509+vineethkuttan@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/sample-app-fabric/App.tsx

@@ -5,20 +5,52 @@
  * @format
  */
 
-import React from 'react';
-import {SafeAreaView, StatusBar, useColorScheme} from 'react-native';
+import React, {useState} from 'react';
+import {
+  SafeAreaView,
+  StatusBar,
+  useColorScheme,
+  Text,
+  View,
+} from 'react-native';
 import {NewAppScreen} from '@react-native/new-app-screen';
+import {PickerXaml} from 'sample-custom-component';
+
+const pickerItems = [
+  {label: 'JavaScript', value: 'js'},
+  {label: 'TypeScript', value: 'ts'},
+  {label: 'Python', value: 'py'},
+  {label: 'C++', value: 'cpp'},
+  {label: 'Rust', value: 'rs'},
+];
 
 function App(): React.JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
+  const [selectedIndex, setSelectedIndex] = useState(3); // Default to C++
+
+  const backgroundColor = isDarkMode ? '#1a1a1a' : '#f5f5f5';
+  const textColor = isDarkMode ? '#ffffff' : '#000000';
 
   return (
-    <SafeAreaView style={{flex: 1}}>
+    <SafeAreaView style={{flex: 1, backgroundColor}}>
       <StatusBar
         barStyle={isDarkMode ? 'light-content' : 'dark-content'}
         backgroundColor="transparent"
         translucent
       />
+      <View style={{padding: 20, backgroundColor, borderRadius: 8, margin: 10}}>
+        <Text style={{fontSize: 16, marginBottom: 10, color: textColor}}>
+          Selected: {pickerItems[selectedIndex]?.label}
+        </Text>
+        <PickerXaml
+          style={{width: 200, height: 40}}
+          items={pickerItems}
+          selectedIndex={selectedIndex}
+          onPickerSelect={event => {
+            setSelectedIndex(event.nativeEvent.itemIndex);
+          }}
+        />
+      </View>
       <NewAppScreen />
     </SafeAreaView>
   );

packages/sample-app-fabric/package.json

@@ -18,7 +18,8 @@
     "@typescript-eslint/parser": "^7.1.1",
     "react": "^19.1.1",
     "react-native": "0.82.0-nightly-20250902-9731e8ebc",
-    "react-native-windows": "^0.0.0-canary.1031"
+    "react-native-windows": "^0.0.0-canary.1031",
+    "sample-custom-component": "0.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

packages/sample-app-fabric/windows/SampleAppFabric.Package/packages.lock.json

@@ -185,6 +185,16 @@
         "type": "Project",
         "dependencies": {
           "Microsoft.JavaScript.Hermes": "[0.0.0-2512.22001-bc3d0ed7, )",
+          "Microsoft.ReactNative": "[1.0.0, )",
+          "Microsoft.VCRTForwarders.140": "[1.0.2-rc, )",
+          "Microsoft.WindowsAppSDK": "[1.8.251106002, )",
+          "SampleCustomComponent": "[1.0.0, )",
+          "boost": "[1.83.0, )"
+        }
+      },
+      "samplecustomcomponent": {
+        "type": "Project",
+        "dependencies": {
           "Microsoft.ReactNative": "[1.0.0, )",
           "Microsoft.VCRTForwarders.140": "[1.0.2-rc, )",
           "Microsoft.WindowsAppSDK": "[1.8.251106002, )",

packages/sample-app-fabric/windows/SampleAppFabric.sln

@@ -33,6 +33,8 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Mso", "..\..\..\vnext\Mso\M
 EndProject
 Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Include", "..\..\..\vnext\include\Include.vcxitems", "{EF074BA1-2D54-4D49-A28E-5E040B47CD2E}"
 EndProject
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "SampleCustomComponent", "..\..\..\node_modules\sample-custom-component\windows\SampleCustomComponent\SampleCustomComponent.vcxproj", "{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}"
+EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
 		..\..\..\vnext\Shared\Shared.vcxitems*{2049dbe9-8d13-42c9-ae4b-413ae38fffd0}*SharedItemsImports = 9
@@ -150,6 +152,18 @@ Global
 		{14B93DC8-FD93-4A6D-81CB-8BC96644501C}.Release|x86.ActiveCfg = Release|Win32
 		{14B93DC8-FD93-4A6D-81CB-8BC96644501C}.Release|x86.Build.0 = Release|Win32
 		{14B93DC8-FD93-4A6D-81CB-8BC96644501C}.Release|x86.Deploy.0 = Release|Win32
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Debug|x64.ActiveCfg = Debug|x64
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Debug|x64.Build.0 = Debug|x64
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Debug|x86.ActiveCfg = Debug|Win32
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Debug|x86.Build.0 = Debug|Win32
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Debug|ARM64.ActiveCfg = Debug|ARM64
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Debug|ARM64.Build.0 = Debug|ARM64
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Release|x64.ActiveCfg = Release|x64
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Release|x64.Build.0 = Release|x64
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Release|x86.ActiveCfg = Release|Win32
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Release|x86.Build.0 = Release|Win32
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Release|ARM64.ActiveCfg = Release|ARM64
+		{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}.Release|ARM64.Build.0 = Release|ARM64
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

packages/sample-app-fabric/windows/SampleAppFabric/AutolinkedNativeModules.g.cpp

@@ -3,12 +3,16 @@
 #include "pch.h"
 #include "AutolinkedNativeModules.g.h"
 
+// Includes from sample-custom-component
+#include <winrt/SampleCustomComponent.h>
+
 namespace winrt::Microsoft::ReactNative
 {
 
 void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::IReactPackageProvider> const& packageProviders)
 { 
-    UNREFERENCED_PARAMETER(packageProviders);
+    // IReactPackageProviders from sample-custom-component
+    packageProviders.Append(winrt::SampleCustomComponent::ReactPackageProvider());
 }
 
 }

packages/sample-app-fabric/windows/SampleAppFabric/AutolinkedNativeModules.g.targets

@@ -2,5 +2,9 @@
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <!-- AutolinkedNativeModules.g.targets contents generated by "npx @react-native-community/cli autolink-windows" -->
   <ItemGroup>
+    <!-- Projects from sample-custom-component -->
+    <ProjectReference Include="$(ProjectDir)..\..\..\..\node_modules\sample-custom-component\windows\SampleCustomComponent\SampleCustomComponent.vcxproj">
+      <Project>{A8DA218C-4CB5-48CB-A9EE-9E6337165D07}</Project>
+    </ProjectReference>
   </ItemGroup>
 </Project>

packages/sample-app-fabric/windows/SampleAppFabric/packages.lock.json

@@ -190,6 +190,15 @@
           "Folly": "[1.0.0, )",
           "boost": "[1.83.0, )"
         }
+      },
+      "samplecustomcomponent": {
+        "type": "Project",
+        "dependencies": {
+          "Microsoft.ReactNative": "[1.0.0, )",
+          "Microsoft.VCRTForwarders.140": "[1.0.2-rc, )",
+          "Microsoft.WindowsAppSDK": "[1.8.251106002, )",
+          "boost": "[1.83.0, )"
+        }
       }
     },
     "native,Version=v0.0/win": {

packages/sample-custom-component/src/PickerXamlNativeComponent.ts

@@ -0,0 +1,43 @@
+import {codegenNativeComponent} from 'react-native';
+import type { ViewProps } from 'react-native';
+import type {
+  Int32,
+  WithDefault,
+  BubblingEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+/**
+ * Represents a single item in the PickerXaml.
+ */
+export type PickerXamlItem = Readonly<{
+  label: string;
+  value?: string;
+}>;
+
+/**
+ * Event payload when the picker selection changes.
+ */
+export type PickerXamlChangeEvent = Readonly<{
+  value: string;
+  itemIndex: Int32;
+  text: string;
+}>;
+
+export interface PickerXamlProps extends ViewProps {
+  /**
+   * Array of picker items to display.
+   */
+  items: ReadonlyArray<PickerXamlItem>;
+
+  /**
+   * The index of the currently selected item.
+   */
+  selectedIndex?: WithDefault<Int32, -1>;
+
+  /**
+   * Callback when selection changes.
+   */
+  onPickerSelect?: BubblingEventHandler<PickerXamlChangeEvent>;
+}
+
+export default codegenNativeComponent<PickerXamlProps>('PickerXaml');

packages/sample-custom-component/src/index.ts

@@ -7,10 +7,13 @@ import CalendarView from './FabricXamlCalendarViewNativeComponent'
 
 import CustomAccessibility from './CustomAccessibilityNativeComponent';
 
+import PickerXaml from './PickerXamlNativeComponent';
+
 export {
     CustomAccessibility,
     DrawingIsland,
     MovingLight,
     MovingLightHandle,
     CalendarView,
+    PickerXaml
 };