React Native for Windows

https://microsoft.github.io/react-native-windows/docs/
Admin
React Native for Windows enables developers to build native Windows applications using React Native,...
Tokens:95,934
Snippets:923
Trust Score:8.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Run the example app with run-windows

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

Launches the example app on Windows. Can be run from the example folder or from the library root with 'yarn example react-native run-windows'.

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

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

### Install dependencies with yarn for revert

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

Run yarn to install dependencies after setting the template to 'old/uwp-cpp-app' in package.json.

```bash
yarn  
```

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

### Install Node.js using WinGet

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

Install Node.js version 22.22.0 using WinGet from an elevated Command Prompt. This is the React Native recommended method.

```powershell
winget install OpenJS.NodeJS.22 --version 22.22.0  

```

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

### Install dependencies with yarn

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

Alternative to npm install, using yarn to install dependencies after updating package.json.

```bash
yarn install  
```

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

### Install dependencies with npm

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

Run this command after updating package.json to React Native 0.80 to install the new dependencies.

```bash
npm install  
```

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

### Verify Platform Installation with npx react-native config

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

Run `npx react-native config` and check the JSON output for `platforms.macos.npmPackageName` or `platforms.windows.npmPackageName` to confirm the platform is installed and hooked into the CLI.

```json
{  

    ...  

    "platforms": {  

      "ios": {},  

      "android": {},  

      "macos": {  

        "npmPackageName": "react-native-macos"  

      },  

      "windows": {  

        "npmPackageName": "react-native-windows"  

      }  

    },  

    ...  

}  
```

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

### Create a new React Native library with create-react-native-library

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

Run this command to scaffold a new library project. Replace <projectName> with your library name; the guide assumes 'testlib'. Use the CLI arguments to set package name, type, and languages as shown.

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

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

### Initialize Windows native code with init-windows

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

Initializes the React Native for Windows library using the cpp-lib template. Also initializes the example app's Windows code.

```bash
npx react-native init-windows --template cpp-lib --overwrite  
```

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

### Run autolink-windows command

Source: https://microsoft.github.io/react-native-windows/docs/native-platform-using

Run this command to autolink native Windows libraries to your React Native for Windows app. For the example app, you can run it from the example folder or use 'yarn example react-native autolink-windows' from the library root.

```bash
yarn react-native autolink-windows  
```

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

### Using onKeyDown

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

Example of using the onKeyDown event on a View component.

```tsx
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;  


```

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

### Example codegenConfig for Windows

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

Example codegenConfig object in package.json for React Native Windows. Configures type, jsSrcsDir, and Windows-specific settings like namespace, generators, outputDirectory, and separateDataTypes.

```json
"codegenConfig": {  

    "name": "NativeModuleSampleSpec",  

    "type": "all",  

    "jsSrcsDir": "src",  

    "includesGeneratedCode": true,  

    "windows": {  

      "namespace": "NativeModuleSampleCodegen",  

      "generators": [  

        "modulesWindows",  

        "componentsWindows"  

      ],  

      "outputDirectory": "windows/NativeModuleSample/codegen",  

      "separateDataTypes": true  

    }  

  },  
```

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

### Add react-native-windows as a dependency

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

Adds react-native-windows as a dev and peer dependency, then installs. Use version ^0.84.0 for dev and * for peer.

```bash
yarn add react-native-windows@^0.84.0 --dev  

yarn add react-native-windows@* --peer  

yarn install  
```

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

### Example react-native.config.js for MyModule

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

Manual override file for a native module named `MyModule`. Sets `sourceDir` to 'windows', `solutionFile` to 'MyModule.sln', and defines a project with `projectFile` 'MyModule\\MyModule.vcxproj' and `directDependency: true`. This file is used when the auto-generated config is incorrect.

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

