React Native for Windows

https://microsoft.github.io/react-native-windows/docs/0.80/
Admin
React Native for Windows enables developers to build native Windows applications using the React...
Tokens:148,135
Snippets:1,077
Trust Score:8.3
Update:8 months ago
Show doc for...
Tokens:
Raw
### Run React Native for Windows Example App

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

Launches the example application for the React Native library with Windows support enabled. This command can be run from the library's root folder or the `example` sub-directory. It requires `react-native-windows` to be properly installed and initialized.

```bash
yarn react-native run-windows
```

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

### Navigate to Project Directory

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

Changes the current directory to the newly created React Native library project. This step is necessary before proceeding with dependency installations and native code initialization. Replace `<projectName>` with the actual name of your project.

```bash
cd <projectName>
```

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

### Run React Native Windows App (CLI)

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

Builds and runs the React Native Windows application from the command line. This command starts the Metro bundler and launches the app.

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

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

### Create React Native Project (CLI)

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

Initializes a new React Native project with a specified version. This command uses npx to ensure the latest version of the React Native CLI is used.

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

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

### Install Dependencies for React Native Library

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

Installs all necessary dependencies for the newly created React Native library project. This command should be run after the library has been initialized.

```bash
yarn install
```

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

### Create New React Native Library Project

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

Initializes a new React Native library project with specified React Native version and project name. It uses `npx` to run the `create-react-native-library` tool. Replace `<projectName>` with your desired library name.

```bash
npx --yes create-react-native-library@0.48.9 --react-native-version ^0.80.0 <projectName>
```

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

### Initialize React Native Windows Native Code

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

Initializes the native code and projects for React Native Windows. The --overwrite flag ensures that existing configurations are updated.

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

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

### Setup GitHub Actions CI for RNW App Build and Test

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

This YAML configuration sets up a GitHub Actions workflow to build and test a React Native for Windows application. It checks out the code, sets up Node.js and MSBuild, installs dependencies, and runs the Windows x64 release build with logging. This is crucial for automated testing and regression prevention.

```yaml
name: Windows CI
on: [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
```

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

### Run Yarn Install (Shell)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/migration-guide

Installs project dependencies after updating the template in package.json. This command is essential for ensuring all necessary packages are correctly set up for the reverted architecture.

```shell
yarn
```

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

### Add React Native for Windows Dependencies

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

Installs `react-native-windows` as a development dependency and peer dependency for the React Native library. It ensures the project has the necessary Windows-specific packages. The `--dev` flag installs it as a development dependency, and `--peer` ensures compatibility with the React Native version.

```bash
yarn add react-native-windows@^0.80.0 --dev
yarn add react-native-windows@* --peer
yarn install
```

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

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

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

An example JavaScript configuration file (`react-native.config.js`) demonstrating how to manually specify Windows project settings for React Native. This is useful for overriding the default auto-linking behavior when needed.

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

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

### Add React Native Windows Dependency (NPM)

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

Installs the react-native-windows package as a project dependency using NPM. This command saves the dependency to your project's package.json.

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

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

### Verifying Platform Installation with React Native CLI

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

This command outputs the current React Native configuration, allowing verification that out-of-tree platforms like macOS or Windows are correctly recognized and registered. The output should include `npmPackageName` properties for the platforms being used.

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

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

### Autolink React Native Windows Dependencies

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

Automatically links native dependencies for React Native Windows projects. This command is typically run before opening the project in Visual Studio.

```bash
npx react-native autolink-windows
```

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

### React Native Windows Project Configuration Example

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

An example of a react-native.config.js file for a React Native Windows module named 'MyModule'. This configuration specifies the Windows-specific settings, including the source directory, solution file, and project files to be included.

```javascript
module.exports = {
  dependency: {
    platforms: {
      windows: {
        sourceDir: 'windows',
        solutionFile: 'MyModule.sln',
        projects: [
          {
            projectFile: 'MyModule\MyModule.vcxproj',
            directDependency: true,
          }
        ],
      },
    },
  },
};

```

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

### Install React Native Windows Dependencies using PowerShell Script

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

This script automates the installation of development dependencies for React Native for Windows. It requires an elevated PowerShell window to execute. The script downloads and runs a PowerShell script from a provided URL to set up the necessary environment.

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

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

### Run Windows App (Shell)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/migration-guide

Executes the React Native Windows application using the community CLI. This command should be run after successfully reverting to the Paper architecture and installing dependencies.

```shell
npx @react-native-community/cli run-windows
```

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

### Reinitialize Project with Old Template (Shell)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/migration-guide

Reinitializes the React Native Windows project using the 'old/uwp-cpp-app' template, effectively reverting to the Paper architecture. This command requires the React Native CLI to be installed.

```shell
npx react-native init-windows --template old/uwp-cpp-app
```

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

### C# Native Module Initialization with Timer

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

Demonstrates how to perform initialization logic within a C# native module using the [ReactInitializer] attribute. This example shows setting up a periodic timer to execute a task every 5 seconds and how to cancel the timer when the module is disposed.

