React Native for Windows

https://microsoft.github.io/react-native-windows/docs/0.77/
Admin
React Native for Windows enables developers to build native Windows applications using React Native,...
Tokens:90,475
Snippets:656
Trust Score:8.3
Update:11 months ago
Show doc for...
Tokens:
Raw
### Navigate to Project Directory

Source: https://microsoft.github.io/react-native-windows/docs/0.77/getting-started

Changes the current working directory to the newly created React Native project folder, which is required before executing subsequent setup commands.

```bash
cd <projectName>
```

--------------------------------

### Configure GitHub Actions for RNW App CI

Source: https://microsoft.github.io/react-native-windows/docs/0.77/setup-ci

This YAML configuration sets up a GitHub Actions workflow for a React Native for Windows application. It checks out the code, sets up Node.js and MSBuild, installs dependencies, and then builds and runs the Windows x64 release version of the app.

```yaml
name: Windows CIon: [pull_request]

jobs:
  run-windows-tests:
    name: Build & run tests
    runs-on: windows-2022

    steps:
      - uses: actions/checkout@v2
        name: Checkout Code

      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '^18'

      - name: Setup MSBuild
        uses: microsoft/setup-msbuild@v2

      - name: Install node modules
        run: yarn --frozen-lockfile

      - name: Run Windows x64 release
        run: npx react-native run-windows --arch x64 --release --logging
```

--------------------------------

### Install React Native Windows Dependency with NPM

Source: https://microsoft.github.io/react-native-windows/docs/0.77/getting-started

Adds react-native-windows package version 0.77.0 to project dependencies using NPM package manager as an alternative to Yarn for dependency management.

```bash
npm install --save react-native-windows@^0.77.0
```

--------------------------------

### Run React Native Windows Application

Source: https://microsoft.github.io/react-native-windows/docs/0.77/getting-started

Launches the React Native Windows application from the command line without Visual Studio. Opens a new Command Prompt with the React packager and compiles the entire project with dependencies.

```bash
npx react-native run-windows
```

--------------------------------

### Initialize React Native Project with Community CLI

Source: https://microsoft.github.io/react-native-windows/docs/0.77/getting-started

Creates a new React Native project with version 0.77.0 using the React Native Community CLI. This command scaffolds the base project structure in a new directory specified by projectName parameter.

```bash
npx --yes @react-native-community/cli@latest init <projectName> --version ^0.77.0
```

--------------------------------

### Install React Native Windows Dependency with Yarn

Source: https://microsoft.github.io/react-native-windows/docs/0.77/getting-started

Adds react-native-windows package version 0.77.0 to project dependencies using Yarn package manager. Yarn is the recommended approach for managing React Native Windows dependencies.

```bash
yarn add react-native-windows@^0.77.0
```

--------------------------------

### Initialize React Native Windows Native Projects

Source: https://microsoft.github.io/react-native-windows/docs/0.77/getting-started

Executes the init-windows command to scaffold Windows-specific native code and Visual Studio project files. The --overwrite flag ensures the metro.config.js is properly configured for Windows development.

```bash
npx react-native init-windows --overwrite
```

--------------------------------

### Configure VS Code Debug Launch Configuration

Source: https://microsoft.github.io/react-native-windows/docs/0.77/getting-started

Defines a launch configuration file for VS Code to enable React Native Windows debugging. Creates a .vscode/launch.json file with platform-specific debug settings for Windows development.

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Windows",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "windows"
    }
  ]
}
```

--------------------------------

### Install React Native Windows Dependencies with PowerShell Script

Source: https://microsoft.github.io/react-native-windows/docs/0.77/rnw-dependencies

This PowerShell script automates the installation of development dependencies for React Native for Windows. It requires an elevated PowerShell window to run and downloads the script from a provided URL.

```powershell
Set-ExecutionPolicy Unrestricted -Scope Process -Force;
iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-vs2022-deps.ps1');
```

--------------------------------

### Install Dependencies for React Native Library

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-modules-setup

Installs all required dependencies for the newly created React Native library project. This command should be run from within the library project directory after creation and before proceeding with Windows support initialization.

```bash
yarn install
```

--------------------------------

### Install Node.js LTS using WinGet

Source: https://microsoft.github.io/react-native-windows/docs/0.77/rnw-dependencies

This command uses the Windows Package Manager (WinGet) to install the Long-Term Support (LTS) version of Node.js, specifically version 18.18.0. This is the recommended method for installing Node.js for React Native development.

```bash
winget install OpenJS.NodeJS.LTS --version 18.18.0
```

--------------------------------

### Build Signed RNW App with Certificate - Yarn CLI

Source: https://microsoft.github.io/react-native-windows/docs/0.77/setup-ci

Configures a React Native Windows build to use a certificate for app signing via the yarn windows command. The `PackageCertificateKeyFile` MSBuild property specifies the path to the PFX certificate file, enabling release builds with x64 architecture and logging enabled.

```yaml
steps:
- name: run-windows (Release) - CI 
  run: yarn windows --no-launch --arch x64 --logging --release --msbuildprops PackageCertificateKeyFile=ProjectDirectoryPath\GitHubActionsWorkflow.pfx