```

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

### Navigate into the newly created directory

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

Enter the project directory created by the previous command before continuing.

```bash
cd <projectName>  
```

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

### Initialize Windows with New Architecture using --template cpp-app

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

Use this command to (re-)initialize Windows support with the New Architecture. Specify the --template cpp-app flag when calling init-windows in your application project.

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

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

### FocusNavigationRequest.Reason Property

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

Gets the reason the ReactNativeIsland is getting focus.

```APIDOC
## Reason Property

### Description
Gets the reason the `ReactNativeIsland` is getting focus.

### Property
`FocusNavigationReason` `Reason`

### Remarks
This API is experimental and may change in future releases.
```

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

### Get

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

Gets the value of a property by name. Returns null if the property does not exist.

```APIDOC
## Get

### Description
Gets the value of the specified property. Returns null if the property does not exist.

### Method
Get

### Signature
Object Get(IReactPropertyName name)

### Parameters
- **name** (IReactPropertyName) - Required - The name of the property to get.

### Return Value
Object - The value of the property, or null if the property does not exist.
```

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

### Initialize Windows with Old Architecture using --template old/uwp-cpp-app

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

Use this command to (re-)initialize Windows with the Old Architecture. Specify the --template old/uwp-cpp-app flag when calling init-windows in your application project. For the old C# template, use old/uwp-cs-app instead.

```bash
yarn react-native init-windows --template old/uwp-cpp-app
```

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

### MakeViewHost

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

Custom ReactViewInstances use this to create a host to connect to.

```APIDOC
## MakeViewHost

### Description
Custom ReactViewInstances use this to create a host to connect to.

### Method
static

### Signature
`static IReactViewHost MakeViewHost(ReactNativeHost host, ReactViewOptions viewOptions)`

### Parameters
- **host** (ReactNativeHost) - Required - The ReactNativeHost instance.
- **viewOptions** (ReactViewOptions) - Required - The view options for the host.

### Returns
- **IReactViewHost** - The created view host.

```

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

### init-windows CLI Usage and Configuration

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

Commands and configuration for initializing a React Native for Windows project.

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

```json
"react-native-windows": {  
    "init-windows": {  
  
```

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

### Reinitialize Windows project with old/uwp-cpp-app template

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

Generates the Windows project using the legacy Paper architecture template.

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

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

### Create a new React Native project

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

Run this command from the desired parent directory to create a new React Native project with version 0.84.0.

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

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

### IJsiHostObject interface

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

This interface represents a host object that can be exposed to JavaScript via the JSI runtime. It defines methods to get a property, get all property IDs, and set a property.

```APIDOC
## IJsiHostObject

### Description
This is an experimental interface for a host object used in JSI. It provides virtual methods to interact with the object's properties from JavaScript.

### Methods

#### GetProperty
- **Signature**: `JsiValueRef GetProperty(JsiRuntime runtime, JsiPropertyIdRef propertyId)`
- **Description**: Retrieves the value of a property from the host object.

#### GetPropertyIds
- **Signature**: `IVector<JsiPropertyIdRef> GetPropertyIds(JsiRuntime runtime)`
- **Description**: Gets a collection of all property IDs available on the host object.

#### SetProperty
- **Signature**: `void SetProperty(JsiRuntime runtime, JsiPropertyIdRef propertyId, JsiValueRef value)`
- **Description**: Sets the value of a property on the host object.

### Parameters
All methods take a `JsiRuntime` instance as the first parameter. The second parameter `JsiPropertyIdRef` identifies the property, and for SetProperty a third parameter `JsiValueRef` provides the value to set.

### Return Types
- `GetProperty` returns a `JsiValueRef` representing the property value.
- `GetPropertyIds` returns an `IVector` of `JsiPropertyIdRef`.
- `SetProperty` returns void.

### Note
This interface is part of the JSI API and not intended for direct use. Use the `ExecuteJsi` method in JsiApiContext.h or examples in the IntegrationTests project.
```

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

### ReactNativeHost.InstanceSettings

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

Provides access to the host's ReactInstanceSettings to configure the React instance.

```APIDOC
## Property: InstanceSettings

### Description
Provides access to this host's `ReactInstanceSettings` to configure the React instance.

### Type
`ReactInstanceSettings`

### Remarks
This property is used to get or set the settings for the React instance.
```

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

### Call Native Component: use CircleMask in App.tsx

Source: https://microsoft.github.io/react-native-windows/docs/native-platform-using

In the example app, this imports both multiply and CircleMask from 'testlib' and uses CircleMask as a native component. The example app provided is a New Architecture app and cannot test Paper Native Components.

```typescript
import { Text, View, StyleSheet } from 'react-native';  
import { multiply, CircleMask } from 'testlib';  

  

const result = multiply(3, 7);  

  

export default function App() {  
  return (  
    <View style={styles.container}>  
      <CircleMask style={{ margin: 10 }}>  
        <View  
          style={{  
            backgroundColor: '#006666',  
            width: 100,  
            height: 100,  
            justifyContent: 'center',  
            alignItems: 'center',  
          }}  
        >  
          <Text>Result: {result}</Text>  
        </View>  
      </CircleMask>  
    </View>  
  );  
}  

  

const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    alignItems: 'center',  
    justifyContent: 'center',  
  },  
});  
```

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

### XamlUIService.GetReactRootView

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

Instance method to get the ReactRootView for a given element.

```APIDOC
## XamlUIService.GetReactRootView