```csharp
[ReactModule]
internal sealed class NativeModuleSample
{
  private ThreadPoolTimer m_timer;

  [ReactInitializer]
  public void Initialize(ReactContext reactContext)
  {
    m_timer = ThreadPoolTimer.CreatePeriodicTimer(
      new TimerElapsedHandler((timer) =>
      {
          // Do something every 5 seconds
      }),
      TimeSpan.FromSeconds(5)
    );
  }
  
  ~NativeModuleSample()
  {
    _timer?.Cancel();
  }
}
```

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

### Add React Native Windows Dependency (Yarn)

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

Adds the react-native-windows package as a project dependency using Yarn. This is the recommended package manager for this process.

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

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

### Available Templates

Source: https://microsoft.github.io/react-native-windows/docs/0.80/init-windows-cli

Lists the available templates for `init-windows` command, which can be specified using the `--template` option.

```APIDOC
## GET /react-native/templates

### Description
Retrieves a list of available templates for the `init-windows` command.

### Method
GET

### Endpoint
/react-native/templates

### Parameters
#### Query Parameters
- **help** (boolean) - Optional - Display help for command.

### Request Example
```json
{
  "command": "npx react-native init-windows --list"
}
```

### Response
#### Success Response (200)
- **templates** (array) - An array of template objects, each containing 'name', 'description', and 'template_id'.

#### Response Example
```json
{
  "templates": [
    {
      "name": "React Native Windows Application (New Arch, WinAppSDK, C++)",
      "description": "A RNW app using RN's New Architecture, built in C++ and targeting WinAppSDK",
      "template_id": "cpp-app"
    },
    {
      "name": "React Native Windows Library (C++)",
      "description": "A RNW (Turbo) Native Module supporting RN's New and Old Architectures built in C++",
      "template_id": "cpp-lib"
    },
    {
      "name": "React Native Windows Application (Old Arch, UWP, C++)",
      "description": "A RNW app using RN's Old Architecture, built in C++ and targeting UWP",
      "template_id": "old/uwp-cpp-app"
    },
    {
      "name": "React Native Windows Application (Old Arch, UWP, C#)",
      "description": "A RNW app using RN's Old Architecture, built in C# and targeting UWP",
      "template_id": "old/uwp-cs-app"
    }
  ]
}
```
```

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

### Create New React Native Library Project

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

Initializes a new React Native library project using the `create-react-native-library` CLI tool. This command sets up the basic structure for a library that can later have Windows support added.

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

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

### IReactViewHost (New Architecture)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/native-api/IReactViewHost

This section details the IReactViewHost interface for the New Architecture, including its properties and methods for view instance management.

```APIDOC
## IReactViewHost (New Architecture)

### Description
Used to implement a non-XAML platform ReactRootView.

### Properties
#### ReactNativeHost
- **ReactNativeHost** (`ReactNativeHost`) - Readonly - The ReactNativeHost associated with this ReactViewHost.

### Methods
#### AttachViewInstance
- **Method**: `IAsyncAction`
- **Description**: Attaches IReactViewInstance to the IReactViewHost.
- **Parameters**: 
  - `operation` (`IReactViewInstance`) - The view instance to attach.

#### DetachViewInstance
- **Method**: `IAsyncAction`
- **Description**: Detaches IReactViewInstance from the IReactViewHost.

#### ReloadViewInstance
- **Method**: `IAsyncAction`
- **Description**: Reloads the IReactViewInstance if it is attached.

#### ReloadViewInstanceWithOptions
- **Method**: `IAsyncAction`
- **Description**: Reloads IReactViewInstance if it is attached with a new set of options.
- **Parameters**: 
  - `operation` (`ReactViewOptions`) - The new options for reloading the view instance.

#### UnloadViewInstance
- **Method**: `IAsyncAction`
- **Description**: Unloads the attached IReactViewInstance.
```

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

### VS Code Debug Configuration for React Native Windows

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

Configuration for Visual Studio Code to debug React Native for Windows applications. This file should be placed at .vscode/launch.json in your project's root directory.

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

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

### IReactViewHost (Old Architecture)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/native-api/IReactViewHost

This section details the IReactViewHost interface for the Old Architecture, including its properties and methods for view instance management.

```APIDOC
## IReactViewHost (Old Architecture)

### Description
Used to implement a non-XAML platform ReactRootView.

### Properties
#### ReactNativeHost
- **ReactNativeHost** (`ReactNativeHost`) - Readonly - The ReactNativeHost associated with this ReactViewHost.

### Methods
#### AttachViewInstance
- **Method**: `IAsyncAction`
- **Description**: Attaches IReactViewInstance to the IReactViewHost.
- **Parameters**: 
  - `operation` (`IReactViewInstance`) - The view instance to attach.

#### DetachViewInstance
- **Method**: `IAsyncAction`
- **Description**: Detaches IReactViewInstance from the IReactViewHost.

#### ReloadViewInstance
- **Method**: `IAsyncAction`
- **Description**: Reloads the IReactViewInstance if it is attached.

#### ReloadViewInstanceWithOptions
- **Method**: `IAsyncAction`
- **Description**: Reloads IReactViewInstance if it is attached with a new set of options.
- **Parameters**: 
  - `operation` (`ReactViewOptions`) - The new options for reloading the view instance.

#### UnloadViewInstance
- **Method**: `IAsyncAction`
- **Description**: Unloads the attached IReactViewInstance.
```

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

