### 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 `` with the actual name of your project. ```bash cd ``` -------------------------------- ### 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 --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 `` with your desired library name. ```bash npx --yes create-react-native-library@0.48.9 --react-native-version ^0.80.0 ``` -------------------------------- ### 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`) - 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": "" } ``` ### 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 ( ); } } 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, IViewManagerCreateWithProperties { // rest of the view manager goes here... // IViewManagerCreateWithProperties public virtual object CreateViewWithProperties(Microsoft.ReactNative.IJSValueReader propertyMapReader) { propertyMapReader.ReaderValue(out IDictionary 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`) - 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" } } ``` ```