### Description
Gets the `ReactRootView` view for a given element.

### Method
GetReactRootView

### Signature
`ReactRootView` **`GetReactRootView`**(`FrameworkElement` view)

### Parameters
- **view** (`FrameworkElement`) - Required - The element.

### Returns
- `ReactRootView` - The ReactRootView for the element.
```

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

### Run React Native Windows app without Visual Studio

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

Run this command from the project root to build and launch the app. A new Command Prompt window opens with the React packager and the app. First run may take a while as it builds the entire project and dependencies.

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

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

### GetReactTag

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

Gets the react tag from a backing XAML element.

```APIDOC
## [STATIC] GetReactTag

### Description
Gets the react tag from a backing XAML element.

### Method
static

### Endpoint
GetReactTag(DependencyObject dependencyObject)

### Parameters
- **dependencyObject** (DependencyObject) - Required - The XAML element from which to get the react tag.

### Response
- **int64_t** - The react tag.
```

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

### ReactInstanceSettings

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

Documentation for the ReactInstanceSettings class, including its properties and constructor.

```APIDOC
## ReactInstanceSettings

### Description
Represents the settings used to initialize a React Native instance in React Native for Windows. It provides properties to configure logging, notifications, package providers, property sharing, error handling, bundle loading, debugging, and the UI dispatcher.

### Properties

#### 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 will print to native debug output in debug builds and no-op in release builds.

#### Notifications
- **Type**: `readonly IReactNotificationService`
- **Description**: Gets an `IReactNotificationService` to send notifications between components and the application. Use `IReactContext.Notifications` to access this service from native components or view managers.

#### PackageProviders
- **Type**: `readonly IVector<IReactPackageProvider>`
- **Description**: Gets a list of `IReactPackageProvider`. Add an implementation to define additional native modules and custom view managers to be included in the React instance. Auto-linking automatically adds providers to the application's `PackageProviders`.

#### Properties
- **Type**: `readonly IReactPropertyBag`
- **Description**: Gets an `IReactPropertyBag` to share values between components and the application. Use `IReactContext.Properties` to access this property bag from native components and view managers.

#### RedBoxHandler
- **Type**: `IRedBoxHandler`
- **Description**: Provides an extension point to allow custom error handling within the React instance. See `IRedBoxHandler` for more information.

#### RequestDevBundle
- **Type**: `bool`
- **Description**: When querying the bundle server for a bundle, should it request the dev bundle or release bundle.