```

--------------------------------

### Base64 Encode PFX Certificate for GitHub Secrets

Source: https://microsoft.github.io/react-native-windows/docs/0.77/setup-ci

This PowerShell script reads a PFX certificate file, converts its content to a Base64 encoded string, and saves it to a text file. This is necessary for securely storing certificate data as a secret in GitHub Actions or other CI/CD platforms.

```powershell
$fileContentBytes = get-content '<Path-to-Pfx>' -Encoding Byte
[System.Convert]::ToBase64String($fileContentBytes) | Out-File pfx-encoded-bytes.txt
```

--------------------------------

### Register Native Module with Simplified API (C#)

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-modules-advanced

This C# example presents the most concise way to register native module constants and methods by abstracting away readers and writers using a `MethodCallContext`. It simplifies the developer experience but may incur boxing overhead.

```csharp
namespace NativeModuleSample
{
  public sealed class FancyMathPackageProvider : IReactPackageProvider
  {
    public void CreatePackage(IReactPackageBuilder packageBuilder)
    {
      packageBuilder.AddModule("FancyMath", (IReactModuleBuilder moduleBuilder) => {
        var module = new FancyMath();
        moduleBuilder.AddConstantProvider(() => new Dictionary<string, object> {
          ["E"] = module.E,
          ["Pi"] = module.PI
        });
        moduleBuilder.AddMethod("add", MethodReturnType.Callback, (MethodCallContext callContext) => {
          double result = module.Add((double)callContext.Args[0], (double)callContext.Args[1]);
          callContext.resolve(result);
        });
        return module;
      });
    }
  }
}
```

--------------------------------

### react-native.config.js Example for MyApp Project

Source: https://microsoft.github.io/react-native-windows/docs/0.77/config

Example implementation of react-native.config.js override file for a Windows project named MyApp. Exports module configuration with Windows-specific paths including source directory, solution file, and project file location relative to the app root.

```javascript
module.exports = {
  project: {
    windows: {
      sourceDir: 'windows',
      solutionFile: 'MyApp.sln',
      project: {
        projectFile: 'MyApp\\MyApp.vcxproj',
      },
    },
  },
};
```

--------------------------------

### Verify Platform Installation with React Native CLI

Source: https://microsoft.github.io/react-native-windows/docs/0.77/metro-config-out-tree-platforms

This command, `npx react-native config`, outputs the current React Native configuration, including detected platforms. It's used to verify that platform-specific packages like 'react-native-macos' or 'react-native-windows' are correctly recognized and registered by the CLI.

```bash
npx react-native config
```

--------------------------------

### Decode Base64 Certificate to PFX File - PowerShell

Source: https://microsoft.github.io/react-native-windows/docs/0.77/setup-ci

Decodes a Base64-encoded certificate stored as a GitHub Secret and writes it to a PFX file for use in signing operations. This step retrieves the encoded string from `secrets.Base64_Encoded_Pfx`, converts it from Base64 to bytes, and saves it to the specified project directory path.

```powershell
- name: Decode the pfx
  run: |
    $PfxBytes = [System.Convert]::FromBase64String("${{ secrets.Base64_Encoded_Pfx }}")
    $PfxPath = [System.IO.Path]::GetFullPath( (Join-Path -Path ProjectDirectoryPath -ChildPath GitHubActionsWorkflow.pfx) )
    [System.IO.File]::WriteAllBytes("$PfxPath", $PfxBytes)