### ReactNativeHost Configuration

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

Provides settings for creating a React instance, including bundle paths, debugging configurations, and bytecode caching options.

```APIDOC
##ReactNativeHost Configuration

### Description
This class provides settings for creating and configuring a React Native instance. It allows customization of bundle loading, debugging behavior, and performance optimizations like bytecode caching.

### Properties

#### BundleAppId
- **Type**: `string`
- **Description**: The name of the app sent to the packager server via the 'app' query parameter. Useful for bundling multiple applications from a single packager instance. If not set, the parameter is omitted.

#### BundleRootPath
- **Type**: `string`
- **Default Value**: `"ms-appx:///Bundle/"`
- **Description**: The base URI for locating the JavaScript bundle. Supports `ms-appx://`, `ms-appdata://` (for UWP/MSIX), filesystem paths, or URIs for embedded resources (e.g., `resource://moduleName`).

#### ByteCodeFileUri
- **Type**: `string`
- **Description**: A URI to a location with write access for caching bytecode. Required if `EnableByteCodeCaching` is true. **Note**: Bytecode generation is not currently implemented for UWP applications.

#### DebugBundlePath
- **Type**: `string`
- **Description**: The path requested from a bundle server (e.g., Metro) when loading a debug bundle. Defaults to `JavaScriptBundleFile` if not provided.

#### DebuggerBreakOnNextLine
- **Type**: `bool`
- **Description**: When true, the debugger pauses on the next line of JavaScript executed, aiding in debugging early-stage issues. **Note**: Not supported with the Chakra JS engine; use the `debugger` keyword in the bundle as a workaround.

#### DebuggerPort
- **Type**: `uint16_t`
- **Default Value**: `9229`
- **Description**: The port used for the JavaScript engine debugger when `UseDirectDebugger` is enabled.

#### DebuggerRuntimeName
- **Type**: `string`
- **Description**: A name associated with the JavaScript runtime for debugging purposes, appearing in tools like edge://inspect.

#### EnableByteCodeCaching
- **Type**: `bool`
- **Default Value**: `false`
- **Description**: Enables bytecode generation for supported JS engines, improving subsequent load times. Requires `ByteCodeFileUri` to be set. **Note**: Bytecode generation is not currently implemented for UWP applications.

#### EnableDefaultCrashHandler
- **Type**: `bool`
- **Default Value**: `false`
- **Description**: Enables a default unhandled exception handler that logs detailed information for Windows Error Reporting.
```

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

### ReactNativeHost Class (New Architecture)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/native-api/ReactNativeHost

The main entry-point to create and manage a React instance with the new architecture. It allows configuration of ReactInstanceSettings and control over instance loading.

```APIDOC
## ReactNativeHost (New Architecture)

### Description
This class is the main entry-point for creating a React instance. It configures the instance using `ReactInstanceSettings` before loading and provides control over when the instance is loaded. Use `ReactInstanceSettings` events to observe instance creation, loading, and destruction.

### Properties
#### InstanceSettings
- **InstanceSettings** (`ReactInstanceSettings`) - Provides access to this host's `ReactInstanceSettings` for configuring the React instance.
#### PackageProviders
- **PackageProviders** (`readonly IVector<IReactPackageProvider>`) - Provides access to the list of `IReactPackageProvider`s that the React instance will use to provide native modules. This can be used to register additional package providers.

### Constructors
#### ReactNativeHost
- **`ReactNativeHost`**()

### Methods
#### FromContext
- **`FromContext`** (`IReactContext` reactContext) - `static` `ReactNativeHost` - Returns the `ReactNativeHost` instance associated with the given `IReactContext`.
#### LoadInstance
- **`LoadInstance`**() - `IAsyncAction` - Loads a new React instance. This is an alias for the `ReloadInstance` method.
#### ReloadInstance
- **`ReloadInstance`**() - `IAsyncAction` - Unloads the current React instance and loads a new one. This process involves creating a JavaScript engine instance and launching the provided JavaScript code bundle. If a React instance is already running, it will be shut down before the new one is loaded. The lifecycle can be observed via `ReactInstanceSettings` events: `InstanceCreated`, `InstanceLoaded`, and `InstanceDestroyed`.
#### UnloadInstance
- **`UnloadInstance`**() - `IAsyncAction` - Unloads the current React instance. All React resources, including the JavaScript engine environment, are cleaned up. Instance destruction can be observed with the `ReactInstanceSettings.InstanceDestroyed` event.
```

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

### Install Node.js LTS using WinGet Package Manager

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

Installs the Long-Term Support (LTS) version of Node.js (v18.18.0) using the Windows Package Manager (WinGet). This is the recommended method for installing Node.js for React Native development. Requires an elevated Command Prompt to run.

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

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

### Initialize React Native for Windows Project

Source: https://microsoft.github.io/react-native-windows/docs/0.80/init-windows-cli

This command initializes a new React Native for Windows project using the default template (`cpp-app`). It sets up the necessary files and configurations for a Windows-specific React Native application.

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

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

### EmitEventSetterDelegate

Source: https://microsoft.github.io/react-native-windows/docs/0.80/native-api/EmitEventSetterDelegate

A delegate that gets the arguments for an event emit on an EventEmitter.

```APIDOC
## EmitEventSetterDelegate