#### RequestInlineSourceMap
- **Type**: `bool`
- **Default**: `true`
- **Description**: When using `UseFastRefresh`, `UseLiveReload`, or `UseWebDebugger`, controls whether the bundler should include inline source maps. If set, the bundler will include source maps inline (improves debugging experience, but for very large bundles it could have a significant performance hit).

#### SourceBundleHost
- **Type**: `string`
- **Default**: `localhost`
- **Description**: When using `UseFastRefresh`, `UseLiveReload`, or `UseWebDebugger`, this is the server hostname used to load the bundle from.

#### SourceBundlePort
- **Type**: `uint16_t`
- **Default**: `8081`
- **Description**: When using `UseFastRefresh`, `UseLiveReload`, or `UseWebDebugger`, this is the server port used to load the bundle from.

#### UIDispatcher
- **Type**: `IReactDispatcher`
- **Description**: Controls the main UI dispatcher to be used by the React instance. If the `ReactInstanceSettings` object is initially created on a UI thread, this defaults to that thread. The value provided here will be available to native modules and view managers using `IReactContext.UIDispatcher`.

#### UseDeveloperSupport
- **Type**: `bool`
- **Description**: Controls whether various developer experience features are available for this instance. In particular, it enables the developer menu, the default `RedBox` and `LogBox` experience.

#### UseDirectDebugger
- **Type**: `bool`
- **Description**: Enables debugging in the JavaScript engine (if supported). For Chakra, this enables debugging of the JS runtime directly within the app using Visual Studio -> Attach to process (Script).

#### UseFastRefresh
- **Type**: `bool`
- **Description**: Controls whether the instance triggers hot module reload logic when it first loads the instance. Most edits should be visible within a second or two without the instance having to reload. Non-compatible changes still cause full reloads. See Fast Refresh for more information.

#### UseLiveReload
- **Type**: `bool`
- **Deprecated**: For general use this has been replaced by `UseFastRefresh`.
- **Description**: Enables live reload to load the source bundle from the React Native packager. When the file is saved, the packager will trigger reloading.

#### UseWebDebugger
- **Type**: `bool`
- **Deprecated**: Debugging should be done using DirectDebugging rather than WebDebugger. Web debugging changes the app behavior and will be removed in a future version.
- **Description**: Controls whether the instance JavaScript runs in a remote environment such as within a browser. By default, this is using a browser navigated to http://localhost:8081/debugger-ui served by Metro/Haul. Debugging will start as soon as the React Native instance is loaded.

### Constructors

#### ReactInstanceSettings()
- **Signature**: `ReactInstanceSettings()`
- **Description**: Initializes a new instance of the `ReactInstanceSettings` class.
```

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

### ReactInstanceSettings

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

Documentation for the ReactInstanceSettings class, including its properties and constructor.

```APIDOC
## ReactInstanceSettings

### Description
Represents the settings used to initialize a React Native instance in a React Native for Windows application. It provides properties to configure debugging, bundling, and communication between native and JavaScript components.

### Properties

#### Notifications
- **Type**: `IReactNotificationService` (readonly)
- **Description**: Gets a `IReactNotificationService` to send notifications between components and the application. Use `IReactContext.Notifications` to access this service from native components or view managers.

#### PackageProviders
- **Type**: `IVector<IReactPackageProvider>` (readonly)
- **Description**: Gets a list of `IReactPackageProvider`. Add an implementation to define additional native modules and custom view managers to be included in the React instance. Auto-linking automatically adds providers to the application's `PackageProviders`.

#### Properties
- **Type**: `IReactPropertyBag` (readonly)
- **Description**: Gets a `IReactPropertyBag` to share values between components and the application. Use `IReactContext.Properties` to access this property bag from native components and view managers.

#### RedBoxHandler
- **Type**: `IRedBoxHandler`
- **Description**: Provides an extension point to allow custom error handling within the React instance. See `IRedBoxHandler` for more information.

#### RequestDevBundle
- **Type**: `bool`
- **Description**: When querying the bundle server for a bundle, should it request the dev bundle or release bundle.