```

--------------------------------

### Create New React Native Library Project with create-react-native-library CLI

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-modules-setup

Creates a new React Native library project named 'my-library' using the create-react-native-library third-party CLI tool. This generates a base library structure that can be extended with Windows native module support. The command uses npx to execute the latest version of the tool without installation.

```bash
npx --yes create-react-native-library@latest my-library
```

--------------------------------

### Initialize React Native Windows Project (Old Architecture)

Source: https://microsoft.github.io/react-native-windows/docs/0.77/new-architecture

This command initializes a new React Native for Windows project using the old architecture, which relies on the Universal Windows Platform (UWP). This template is suitable for maintaining existing projects or for developers who do not yet need to adopt the New Architecture.

```bash
yarn react-native init-windows --overwrite
```

--------------------------------

### Remove Certificate File from Pipeline - PowerShell

Source: https://microsoft.github.io/react-native-windows/docs/0.77/setup-ci

Removes the PFX certificate file from the pipeline after signing is complete. Uses PowerShell to construct the certificate path, output it for verification, and delete the file to ensure sensitive certificate data is not left in the pipeline artifacts.

```powershell
- name: Remove the pfx
  run: |
    $certificatePath = Join-Path -Path ProjectDirectoryPath -ChildPath GitHubActionsWorkflow.pfx
    Write-Host $certificatePath
    Remove-Item -path $certificatePath
```

--------------------------------

### Initialize React Native Windows Project (New Architecture)

Source: https://microsoft.github.io/react-native-windows/docs/0.77/new-architecture

This command initializes a new React Native for Windows project with the New Architecture, utilizing the 'cpp-app' template. This template leverages the Windows App SDK (WinAppSDK) and the Fabric renderer, offering a modern development experience and improved performance. It is recommended for new projects starting with React Native 0.76+.

```bash
yarn react-native init-windows --template cpp-app --overwrite
```

--------------------------------

### ReactInstanceSettings Constructors and Events

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-api/ReactInstanceSettings

Details on how to construct a ReactInstanceSettings object and information about the events that can be subscribed to.

```APIDOC
## Constructors and Events for ReactInstanceSettings

### Constructors

#### ReactInstanceSettings
**`ReactInstanceSettings`**()

### Events

#### InstanceCreated
Type: `InstanceCreatedEventArgs`

#### InstanceDestroyed
Type: `InstanceDestroyedEventArgs`

#### InstanceLoaded
Type: `InstanceLoadedEventArgs`
```

--------------------------------

### Use useColorScheme Hook for Theme Sensitivity in React Native

Source: https://microsoft.github.io/react-native-windows/docs/0.77/windowsbrush-and-theme

This example demonstrates how to use the `useColorScheme` hook in React Native to dynamically adjust component styles based on the system's color scheme (light or dark). It's a simple way to make your app theme-aware without complex setup. Note that `useColorScheme()` returns 'light' during remote debugging.

```javascript
import { useColorScheme } from 'react-native';

const MyAppComponent = () => {
  const colorScheme = useColorScheme();
  return (
    <Button title='click me' color={colorScheme === 'dark' ? 'grey' : 'orange'}/>
  );
};

```

--------------------------------

### Add Library and Run Windows Build

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-modules-autolinking

Demonstrates how to add a React Native library (e.g., react-native-webview) using yarn and then run the Windows build for the project.

```bash
yarn add react-native-webview
npx react-native run-windows
```

--------------------------------

### Handle Theme Changes in React Native Class Components with Appearance API

Source: https://microsoft.github.io/react-native-windows/docs/0.77/windowsbrush-and-theme

This example shows how to manage theme changes in React Native class components using the `Appearance` API. It involves setting up event listeners for theme changes in `componentDidMount` and cleaning them up in `componentWillUnmount`. The `getColorScheme()` method is used to get the initial theme. Note that `getColorScheme()` returns 'light' during remote debugging.

```javascript
import { Appearance } from 'react-native';

class MyAppClass extends Component {
  state = {
    currentTheme: Appearance.getColorScheme()
  };

  componentDidMount() {
    Appearance.addChangeListener(this.onAppThemeChanged);
  };

  componentWillUnmount() {
    Appearance.addChangeListener(this.onAppThemeChanged);
  };