### Description
A delegate that gets the arguments for an event emit on an EventEmitter.

### Method
N/A (Delegate Definition)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A

## Invoke

### Description
This method is called to write the arguments for an event emission.

### Method
`Invoke`

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **argWriter** (`JSValueArgWriter`) - Required - An object used to write the arguments for the event.

### Request Example
```json
{
  "argWriter": "<JSValueArgWriter object>"
}
```

### Response
#### Success Response (void)
This method does not return a value.

#### Response Example
N/A
```

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

### Build Solution with MSBuild (Default Restore Style)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/managing-cpp-deps

Command to restore and build a Visual Studio solution using the default `PackageReference` restore style. This command should be run after ensuring `packages.config` dependencies are handled.

```bash
MSBuild.exe /restore your_solution.sln
```

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

### ReactApplication Class

Source: https://microsoft.github.io/react-native-windows/docs/0.80/ReactApplication

Details about the ReactApplication class, its properties, and constructors.

```APIDOC
## ReactApplication

Kind: `class`
Extends: `Application`

The `ReactApplication` is a base application class for use in applications that are entirely written in React Native. When the app launches, the `ReactApplication` will load the React instance. Use `ReactInstanceSettings` and `ReactNativeHost` properties to customize React instance in your application's constructor.

### Properties

#### Host
`readonly` `ReactNativeHost` `Host`
Access to the `ReactNativeHost` of your application.

#### InstanceSettings
`ReactInstanceSettings` `InstanceSettings`
Provides access to your application's `ReactInstanceSettings`. Generally, changes to these settings will not take effect if the React instance is already loaded, unless the React instance is reloaded, so most settings should be set in your application's constructor.

#### JavaScriptBundleFile
string `JavaScriptBundleFile`
See `ReactInstanceSettings.JavaScriptBundleFile`.

#### PackageProviders
`readonly` `IVector`<`IReactPackageProvider`> `PackageProviders`
Provides access to the list of `IReactPackageProvider`'s that the instance will use to provide native modules to the application. This can be used to register additional package providers, such as package providers from community modules. See `ReactNativeHost` for more information.

#### UseDeveloperSupport
bool `UseDeveloperSupport`
Controls whether the developer experience features such as the developer menu and `RedBox` are enabled. See `ReactInstanceSettings.UseDeveloperSupport`.

### Constructors

#### ReactApplication
**`ReactApplication`**()
Creates a new instance of `ReactApplication`

_Last updated on 27/3/2021_
```

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

### React Native Windows Keyboard Handling Example

Source: https://microsoft.github.io/react-native-windows/docs/0.80/ikeyboardprops-api

A React Native component demonstrating how to handle keyboard events using the IKeyboardEvent interface. It captures the last key pressed and updates the component's state. This example utilizes the onKeyDown prop of a View component.

```typescript
const App = class App extends React.Component {
  state = {
    lastKeyDown
  }

  private _onKeyDown = (event: IKeyboardEvent) => {
    this.setState({ lastKeyDown: event.nativeEvent.key });
  };

  render() {
    return (
      <View onKeyDown={this._onKeyDown} />
    );
  }
}

export default App;
```

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

### React Instance Constructors

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

Constructor for creating a new React Native instance settings.

```APIDOC
## ReactInstanceSettings

### Description
Constructor for initializing React Native instance settings.

### Method
`ReactInstanceSettings`()

### Parameters
None
```

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

### Implement Asynchronous HTTP GET Request in C#

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

This code provides the implementation logic for an asynchronous HTTP GET request. It creates an `HttpClient`, sends the request, reads the response content, and returns it as a string. This is a common pattern for fetching data from web services.

```csharp
// Create an HttpClient object
var httpClient = new HttpClient();

// Send the GET request asynchronously
var httpResponseMessage = await httpClient.GetAsync(new Uri(uri));

var content = await httpResponseMessage.Content.ReadAsStringAsync();

return content;
```

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

### IViewWindowsProps Interface

Source: https://microsoft.github.io/react-native-windows/docs/0.80/iviewwindowsprops-api

Documentation for the IViewWindowsProps interface, which extends View Props and IKeyboardProps APIs. This documentation is for the Legacy Architecture and may require updates for the New Architecture.

```APIDOC
## IViewWindowsProps

### Description
This interface extends the View Props and `IKeyboardProps` APIs. Note: This documentation was written for the 'Old' or 'Legacy' Architecture and may need review for the New Architecture.

### Methods

#### `accessibilityPosInSet(position: number)`

##### Description
Indicates to accessibility services that the Component is within a set and has the given numbered position.

##### Parameters

- **position** (number) - Optional - The numbered position of the component within a set.

#### `accessibilitySetSize(size: number)`