#### RequestInlineSourceMap
- **Type**: `bool`
- **Default**: `true`
- **Description**: When using `UseFastRefresh`, `UseLiveReload`, or `UseWebDebugger`, controls whether the bundler should include inline source maps. If set, the bundler will include source maps inline (improves debugging experience, but may have a significant performance hit for very large bundles).

#### SourceBundleHost
- **Type**: `string`
- **Default**: `localhost`
- **Description**: When using `UseFastRefresh`, `UseLiveReload`, or `UseWebDebugger`, this is the server hostname used to load the bundle from.

#### SourceBundlePort
- **Type**: `uint16_t`
- **Default**: `8081`
- **Description**: When using `UseFastRefresh`, `UseLiveReload`, or `UseWebDebugger`, this is the server port used to load the bundle from.

#### UIDispatcher
- **Type**: `IReactDispatcher`
- **Description**: Controls the main UI dispatcher to be used by the React instance. If the `ReactInstanceSettings` object is initially created on a UI thread, this defaults to that thread. The value provided here is available to native modules and view managers using `IReactContext.UIDispatcher`.

#### UseDeveloperSupport
- **Type**: `bool`
- **Description**: Controls whether various developer experience features are available for this instance. In particular, it enables the developer menu, the default `RedBox` and `LogBox` experience.

#### UseDirectDebugger
- **Type**: `bool`
- **Description**: Enables debugging in the JavaScript engine (if supported). For Chakra, this enables debugging of the JS runtime directly within the app using Visual Studio -> Attach to process (Script).

#### UseFastRefresh
- **Type**: `bool`
- **Description**: Controls whether the instance triggers the hot module reload logic when it first loads the instance. Most edits should be visible within a second or two without the instance having to reload. Non-compatible changes still cause full reloads. See Fast Refresh for more information.

#### UseLiveReload
- **Type**: `bool`
- **Deprecated**: For general use this has been replaced by `UseFastRefresh`.
- **Description**: Enables live reload to load the source bundle from the React Native packager. When the file is saved, the packager will trigger reloading.

#### UseWebDebugger
- **Type**: `bool`
- **Deprecated**: Debugging should be done using DirectDebugging rather than WebDebugger. Web debugging changes the app behavior and will be removed in a future version.
- **Description**: Controls whether the instance JavaScript runs in a remote environment such as within a browser. By default, this is using a browser navigated to http://localhost:8081/debugger-ui served by Metro/Haul. Debugging will start as soon as the React Native instance is loaded.

### Constructors

#### ReactInstanceSettings
- **Signature**: `ReactInstanceSettings()`
- **Description**: Initializes a new instance of the `ReactInstanceSettings` class.
```

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

### XamlUIService.ElementFromReactTag

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

Instance method to get the XAML element from a react tag.

```APIDOC
## XamlUIService.ElementFromReactTag

### Description
Gets the backing XAML element from a react tag.

### Method
ElementFromReactTag

### Signature
`DependencyObject` **`ElementFromReactTag`**(int64_t reactTag)

### Parameters
- **reactTag** (int64_t) - Required - The react tag.

### Returns
- `DependencyObject` - The backing XAML element.
```

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

### ReactInstanceSettings Class

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

Documentation for the ReactInstanceSettings class, including its properties and their descriptions.

```APIDOC
## ReactInstanceSettings Class

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

### Kind
`class`

### 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. See URI schemes for other UWP/MSIX valid URI formats.
  - `C:\\foo\\bar` - locates the bundle in the local filesystem. Note UWP app file access permissions.
  - `resource://moduleName` - locates the bundle as an embedded RCDATA resource in moduleName. Specify the resource ID in `JavaScriptBundleFile`.
  - `resource://` - locates the bundle as an embedded RCDATA resource in the running process's module. Specify the resource ID in `JavaScriptBundleFile`.

#### 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 which is the currently used JavaScript engine. As a workaround you could add the `debugger` keyword in the beginning of the bundle.**_