  onAppThemeChanged = (theme) => {
    const currentTheme = theme;
    this.setState({currentTheme});
  };

  render() {
    <Button title='click me' color={this.state.currentTheme === 'dark' ? 'grey' : 'orange'}/>
  }
}

```

--------------------------------

### Implement ReactPackageProvider for View Manager Registration (C#)

Source: https://microsoft.github.io/react-native-windows/docs/0.77/view-managers

This C# code defines a `ReactPackageProvider` that implements `IReactPackageProvider`. It's used to register custom native modules and view managers with React Native. The `CreatePackage` method is the entry point for building the package contents.

```csharp
using Microsoft.ReactNative.Managed;  
  
namespace ViewManagerSample  
{  
    public partial class ReactPackageProvider : IReactPackageProvider  
    {  
        public void CreatePackage(IReactPackageBuilder packageBuilder)  
        {  
            CreatePackageImplementation(packageBuilder);  
        }  
  
        /// <summary>  
        /// This method is implemented by the C# code generator  
        /// </summary>  
        partial void CreatePackageImplementation(IReactPackageBuilder packageBuilder);
    }
}
```

--------------------------------

### Async HTTP GET Request in C++/WinRT

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-modules-async

Performs an asynchronous HTTP GET request and retrieves the status code and content. It takes a URI as input and returns an IAsyncAction. Dependencies include winrt::Windows::Web::Http and winrt::Windows::Foundation.

```cpp
static winrt::Windows::Foundation::IAsyncAction GetHttpResponseAsync(std::wstring uri) noexcept
{
  // Create an HttpClient object
  auto httpClient = winrt::Windows::Web::Http::HttpClient();

  // Send the GET request asynchronously
  auto httpResponseMessage = co_await httpClient.GetAsync(winrt::Windows::Foundation::Uri(uri));

  // Parse response
  auto statusCode = httpResponseMessage.StatusCode();
  auto content = co_await httpResponseMessage.Content().ReadAsStringAsync();

  // TODO: How to return the result?
}
```

--------------------------------

### ReactViewOptions Class

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-api/ReactViewOptions

Documentation for the ReactViewOptions class, which holds settings for each IReactViewHost associated with an IReactHost instance.

```APIDOC
## Class: ReactViewOptions

### Description
Settings per each IReactViewHost associated with an IReactHost instance.

> **EXPERIMENTAL**

### Properties

#### ComponentName
- **ComponentName** (string) - Description: Name of a component registered in JavaScript via AppRegistry.registerComponent('ModuleName', () => ModuleName);
> **EXPERIMENTAL**

#### InitialProps
- **InitialProps** (JSValueArgWriter) - Description: Set of initial component properties. It is a JSON string.
> **EXPERIMENTAL**

### Constructors

#### ReactViewOptions
- **`ReactViewOptions`**()

### Referenced by
- `IReactViewHost`
- `IReactViewInstance`
- `ReactCoreInjection`
```

--------------------------------

### Implement Async HTTP GET with Promise Resolution in C++/WinRT

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-modules-async

Extends the asynchronous HTTP GET request method to accept a ReactPromise. It captures the promise, performs the HTTP request, constructs a result object containing the status code and content, and resolves the promise with this object. Handles potential premature deletion of the promise in asynchronous calls.

```cpp
static winrt::Windows::Foundation::IAsyncAction GetHttpResponseAsync(std::wstring uri,
  winrt::Microsoft::ReactNative::ReactPromise<winrt::Microsoft::ReactNative::JSValueObject> promise) noexcept
{
  auto capturedPromise = promise;
  
  // Create an HttpClient object
  auto httpClient = winrt::Windows::Web::Http::HttpClient();

  // Send the GET request asynchronously
  auto httpResponseMessage = co_await httpClient.GetAsync(winrt::Windows::Foundation::Uri(uri));

  // Parse response
  auto statusCode = httpResponseMessage.StatusCode();
  auto content = co_await httpResponseMessage.Content().ReadAsStringAsync();

  // Build result object
  auto resultObject = winrt::Microsoft::ReactNative::JSValueObject();

  resultObject["statusCode"] = static_cast<int>(statusCode);
  resultObject["content"] = winrt::to_string(content);

  capturedPromise.Resolve(resultObject);
}
```

--------------------------------

### Create React View Host (C++)

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-api/ReactCoreInjection

Creates a host to connect custom ReactViewInstances. This experimental method takes a ReactNativeHost and ReactViewOptions as input and returns an IReactViewHost.

```cpp
static IReactViewHost MakeViewHost(ReactNativeHost host, ReactViewOptions viewOptions)
```

--------------------------------

### DynamicAutomationProperties - Get Methods

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-api/DynamicAutomationProperties

This section details the static methods for retrieving accessibility-related properties from UI elements.

```APIDOC
## DynamicAutomationProperties - Get Methods