##### Description
Indicates to accessibility services that the Component is within a set with the given size.

##### Parameters

- **size** (number) - Optional - The total size of the set the component belongs to.

#### `children(children: any)`

##### Description
Represents the children elements of the component.

##### Parameters

- **children** (any) - Optional - The child elements.

### Last Updated
14/5/2025
```

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

### Implement Asynchronous HTTP GET Request in C++/WinRT

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

This C++/WinRT code snippet demonstrates how to perform an asynchronous HTTP GET request. It utilizes `winrt::Windows::Web::Http::HttpClient` to send a request and asynchronously read the response content. The method returns an `IAsyncAction` and currently has a TODO for handling the result.

```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?
}
```

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

### View Manager with Properties Creation (C++)

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

Extends a view manager to implement IViewManagerCreateWithProperties, allowing view creation with initial properties read from a JSValueReader.

```cpp
struct CustomUserControlViewManager : winrt::implements<
                                             CustomUserControlViewManager,
                                             winrt::Microsoft::ReactNative::IViewManager,
                                             winrt::Microsoft::ReactNative::IViewManagerWithNativeProperties,
                                             winrt::Microsoft::ReactNative::IViewManagerWithCommands,
                                             winrt::Microsoft::ReactNative::IViewManagerWithExportedEventTypeConstants,
                                             winrt::Microsoft::ReactNative::IViewManagerCreateWithProperties,
                                             winrt::Microsoft::ReactNative::IViewManagerWithReactContext> {
  // IViewManagerCreateWithProperties
  winrt::Windows::Foundation::IInspectable CreateViewWithProperties(winrt::Microsoft::ReactNative::IJSValueReader const &propertyMapReader);
};
```

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

### Implement View Creation with Properties in C#

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

Extends a view manager to implement the IViewManagerCreateWithProperties interface, allowing for custom view instantiation based on properties provided in JSX. The CreateViewWithProperties method inspects propertyMapReader to decide which control to instantiate.

```csharp
internal class CustomUserControlViewManager : AttributedViewManager<CustomUserControl>, IViewManagerCreateWithProperties {
  // rest of the view manager goes here...
  // IViewManagerCreateWithProperties
  public virtual object CreateViewWithProperties(Microsoft.ReactNative.IJSValueReader propertyMapReader) {
    propertyMapReader.ReaderValue(out IDictionary<string, JSValue> propertyMap);
    // create a XAML FrameworkElement based on properties in propertyMap
    if (propertyMap.ContainsKey("foo")) {
      return new Button();
    } else {
      return new TextBox();
    }
  }
}
```

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

### IReactPropertyBag Interface Methods

Source: https://microsoft.github.io/react-native-windows/docs/0.80/IReactPropertyBag

This section details the methods available on the IReactPropertyBag interface for getting, creating, and setting properties.

```APIDOC
## IReactPropertyBag

### Description
`IReactPropertyBag` provides a thread-safe property storage. Properties are identified by an instance of `IReactPropertyName`. It is expected that there will be no direct use of this interface. Ideally, all usage should happen through strongly-typed accessors.

### Methods

#### Get

##### Description
Gets value of the `name` property. It returns null if the property does not exist.

##### Method
GET

##### Endpoint
N/A (Interface Method)

##### Parameters

###### Path Parameters
None

###### Query Parameters
None

###### Request Body
None

#### GetOrCreate

##### Description
Gets or creates value of the `name` property. If the property exists, then the method returns its value. If the property does not exist, then this method creates it by calling the `createValue` delegate. The function may return null if the `createValue` returns null when called. The `createValue` is called outside of any locks. It is possible that `createValue` result is not used when another thread sets the property value before the created value is stored.

##### Method
GET or CREATE

##### Endpoint
N/A (Interface Method)

##### Parameters

###### Path Parameters
None

###### Query Parameters
None

###### Request Body
None

#### Set

##### Description
Sets property `name` to `value`. It returns the previously-stored property value. It returns null if the property did not exist. If the new value is null, then the property is removed.

##### Method
SET

##### Endpoint
N/A (Interface Method)

##### Parameters

###### Path Parameters
None

###### Query Parameters
None

###### Request Body
None

### Request Example
```json
{
  "example": "No direct request body for interface methods. See specific implementations."
}
```

### Response
#### Success Response (200)
- **Object** (type) - The value of the property or the previously stored value.

#### Response Example
```json
{
  "example": "Property value or null"
}
```
```

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

### ReactNativeHost Class (Old Architecture)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/native-api/ReactNativeHost

The main entry-point for creating and managing a React instance with the old architecture. It allows configuration of ReactInstanceSettings and control over instance loading.

```APIDOC
## ReactNativeHost (Old Architecture)

### Description
This class is the main entry-point for creating a React instance. It configures the instance using `ReactInstanceSettings` before loading and provides control over when the instance is loaded. Use `ReactInstanceSettings` events to observe instance creation, loading, and destruction.