#### 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 in order for the bytecode to be successfully cached. **Note that currently the byte code generation is not implemented for UWP applications.**

#### 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**: This property has been replaced by `UseDeveloperSupport`. In version 0.63 both properties will do the same thing. It will be removed in a future version.
- **Description**: This controls whether various developer experience features are available for this instance. In particular 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. In order for the override to work, Microsoft.ReactNative must be compiled with support of that engine. This override will be ignored when `UseWebDebugger` is set to true, since the browser must use its own engine to debug correctly.

#### 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 to the end, when looking for the bundle file. If using an embedded RCDATA resource, this identifies the resource ID that stores the bundle. See `BundleRootPath`.

#### 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 this is not set then logs will print output to the native debug output in debug builds, and no-op in release builds.
```

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

### GetTop Static Method

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

Gets the top-coordinate value of the specified UIElement.

```APIDOC
## GetTop(UIElement element)

### Description
Static method that retrieves the value of the top attached property for a given UIElement.

### Method
static double GetTop(UIElement element)

### Parameters
- **element** (UIElement) - The UIElement from which to get the top coordinate.

### Returns
double - The top coordinate value.

```

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

### GetLeft Static Method

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

Gets the left-coordinate value of the specified UIElement.

```APIDOC
## GetLeft(UIElement element)

### Description
Static method that retrieves the value of the Left attached property for a given UIElement.

### Method
static double GetLeft(UIElement element)

### Parameters
- **element** (UIElement) - The UIElement from which to get the left coordinate.

### Returns
double - The left coordinate value.

```

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

### Adding new files to the native project

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

Shows how to add new header files to the native Windows project's .vcxproj file, with a plus sign indicating the addition of NEWFILE.h.

```xml
  <ItemGroup>  

    <ClInclude Include="testlib.h" />  

+   <ClInclude Include="NEWFILE.h" />  

    <ClInclude Include="ReactPackageProvider.h">  

      <DependentUpon>ReactPackageProvider.idl</DependentUpon>  

    </ClInclude>  

    <ClInclude Include="resource.h" />  

    <ClInclude Include="pch.h" />  

    <ClInclude Include="pch.h" />  

  </ItemGroup>  


```

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

### LayoutService.FromContext

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

Use this method to get access to the LayoutService associated with the IReactContext.

```APIDOC
## FromContext

### Description
Use this method to get access to the LayoutService associated with the IReactContext.

### Method
static LayoutService FromContext(IReactContext context)

### Parameters
- **context** (IReactContext) - Required - The React context from which to obtain the LayoutService.

### Returns
LayoutService - The LayoutService instance associated with the given context.
```

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

### GetTopLevelWindowId

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

Gets the window handle HWND (as an UInt64) for the active top level application window.

```APIDOC
## GetTopLevelWindowId

### Description
Gets the window handle HWND (as an UInt64) for the active top level application window.

### Method
static

### Signature
`static uint64_t GetTopLevelWindowId(IReactPropertyBag properties)`

### Parameters
- **properties** (IReactPropertyBag) - Required - The property bag to retrieve the window ID from.

### Returns
- **uint64_t** - The window handle HWND as an UInt64.

```

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

### Implementing the Turbo Native Module (testlib.h and testlib.cpp)

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

These files define the Testlib Turbo Native Module for React Native for Windows. The header declares the module with REACT_MODULE, uses ModuleSpec to enforce the API surface, and attributes Initialize with REACT_INIT and multiply with REACT_SYNC_METHOD. The implementation saves the ReactContext and multiplies two doubles.

```cpp
#pragma once  

#include "pch.h"  
#include "resource.h"  

#if __has_include("codegen/NativeTestlibDataTypes.g.h")  
  #include "codegen/NativeTestlibDataTypes.g.h"  
#endif  
#include "codegen/NativeTestlibSpec.g.h"  

#include "NativeModules.h"  

namespace winrt::testlib  
{  

REACT_MODULE(Testlib)  
struct Testlib  
{  
  using ModuleSpec = testlibCodegen::TestlibSpec;  