### GetAccessibilityActionEventHandler

- **Description**: Retrieves the Accessibility Action Event Handler for a given UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to get the handler from.
- **Return Type**: `AccessibilityActionEventHandler`

### GetAccessibilityActions

- **Description**: Retrieves the list of Accessibility Actions for a given UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to get the actions from.
- **Return Type**: `IVector<AccessibilityAction>`

### GetAccessibilityInvokeEventHandler

- **Description**: Retrieves the Accessibility Invoke Event Handler for a given UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to get the handler from.
- **Return Type**: `AccessibilityInvokeEventHandler`

### GetAccessibilityRole

- **Description**: Retrieves the Accessibility Role for a given UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to get the role from.
- **Return Type**: `AccessibilityRoles`

### GetAccessibilityStateBusy

- **Description**: Retrieves the busy state of a UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to check.
- **Return Type**: `bool`

### GetAccessibilityStateChecked

- **Description**: Retrieves the checked state of a UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to check.
- **Return Type**: `AccessibilityStateCheckedValue`

### GetAccessibilityStateDisabled

- **Description**: Retrieves the disabled state of a UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to check.
- **Return Type**: `bool`

### GetAccessibilityStateExpanded

- **Description**: Retrieves the expanded state of a UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to check.
- **Return Type**: `bool`

### GetAccessibilityStateSelected

- **Description**: Retrieves the selected state of a UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to check.
- **Return Type**: `bool`

### GetAccessibilityValueMax

- **Description**: Retrieves the maximum accessibility value of a UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to query.
- **Return Type**: `double`

### GetAccessibilityValueMin

- **Description**: Retrieves the minimum accessibility value of a UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to query.
- **Return Type**: `double`

### GetAccessibilityValueNow

- **Description**: Retrieves the current accessibility value of a UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to query.
- **Return Type**: `double`

### GetAccessibilityValueText

- **Description**: Retrieves the accessibility value of a UI element as text.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to query.
- **Return Type**: `string`

### GetAriaRole

- **Description**: Retrieves the ARIA role of a UI element.
- **Method**: GET
- **Endpoint**: N/A (Method call)
- **Parameters**:
  - **Path Parameters**: None
  - **Query Parameters**: None
  - **Request Body**: None
- **Parameters (Method Signature)**:
  - `element` (UIElement) - The UI element to get the role from.
- **Return Type**: `AriaRole`
```

--------------------------------

### ReactViewOptions Class

Source: https://microsoft.github.io/react-native-windows/docs/0.77/ReactViewOptions

Provides settings for each IReactViewHost associated with an IReactHost instance. This class is experimental.

```APIDOC
## Class: ReactViewOptions

### Description
Settings per each IReactViewHost associated with an IReactHost instance. This class is EXPERIMENTAL.

### Properties
#### ComponentName
- **ComponentName** (string) - EXPERIMENTAL - Name of a component registered in JavaScript via AppRegistry.registerComponent('ModuleName', () => ModuleName);
#### InitialProps
- **InitialProps** (JSValueArgWriter) - EXPERIMENTAL - Set of initial component properties. It is a JSON string.

### Constructors
#### ReactViewOptions
- **`ReactViewOptions`**()