### Properties
#### InstanceSettings
- **InstanceSettings** (`ReactInstanceSettings`) - Provides access to this host's `ReactInstanceSettings` for configuring the React instance.
#### PackageProviders
- **PackageProviders** (`readonly IVector<IReactPackageProvider>`) - Provides access to the list of `IReactPackageProvider`s that the React instance will use to provide native modules. This can be used to register additional package providers.

### Constructors
#### ReactNativeHost
- **`ReactNativeHost`**()

### Methods
#### FromContext
- **`FromContext`** (`IReactContext` reactContext) - `static` `ReactNativeHost` - Returns the `ReactNativeHost` instance associated with the given `IReactContext`.
#### LoadInstance
- **`LoadInstance`**() - `IAsyncAction` - Loads a new React instance. This is an alias for the `ReloadInstance` method.
#### ReloadInstance
- **`ReloadInstance`**() - `IAsyncAction` - Unloads the current React instance and loads a new one. This process involves creating a JavaScript engine instance and launching the provided JavaScript code bundle. If a React instance is already running, it will be shut down before the new one is loaded. The lifecycle can be observed via `ReactInstanceSettings` events: `InstanceCreated`, `InstanceLoaded`, and `InstanceDestroyed`.
#### UnloadInstance
- **`UnloadInstance`**() - `IAsyncAction` - Unloads the current React instance. All React resources, including the JavaScript engine environment, are cleaned up. Instance destruction can be observed with the `ReactInstanceSettings.InstanceDestroyed` event.
```

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

### DynamicAutomationProperties - Get Methods

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

This section details the static methods used to retrieve accessibility-related values from UI elements using DynamicAutomationProperties.

```APIDOC
## DynamicAutomationProperties - Get Methods

This section details the static methods used to retrieve accessibility-related values from UI elements using DynamicAutomationProperties.

### GetAccessibilityActionEventHandler
`static` `AccessibilityActionEventHandler` **`GetAccessibilityActionEventHandler`**(`UIElement` element)

### GetAccessibilityActions
`static` `IVector`<`AccessibilityAction`> **`GetAccessibilityActions`**(`UIElement` element)

### GetAccessibilityInvokeEventHandler
`static` `AccessibilityInvokeEventHandler` **`GetAccessibilityInvokeEventHandler`**(`UIElement` element)

### GetAccessibilityRole
`static` `AccessibilityRoles` **`GetAccessibilityRole`**(`UIElement` element)

### GetAccessibilityStateBusy
`static` bool **`GetAccessibilityStateBusy`**(`UIElement` element)

### GetAccessibilityStateChecked
`static` `AccessibilityStateCheckedValue` **`GetAccessibilityStateChecked`**(`UIElement` element)

### GetAccessibilityStateDisabled
`static` bool **`GetAccessibilityStateDisabled`**(`UIElement` element)

### GetAccessibilityStateExpanded
`static` bool **`GetAccessibilityStateExpanded`**(`UIElement` element)

### GetAccessibilityStateSelected
`static` bool **`GetAccessibilityStateSelected`**(`UIElement` element)

### GetAccessibilityValueMax
`static` double **`GetAccessibilityValueMax`**(`UIElement` element)

### GetAccessibilityValueMin
`static` double **`GetAccessibilityValueMin`**(`UIElement` element)

### GetAccessibilityValueNow
`static` double **`GetAccessibilityValueNow`**(`UIElement` element)

### GetAccessibilityValueText
`static` string **`GetAccessibilityValueText`**(`UIElement` element)

### GetAriaRole
`static` `AriaRole` **`GetAriaRole`**(`UIElement` element)
```

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

### IReactPropertyBag Interface Methods (Conceptual)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/native-api/IReactPropertyBag

This snippet illustrates the conceptual methods of the IReactPropertyBag interface, which provides thread-safe property storage. It includes methods for copying properties from another bag, getting a property's value, getting or creating a property's value, and setting a property's value. Direct use of this interface is discouraged; strongly-typed accessors are preferred.

```typescript
interface IReactPropertyBag {
  CopyFrom(other: IReactPropertyBag): void;
  Get(name: IReactPropertyName): Object | null;
  GetOrCreate(name: IReactPropertyName, createValue: ReactCreatePropertyValue): Object | null;
  Set(name: IReactPropertyName, value: Object | null): Object | null;
}
```

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

### ViewComponentViewInitializer

Source: https://microsoft.github.io/react-native-windows/docs/0.80/native-api/ViewComponentViewInitializer

Documentation for the ViewComponentViewInitializer delegate, including its Invoke method and how it is referenced.

```APIDOC
## ViewComponentViewInitializer

### Description
Delegate for initializing a ViewComponentView.

### Kind
`delegate`

### Status
**EXPERIMENTAL**

## Invoke

### Description
Initializes the provided `ViewComponentView`.

### Method
`void Invoke(ViewComponentView view)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (void)
This method does not return a value.

#### Response Example
None

## Referenced by

### Description
Lists the components that reference `IReactCompositionViewComponentBuilder`.

### Method
N/A

### Endpoint
N/A

### Parameters
None

### Request Example
None

### Response
#### Success Response (200)
- **IReactCompositionViewComponentBuilder** (object) - The component that references the initializer.

#### Response Example
```json
{
  "references": [
    "IReactCompositionViewComponentBuilder"
  ]
}
```
```

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