  REACT_INIT(Initialize)  
  void Initialize(React::ReactContext const &reactContext) noexcept;  

  REACT_SYNC_METHOD(multiply)  
  double multiply(double a, double b) noexcept;  

private:  
  React::ReactContext m_context;  
};  

} // namespace winrt::testlib  

```

```cpp
#include "pch.h"  

#include "testlib.h"  

namespace winrt::testlib  
{  

// See https://microsoft.github.io/react-native-windows/docs/native-platform for details on writing native modules  

void Testlib::Initialize(React::ReactContext const &reactContext) noexcept {  
  m_context = reactContext;  
}  

double Testlib::multiply(double a, double b) noexcept {  
  return a * b;  
}  

} // namespace winrt::testlib  

```

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

### CompositionUIService.GetCompositor

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

Gets the Compositor used by this ReactNative instance. This is an experimental static method that takes a property bag.

```APIDOC
## static Compositor GetCompositor(IReactPropertyBag properties)

### Description
Gets the Compositor used by this ReactNative instance. This is an experimental API.

### Method
static Compositor GetCompositor(IReactPropertyBag properties)

### Parameters
- **properties** (IReactPropertyBag) - Required - The property bag containing the React instance properties.

### Returns
- **Compositor** - The Compositor used by the ReactNative instance.
```

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

### ReactNativeHost Constructor

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

Initializes a new instance of the ReactNativeHost class.

```APIDOC
## Constructor: ReactNativeHost

### Signature
`ReactNativeHost()`

### Description
Initializes a new instance of the ReactNativeHost class.
```

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

### Reinitialize Windows project with cpp-app template

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

Generates the Windows project using the new architecture (Fabric) template.

```bash
npx react-native init-windows --template cpp-app  
```

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

### GetOrCreate

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

Gets or creates the value of a property. If the property exists, returns its value; otherwise, creates it using the provided delegate.

```APIDOC
## GetOrCreate

### Description
Gets or creates the value of the specified property. If the property exists, returns its value. If not, creates it by calling the createValue delegate. The createValue is called outside of any locks, and its result may be unused if another thread sets the property first.

### Method
GetOrCreate

### Signature
Object GetOrCreate(IReactPropertyName name, ReactCreatePropertyValue createValue)

### Parameters
- **name** (IReactPropertyName) - Required - The name of the property to get or create.
- **createValue** (ReactCreatePropertyValue) - Required - A delegate that creates the property value if it does not exist.

### Return Value
Object - The value of the property, or null if createValue returns null.
```

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

### Generated AutolinkedNativeModules.g.props

Source: https://microsoft.github.io/react-native-windows/docs/native-platform-using

This XML file is generated by the autolink-windows command. It contains build configuration properties, though in this example the PropertyGroup is empty.

```xml
<?xml version="1.0" encoding="utf-8"?>  

<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">  

  <!-- AutolinkedNativeModules.g.props contents generated by "npx @react-native-community/cli autolink-windows" -->  

  <PropertyGroup>  

  </PropertyGroup>  

</Project>  
```

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

### Add react-native-windows with NPM

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

Alternative command to add react-native-windows version 0.84.0 as a dependency using NPM.

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

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

### CompositionUIService.ComponentFromReactTag

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

Gets the ComponentView from a react tag. This is an experimental static method that takes an IReactContext and a react tag to return the associated ComponentView.

```APIDOC
## static ComponentView ComponentFromReactTag(IReactContext context, int64_t reactTag)

### Description
Gets the ComponentView from a react tag. This is an experimental API.

### Method
static ComponentView ComponentFromReactTag(IReactContext context, int64_t reactTag)

### Parameters
- **context** (IReactContext) - Required - The React context.
- **reactTag** (int64_t) - Required - The react tag of the component.

### Returns
- **ComponentView** - The ComponentView associated with the react tag.
```
Tokens:
Raw