### Referenced by
- `IReactViewHost`
- `IReactViewInstance`
- `ReactCoreInjection`
```

--------------------------------

### Resolve React Native Windows Path in Metro Config

Source: https://microsoft.github.io/react-native-windows/docs/0.77/metro-config-out-tree-platforms

This code snippet demonstrates how to dynamically resolve the path to the 'react-native-windows' package using Node.js. This path is then used within the Metro configuration, particularly in `extraNodeModules`, to ensure Metro correctly locates and resolves the native module, especially when symlinks are involved or in complex monorepo setups.

```javascript
resolver {
    extraNodeModules: {
        'react-native-windows': <path-to-react-native-windows>
    }
}
```

--------------------------------

### Implement ReactPackageProvider (.cpp)

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-modules

The source file for the ReactPackageProvider. It includes necessary headers and implements the CreatePackage method to register native modules using AddAttributedModules. It also shows how to manually register a TurboModule if needed.

```cpp
#include "pch.h"
#include "ReactPackageProvider.h"
#include "ReactPackageProvider.g.cpp"

#include <ModuleRegistration.h>

// NOTE: You must include the headers of your native modules here in
// order for the AddAttributedModules call below to find them.
#include "FancyMath.h"

namespace winrt::NativeModuleSample::implementation
{
    void ReactPackageProvider::CreatePackage(IReactPackageBuilder const& packageBuilder) noexcept
    {
        AddAttributedModules(packageBuilder, true);
    }
}

// Example for manual TurboModule registration:
// packageBuilder.AddTurboModule(L"FancyMath", MakeModuleProvider<NativeModuleSample::FancyMath>());
```

--------------------------------

### React Native Component with Native Module Integration

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-modules

A complete React Native component example that demonstrates importing a native module (FancyMath), accessing native constants, calling native methods with callbacks, and subscribing to native events using NativeEventEmitter. The component shows lifecycle hooks for managing event listener subscriptions and a press handler that calls native methods and displays results in an alert dialog.

```javascript
import React, { Component } from 'react';
import {
  AppRegistry,
  Alert,
  Text,
  View,
} from 'react-native';

import FancyMath from './NativeFancyMath'
import { NativeEventEmitter } from 'react-native';

const FancyMathEventEmitter = new NativeEventEmitter(FancyMath);

class NativeModuleSample extends Component {

  componentDidMount() {
    // Subscribing to FancyMath.AddEvent
    FancyMathEventEmitter.addListener('AddEvent', eventHandler, this);
  }

  componentWillUnmount() {
    // Unsubscribing from FancyMath.AddEvent
    FancyMathEventEmitter.removeListener('AddEvent', eventHandler, this);
  }

  eventHandler(result) {
    console.log("Event was fired with: " + result);
  }

  _onPressHandler() {
    // Calling FancyMath.add method
    FancyMath.add(
      /* arg a */ FancyMath.getConstants().Pi,
      /* arg b */ FancyMath.E,
      /* callback */ function (result) {
        Alert.alert(
          'FancyMath',
          `FancyMath says ${FancyMath.getConstants().Pi} + ${FancyMath.getConstants().E} = ${result}`,
          [{ text: 'OK' }],
          {cancelable: false});
      });
  }

  render() {
    return (
      <View>
         <Text>FancyMath says PI = {FancyMath.getConstants().Pi}</Text>
         <Text>FancyMath says E = {FancyMath.getConstants().E}</Text>
         <Button onPress={this._onPressHandler} title="Click me!"/>
      </View>);
  }
}

AppRegistry.registerComponent('NativeModuleSample', () => NativeModuleSample);
```

--------------------------------

### Object Property Access Methods

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-api/JsiRuntime

Methods for getting and setting properties on JavaScript objects, including access to host objects and native state.

```APIDOC
## Object Property Access Methods

### GetProperty
```
JsiValueRef GetProperty(
  JsiObjectRef obj,
  JsiPropertyIdRef propertyId
)
```
**Status**: EXPERIMENTAL
**Description**: Gets a property value from a JavaScript object
**Parameters**:
- **obj** (JsiObjectRef) - The object to access
- **propertyId** (JsiPropertyIdRef) - The property identifier
**Returns**: `JsiValueRef` - The property value

### GetHostObject
```
IJsiHostObject GetHostObject(JsiObjectRef obj)
```
**Status**: EXPERIMENTAL
**Description**: Retrieves the native host object wrapped by a JavaScript object
**Parameters**:
- **obj** (JsiObjectRef) - The JavaScript object wrapping the host object
**Returns**: `IJsiHostObject` - The native host object