### Get Value at Index from JSI Array

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

Accesses and returns a JSI value at a specific index within a JSI array. This is an experimental function for direct array manipulation.

```cpp
JsiValueRef GetValueAtIndex(JsiObjectRef arr, uint32_t index)
```

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

### Get Property ID Array from JSI Object

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

Retrieves an array of property IDs from a given JSI object. This function is experimental and intended for advanced JSI interactions.

```cpp
JsiObjectRef GetPropertyIdArray(JsiObjectRef obj)
```

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

### ReactInstanceSettings Class

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

Configuration options for initializing a React Native instance, including bundle loading, debugging, and engine settings.

```APIDOC
## Class: ReactInstanceSettings

### Description
Provides settings to create a React instance.

### Properties

#### BundleAppId
- **Type**: `string`
- **Description**: The name of the app passed to the packager server via the 'app' query parameter. This is useful when bundling multiple applications from the same packager instance. If no value is set, the parameter will not be passed.

#### BundleRootPath
- **Type**: `string`
- **Default value**: `ms-appx:///Bundle/`
- **Description**: Base path used for the location of the bundle. This can be an `ms-appx://` or `ms-appdata://` URI (if the app is UWP or packaged using MSIX), a filesystem path, or a URI pointing at an embedded resource.
  * Examples:
    * `ms-appx:///Bundle` - locates the bundle in the MSIX package.
    * `C:\foo\bar` - locates the bundle in the local filesystem.
    * `resource://moduleName` - locates the bundle as an embedded RCDATA resource.
    * `resource://` - locates the bundle as an embedded RCDATA resource in the running process's module.

#### ByteCodeFileUri
- **Type**: `string`
- **Description**: Set this to a location the application has write access to in order for bytecode to be successfully cached. See `EnableByteCodeCaching`. Note that currently the byte code generation is not implemented for UWP applications.

#### DebugBundlePath
- **Type**: `string`
- **Description**: When loading from a bundle server (such as metro), this is the path that will be requested from the server. If this is not provided, the value of `JavaScriptBundleFile` is used.

#### DebuggerBreakOnNextLine
- **Type**: `bool`
- **Description**: For direct debugging, controls whether to break on the next line of JavaScript that is executed. This can help debug issues hit early in the JavaScript bundle load. Note: this is not supported with the Chakra JS engine.

#### DebuggerPort
- **Type**: `uint16_t`
- **Default value**: `9229`
- **Description**: When `UseDirectDebugger` is enabled, this controls the port that the JavaScript engine debugger will run on.

#### DebuggerRuntimeName
- **Type**: `string`
- **Description**: Name to associate with the JavaScript runtime when debugging. This name will show up in the list of JavaScript runtimes to attach to in edge://inspect or other debuggers.

#### EnableByteCodeCaching
- **Type**: `bool`
- **Default value**: `false`
- **Description**: For JS engines that support bytecode generation, this controls if bytecode should be generated when a JavaScript bundle is first loaded. Subsequent runs of the application should be faster as the JavaScript will be loaded from bytecode instead of the raw JavaScript. `ByteCodeFileUri` must be set to a location the application has write access to.

#### EnableDefaultCrashHandler
- **Type**: `bool`
- **Default value**: `false`
- **Description**: Enables the default unhandled exception handler that logs additional information into a text file for Windows Error Reporting.

#### EnableDeveloperMenu
- **Type**: `bool`
- **Deprecated**: Replaced by `UseDeveloperSupport`.
- **Description**: Controls whether various developer experience features are available for this instance, including the developer menu and the default `RedBox` experience.

#### EnableJITCompilation
- **Type**: `bool`
- **Default value**: `true`
- **Description**: Flag controlling whether the JavaScript engine uses JIT compilation.

#### JSIEngineOverride
- **Type**: `JSIEngine`
- **Default value**: `JSIEngine.Chakra`
- **Description**: The `JSIEngine` override to be used with the React instance. Ignored when `UseWebDebugger` is true.

#### JavaScriptBundleFile
- **Type**: `string`
- **Default value**: `index.windows`
- **Description**: The name of the JavaScript bundle file to load. This should be a relative path from `BundleRootPath`. The `.bundle` extension will be appended. If using an embedded RCDATA resource, this identifies the resource ID that stores the bundle.

#### NativeLogger
- **Type**: `LogHandler`
- **Description**: Function that will be hooked into the JavaScript instance as global.nativeLoggingHook. This allows native hooks for JavaScript's console implementation. If not set, logs print to native debug output in debug builds.
```

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

### ComponentIslandComponentViewInitializer Delegate

Source: https://microsoft.github.io/react-native-windows/docs/0.80/native-api/ComponentIslandComponentViewInitializer

Details the ComponentIslandComponentViewInitializer delegate, including its experimental nature, the Invoke method signature, and its references.

```APIDOC
## Delegate: ComponentIslandComponentViewInitializer

### Description
This is an experimental delegate used for initializing ContentIslandComponentView.

### Method
`Invoke`

### Signature
`void Invoke(ContentIslandComponentView view)`

### Referenced by
* `IReactCompositionViewComponentBuilder`

### Notes
* This API is marked as EXPERIMENTAL.
* Last updated on 6/6/2025.
```

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

### Registering ReactPackageProvider in App XAML Startup (C#)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/native-modules-csharp-codegen

Demonstrates how to register an instance of `ReactPackageProvider` in the application's XAML startup code. This is typically done within the constructor of the App class to ensure the package provider is available when the application starts.

```csharp
PackageProviders.Add(new ReactPackageProvider());
```

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

### XamlUIService (Old Architecture)

Source: https://microsoft.github.io/react-native-windows/docs/0.80/native-api/XamlUIService

Provides access to XAML UI-specific functionality in the Old Architecture. It allows getting XAML elements from a react tag and dispatching events to JS components.

```APIDOC
## XamlUIService (Old Architecture)

### Description
Provides access to XAML UI-specific functionality. It provides access to APIs to get a XAML element from a react tag, and to dispatch events to JS components.

### Methods
#### DispatchEvent
void **`DispatchEvent`**(`FrameworkElement` view, string eventName, `JSValueArgWriter` eventDataArgWriter)
Dispatches an event to a JS component.

#### ElementFromReactTag
`DependencyObject` **`ElementFromReactTag`**(int64_t reactTag)
Gets the backing XAML element from a react tag.

#### FromContext
`static` `XamlUIService` **`FromContext`**(`IReactContext` context)
Use this method to get access to the `XamlUIService` associated with the `IReactContext`.

#### GetAccessibleRoot
`static` `FrameworkElement` **`GetAccessibleRoot`**(`IReactPropertyBag` properties)
Retrieves the default `FrameworkElement` that will be used for the app for accessibility purposes (e.g. to announce).

#### GetIslandWindowHandle
`static` uint64_t **`GetIslandWindowHandle`**(`IReactPropertyBag` properties)
Gets the window handle HWND (as an UInt64) used as the XAML Island window for the current React instance.

#### GetReactRootView
`ReactRootView` **`GetReactRootView`**(`FrameworkElement` view)
Gets the `ReactRootView` view for a given element.

#### GetXamlRoot
`static` `XamlRoot` **`GetXamlRoot`**(`IReactPropertyBag` properties)
Retrieves the default `XamlRoot` for the app.

#### SetAccessibleRoot
`static` void **`SetAccessibleRoot`**(`IReactPropertyBag` properties, `FrameworkElement` accessibleRoot)
Sets the `FrameworkElement` that will act as the default accessible element for the app. The element must be able to create an automation peer (see `FrameworkElementAutomationPeer`), or have the Landmark type property set (see `AutomationProperties.LandmarkTypeProperty`). This must be manually provided to the `ReactInstanceSettings` when using XAML Islands to have access to functionality related to accessibility.

#### SetIslandWindowHandle
`static` void **`SetIslandWindowHandle`**(`IReactPropertyBag` properties, uint64_t windowHandle)
Sets the windowHandle HWND (as an UInt64) to be the XAML Island window for the current React instance. Pass the value returned by IDesktopWindowXamlSourceNative get_WindowHandle.

#### SetXamlRoot
`static` void **`SetXamlRoot`**(`IReactPropertyBag` properties, `XamlRoot` xamlRoot)
Sets the `XamlRoot` element for the app. This must be manually provided to the `ReactInstanceSettings` object when using XAML Islands so that certain APIs work correctly. For more information, see Host WinRT XAML Controls in desktop apps (XAML Islands).
```

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

### React Native init-windows Command

Source: https://microsoft.github.io/react-native-windows/docs/0.80/init-windows-cli

Initializes a new React Native for Windows project from a given template using the `npx react-native init-windows` command.

```APIDOC
## POST /react-native/init-windows

### Description
Initializes a new React Native for Windows project from a given template.

### Method
POST

### Endpoint
/react-native/init-windows

### Parameters
#### Query Parameters
- **logging** (boolean) - Optional - Verbose output logging.
- **template** (string) - Optional - Specify the template to use (default: `cpp-app`).
- **name** (string) - Optional - The native project name. Defaults to the name property in `app.json` or `package.json`.
- **namespace** (string) - Optional - The native project namespace, expressed using dots as separators, i.e. `Level1.Level2.Level3`. Defaults to the same as name.
- **overwrite** (boolean) - Optional - Overwrite any existing files without prompting.
- **no-telemetry** (boolean) - Optional - Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI.
- **list** (boolean) - Optional - Shows a list with all available templates with their descriptions.
- **help** (boolean) - Optional - Display help for command.

### Request Example
```json
{
  "command": "npx react-native init-windows",
  "options": {
    "template": "cpp-lib",
    "namespace": "MyCompany.MyProject"
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message indicating successful initialization.
- **details** (object) - Object containing details about the initialized project, such as name, namespace, and template used.

#### Response Example
```json
{
  "message": "React Native Windows project initialized successfully.",
  "details": {
    "name": "MyApp",
    "namespace": "MyApp",
    "template": "cpp-app"
  }
}
```
```
Tokens:
Raw