### GetNativeState
```
IReactNonAbiValue GetNativeState(JsiObjectRef obj)
```
**Status**: EXPERIMENTAL
**Description**: Gets the native state associated with a JavaScript object
**Parameters**:
- **obj** (JsiObjectRef) - The object to get state from
**Returns**: `IReactNonAbiValue` - The associated native state

### GetArraySize
```
uint32_t GetArraySize(JsiObjectRef arr)
```
**Status**: EXPERIMENTAL
**Description**: Gets the length of a JavaScript array
**Parameters**:
- **arr** (JsiObjectRef) - The array object
**Returns**: `uint32_t` - The size of the array

### GetArrayBufferSize
```
uint32_t GetArrayBufferSize(JsiObjectRef arrayBuffer)
```
**Status**: EXPERIMENTAL
**Description**: Gets the size in bytes of an ArrayBuffer
**Parameters**:
- **arrayBuffer** (JsiObjectRef) - The ArrayBuffer object
**Returns**: `uint32_t` - The size in bytes

### GetArrayBufferData
```
void GetArrayBufferData(
  JsiObjectRef arrayBuffer,
  JsiByteArrayUser useArrayBytes
)
```
**Status**: EXPERIMENTAL
**Description**: Accesses the underlying byte data of an ArrayBuffer
**Parameters**:
- **arrayBuffer** (JsiObjectRef) - The ArrayBuffer object
- **useArrayBytes** (JsiByteArrayUser) - Callback to use the array bytes
```

--------------------------------

### IJSValueReader.ValueType Property

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-api/IJSValueReader

Gets the type of the current value being read. This property is essential for determining which getter method to use when retrieving the value.

```APIDOC
## GET ValueType

### Description
Retrieves the JSValueType of the current value in the reader stream.

### Property
```
readonly JSValueType ValueType
```

### Return Type
JSValueType - Enum indicating the type of the current value

### Usage Example
Use this property before calling any Get methods to determine which getter is appropriate:
```
if (reader.ValueType == JSValueType.Object) {
  // Call GetNextObjectProperty
} else if (reader.ValueType == JSValueType.Array) {
  // Call GetNextArrayItem
}
```
```

--------------------------------

### React Native for Windows View Manager React Context

Source: https://microsoft.github.io/react-native-windows/docs/0.77/view-managers

Manages the React Native context for a view manager. This interface provides methods to get and set the React context, which is essential for interacting with the React Native bridge and other components.

```cpp
IReactContext CustomUserControlViewManager::ReactContext() noexcept {
  return m_reactContext;
}

void CustomUserControlViewManager::ReactContext(IReactContext reactContext) noexcept {
  m_reactContext = reactContext;
}
```

--------------------------------

### Implement ReactPackageProvider Header (.h)

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-modules

The header file for the ReactPackageProvider implementation. It declares the constructor and the CreatePackage method, which is responsible for registering native modules.

```cpp
#pragma once

#include "ReactPackageProvider.g.h"

using namespace winrt::Microsoft::ReactNative;

amespace winrt::NativeModuleSample::implementation
{
    struct ReactPackageProvider : ReactPackageProviderT<ReactPackageProvider>
    {
        ReactPackageProvider() = default;

        void CreatePackage(IReactPackageBuilder const& packageBuilder) noexcept;
    };
}

namespace winrt::NativeModuleSample::factory_implementation
{
    struct ReactPackageProvider : ReactPackageProviderT<ReactPackageProvider, implementation::ReactPackageProvider> {};
}
```

--------------------------------

### Get Top-Level Window ID (C++)

Source: https://microsoft.github.io/react-native-windows/docs/0.77/native-api/ReactCoreInjection

Retrieves the window handle (HWND) for the active top-level application window as a 64-bit unsigned integer. This method is experimental and requires an IReactPropertyBag as input.

```cpp
static uint64_t GetTopLevelWindowId(IReactPropertyBag properties)
```

--------------------------------

### ReactCoreInjection: MakeViewHost Method

Source: https://microsoft.github.io/react-native-windows/docs/0.77/ReactCoreInjection

The MakeViewHost method is used by custom ReactViewInstances to create a host for connecting to React Native targets on non-XAML platforms. This is an experimental feature.

```typescript
class ReactCoreInjection {
  static MakeViewHost(host: ReactNativeHost, viewOptions: ReactViewOptions): IReactViewHost;
}
```
Tokens:
Raw