diff --git a/.spelling b/.spelling index 5d0f0f294..0abb09182 100644 --- a/.spelling +++ b/.spelling @@ -128,6 +128,7 @@ WinUI3 Xcode 80-native-platform-getting-started 81-native-platform-getting-started +82-native-platform-getting-started sidebar_label original_id workstream diff --git a/docs/new-arch-missingProps.md b/docs/new-arch-missingProps.md index c2cf13ec9..06e0a90b6 100644 --- a/docs/new-arch-missingProps.md +++ b/docs/new-arch-missingProps.md @@ -15,30 +15,6 @@ title: Missing Properties |:--|:--| | enum('visible', 'hidden') | 'visible' | -### `opacity` - -Sets the transparency of the view. - -| type | required | -|:--|:--| -| number | No | - -### `selectable` - -Lets the user select text, to use the native copy and paste functionality. - -| type | default | -|:--|:--| -| bool | false | - -### `selectionColor` - -The highlight color of the text. - -| type | required | -|:--|:--| -| color | No | - ### `keyboardType` Determines which keyboard to open, e.g.numeric diff --git a/website/.unbroken_exclusions b/website/.unbroken_exclusions index 63713a287..29181ea81 100644 --- a/website/.unbroken_exclusions +++ b/website/.unbroken_exclusions @@ -20,6 +20,7 @@ !versioned_docs/version-0.79/native-api/*-api-windows*.md !versioned_docs/version-0.80/native-api/*-api-windows*.md !versioned_docs/version-0.81/native-api/*-api-windows*.md +!versioned_docs/version-0.82/native-api/*-api-windows*.md # See Issue 410 File not found IReactContext while parsing versioned_docs/version-0.64/native-modules-advanced.md @@ -38,8 +39,85 @@ File not found IViewManagerCreateWithProperties while parsing versioned_docs/ver URL not found https://www.npmjs.com/package/rnpm-plugin-windows while parsing versioned_docs/version-0.60/getting-started.md (HTTP 403) URL not found https://www.npmjs.com/package/react-native-macos while parsing versioned_docs/version-0.78/rnm-getting-started.md (HTTP 403) URL not found https://www.npmjs.com/package/react-native-windows while parsing versioned_docs/version-0.80/new-architecture.md (HTTP 403) +URL not found https://www.npmjs.com/package/react-native-windows while parsing versioned_docs/version-0.82/new-architecture.md (HTTP 403) #fix-unbroken.js auto-generated do not edit this line or below +File not found new-architecture.md while parsing versioned_docs/version-0.82/app-publishing.md +File not found run-windows-cli.md while parsing versioned_docs/version-0.82/autolink-windows-cli.md +File not found new-architecture.md while parsing versioned_docs/version-0.82/config.md +File not found new-architecture.md while parsing versioned_docs/version-0.82/debugging-javascript.md +File not found run-windows-cli.md while parsing versioned_docs/version-0.82/debugging-javascript.md +File not found getting-started.md while parsing versioned_docs/version-0.82/getting-started.md +File not found init-windows-cli.md while parsing versioned_docs/version-0.82/getting-started.md +File not found new-architecture.md while parsing versioned_docs/version-0.82/getting-started.md +File not found autolink-windows-cli.md while parsing versioned_docs/version-0.82/getting-started.md +File not found native-platform.md while parsing versioned_docs/version-0.82/getting-started.md +File not found platform.md while parsing versioned_docs/version-0.82/getting-started.md +File not found rnw-dependencies.md while parsing versioned_docs/version-0.82/getting-started.md +File not found run-windows-cli.md while parsing versioned_docs/version-0.82/getting-started.md +File not found run-windows-cli.md while parsing versioned_docs/version-0.82/hermes.md +File not found new-architecture.md while parsing versioned_docs/version-0.82/ikeyboardprops-api-windows.md +File not found new-architecture.md while parsing versioned_docs/version-0.82/iviewwindowsprops-api-windows.md +File not found ikeyboardprops-api-windows.md while parsing versioned_docs/version-0.82/iviewwindowsprops-api-windows.md +File not found getting-started.md while parsing versioned_docs/version-0.82/native-platform-components.md +File not found native-platform-getting-started.md while parsing versioned_docs/version-0.82/native-platform-components.md +File not found codegen-windows-cli.md while parsing versioned_docs/version-0.82/native-platform-components.md +File not found native-platform-using.md while parsing versioned_docs/version-0.82/native-platform-components.md +File not found native-platform.md while parsing versioned_docs/version-0.82/native-platform-components.md +File not found platform.md while parsing versioned_docs/version-0.82/native-platform-components.md +File not found IReactPackageProvider-api-windows.md while parsing versioned_docs/version-0.82/native-platform-components.md +File not found getting-started.md while parsing versioned_docs/version-0.82/native-platform-getting-started.md +File not found init-windows-cli.md while parsing versioned_docs/version-0.82/native-platform-getting-started.md +File not found native-platform-components.md while parsing versioned_docs/version-0.82/native-platform-getting-started.md +File not found native-platform-modules.md while parsing versioned_docs/version-0.82/native-platform-getting-started.md +File not found rnw-dependencies.md while parsing versioned_docs/version-0.82/native-platform-getting-started.md +File not found run-windows-cli.md while parsing versioned_docs/version-0.82/native-platform-getting-started.md +File not found getting-started.md while parsing versioned_docs/version-0.82/native-platform-modules.md +File not found native-platform-getting-started.md while parsing versioned_docs/version-0.82/native-platform-modules.md +File not found new-architecture.md while parsing versioned_docs/version-0.82/native-platform-modules.md +File not found codegen-windows-cli.md while parsing versioned_docs/version-0.82/native-platform-modules.md +File not found native-platform-using.md while parsing versioned_docs/version-0.82/native-platform-modules.md +File not found native-platform.md while parsing versioned_docs/version-0.82/native-platform-modules.md +File not found platform.md while parsing versioned_docs/version-0.82/native-platform-modules.md +File not found IReactContext-api-windows.md while parsing versioned_docs/version-0.82/native-platform-modules.md +File not found IReactPackageProvider-api-windows.md while parsing versioned_docs/version-0.82/native-platform-modules.md +File not found autolink-windows-cli.md while parsing versioned_docs/version-0.82/native-platform-using.md +File not found native-platform-components.md while parsing versioned_docs/version-0.82/native-platform-using.md +File not found native-platform-modules.md while parsing versioned_docs/version-0.82/native-platform-using.md +File not found native-platform.md while parsing versioned_docs/version-0.82/native-platform-using.md +File not found platform.md while parsing versioned_docs/version-0.82/native-platform-using.md +File not found run-windows-cli.md while parsing versioned_docs/version-0.82/native-platform-using.md +File not found IReactPackageProvider-api-windows.md while parsing versioned_docs/version-0.82/native-platform-using.md +File not found getting-started.md while parsing versioned_docs/version-0.82/native-platform.md +File not found native-platform-getting-started.md while parsing versioned_docs/version-0.82/native-platform.md +File not found new-architecture.md while parsing versioned_docs/version-0.82/native-platform.md +File not found native-platform-components.md while parsing versioned_docs/version-0.82/native-platform.md +File not found native-platform-modules.md while parsing versioned_docs/version-0.82/native-platform.md +File not found native-platform-using.md while parsing versioned_docs/version-0.82/native-platform.md +File not found getting-started.md while parsing versioned_docs/version-0.82/new-architecture.md +File not found native-platform-getting-started.md while parsing versioned_docs/version-0.82/new-architecture.md +File not found flyout-component-windows.md while parsing versioned_docs/version-0.82/new-architecture.md +File not found init-windows-cli.md while parsing versioned_docs/version-0.82/new-architecture.md +File not found popup-component-windows.md while parsing versioned_docs/version-0.82/new-architecture.md +File not found glyph-component-windows.md while parsing versioned_docs/version-0.82/new-architecture.md +File not found getting-started.md while parsing versioned_docs/version-0.82/nuget.md +File not found init-windows-cli.md while parsing versioned_docs/version-0.82/nuget.md +File not found new-architecture.md while parsing versioned_docs/version-0.82/nuget.md +File not found supported-community-modules.md while parsing versioned_docs/version-0.82/nuget.md +File not found init-windows-cli.md while parsing versioned_docs/version-0.82/react-native-windows-cli.md +File not found autolink-windows-cli.md while parsing versioned_docs/version-0.82/react-native-windows-cli.md +File not found codegen-windows-cli.md while parsing versioned_docs/version-0.82/react-native-windows-cli.md +File not found run-windows-cli.md while parsing versioned_docs/version-0.82/react-native-windows-cli.md +File not found win10-compat.md while parsing versioned_docs/version-0.82/rnw-dependencies.md +File not found new-architecture.md while parsing versioned_docs/version-0.82/textinput-component-windows.md +File not found init-windows-cli.md while parsing versioned_docs/version-0.82/upgrade-app.md +File not found autolink-windows-cli.md while parsing versioned_docs/version-0.82/upgrade-app.md +File not found new-architecture.md while parsing versioned_docs/version-0.82/win10-compat.md +File not found customizing-SDK-versions.md while parsing versioned_docs/version-0.82/win10-compat.md +File not found assets/powershell-start-menu.png while parsing versioned_docs/version-0.82/win10-vm.md +File not found rnw-dependencies.md while parsing versioned_docs/version-0.82/win10-vm.md +File not found assets/reveal-surface-animation.gif while parsing versioned_docs/version-0.82/windowsbrush-and-theme.md +File not found assets/rnw-acrylic-surface.png while parsing versioned_docs/version-0.82/windowsbrush-and-theme.md File not found getting-started.md while parsing versioned_docs/version-0.81/getting-started.md File not found init-windows-cli.md while parsing versioned_docs/version-0.81/getting-started.md File not found new-architecture.md while parsing versioned_docs/version-0.81/getting-started.md diff --git a/website/pages/en/support.js b/website/pages/en/support.js index 321dc0cc6..c1f7bb4c5 100644 --- a/website/pages/en/support.js +++ b/website/pages/en/support.js @@ -14,13 +14,14 @@ The React Native for Windows (RNW) Team strives to provide full support for the | Version | Support Phase | Release Date | Active Support Start | Maintenance Support Start | End of Support | | -- | -- | -- | -- | -- | -- | | [main](https://www.npmjs.com/package/react-native-windows/v/canary) | [Canary](#canary-support) | *N/A* | *N/A* | *N/A* | *N/A* | -| [0.81](https://www.npmjs.com/package/react-native-windows/v/latest) | [Active](#active-support) | 12/19/2025 | 12/19/2025 | *TBD* | *TBD* | -| [0.80](https://www.npmjs.com/package/react-native-windows/v/v0.80-stable) | [Active](#active-support) | 10/28/2025 | 10/28/2025 | 01/20/2025 | 03/20/2026 | -| [0.79](https://www.npmjs.com/package/react-native-windows/v/v0.79-stable) | [Maintenance](#maintenance-support) | 06/17/2025 | 06/17/2025 | 11/30/2025 | 01/31/2026 | -| [0.78](https://www.npmjs.com/package/react-native-windows/v/v0.78-stable) | [Unsupported](#unsupported) | 02/27/2025 | 02/27/2025 | 07/31/2025 | 09/30/2025 | +| [0.82](https://www.npmjs.com/package/react-native-windows/v/latest) | [Active](#active-support) | 02/10/2026 | 02/10/2026 | *TBD* | *TBD* | +| [0.81](https://www.npmjs.com/package/react-native-windows/v/v0.81-stable) | [Active](#active-support) | 12/19/2025 | 12/19/2025 | 03/31/2026 | 05/31/2026 | +| [0.80](https://www.npmjs.com/package/react-native-windows/v/v0.80-stable) | [Maintenance](#maintenance-support) | 10/28/2025 | 10/28/2025 | 03/31/2026 | 05/31/2026 | +| [0.79](https://www.npmjs.com/package/react-native-windows/v/v0.79-stable) | [Unsupported](#unsupported) | 06/17/2025 | 06/17/2025 | 11/30/2025 | 01/31/2026 | + + + +##### Modifying your C++ RNW app + +1. You'll want to edit your `App`'s constructor in `App.cpp` with: + +```c++ +InstanceSettings().UseWebDebugger(false); +InstanceSettings().UseDirectDebugger(true); +``` + + + +##### Modifying your C# RNW app + +1. You'll want to edit your `App`'s constructor in `App.xaml.cs` with: + +```csharp +InstanceSettings.UseWebDebugger = false; +InstanceSettings.UseDirectDebugger = true; +``` + + + +2. Then simply re-build and launch your RNW app as usual. + +> For a new RNW app `UseDirectDebugger` defaults to `true` for Debug builds, and `false` for Release builds. + +#### Option 2: Using the Developer Menu + +Direct Debugging can also be enabled at runtime via the in-app Developer Menu. + +1. With your RNW app running, press `Ctrl+Shift+D` to invoke the Developer Menu +2. Click *Enable Direct JS Debugging* + +The app then should automatically refresh with Direct Debugging enabled. + +### Step 2: Connect a debugger + +The next step is to connect with your chosen debugger. + + + + + +#### Using the Edge Developer Tools + +You can direct debug RNW apps using the Hermes JS engine with Edge by using the [Edge Developer Tools](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/). + +> If you use Chrome, the process is similar for using the [Chrome Developer Tools](https://developer.chrome.com/docs/devtools/). + +1. Launch your RNW app (with Direct Debugging enabled and Metro running) +2. In Edge, open the URL `edge://inspect` +3. Make sure the box for *Discover network targets* is checked +4. Click the *Configure...* button next to *Discover network targets* +5. Under *Target discovery settings* add an entry for `localhost:8081` and click *Done* +6. Refresh the `edge://inspect` page +> Watch for a *Hermes React Native* entry to appear in the *Remote Target* section at the bottom of the page. Note that the *Remote Target* section itself may be hidden until a valid target is detected. + +7. Click on the *inspect* link under the *Hermes React Native* entry + +You should now be able to debug your RNW application. To set breakpoints you'll first need to find your app's JS source files via Metro's source map. + +1. Click on the *Sources* tab +2. Press `Ctrl+P` to invoke the *Open* pop-up +3. Find your target source file (manually or by typing its name) and open it +> Make sure that the file you open is being sourced from the source map from Metro, i.e. the file entry is tagged with `localhost:8081` under the file name + +You should now be able to set breakpoints in your app's JS source files. + +> **Important:** The *Filesystem* tab in the left sidebar normally lets you add you app's source folders to the "workspace" for easy browsing. However, files opened from the workspace will not allow you to set breakpoints correctly. You **must** open your app's source via the `Ctrl+P` method above for breakpoints to work. +> +> If you're trying to set a breakpoint and it's not working, double-check that the open file was opened via the source map. The tab's title should appear as an absolute file name, and its tool-tip should show the real path prefixed with `http://localhost:8081/`. + + + +#### Using Visual Studio (Chakra) + +You can direct debug RNW apps using the (default) Chakra JS engine with [Visual Studio](https://visualstudio.microsoft.com/)'s built-in Script debugger. + +1. Make sure you have Visual Studio installed +2. Open your project's Visual Studio solution file (i.e. `MyApp.sln`) +3. **Option A:** Let Visual Studio launch the app and start debugging + 1. Make sure that Metro is already running (i.e. `npx react-native start`) + 2. Make sure the desired *Configuration* (i.e. `Debug`) and *Platform* (i.e. `x64`) of your native app by setting the drop-downs in Visual Studio's top command bar + 3. In *Solution Explorer* right-click on your native app's project (i.e. `MyApp (Universal Windows)`) and select *Properties* + 1. For C++ RNW apps, open the *Configuration Properties > Debugging* page, set the *Debugger Type* to *Script Only*, then click *OK* + 2. For C# RNW apps, open the *Debug* tab, set the *Debugger type > Application process* to *Script*, then close the properties + 4. Click on *Debug* in the menu bar and select *Start Debugging* +4. **Option B:** Attach Visual Studio to the app that's already running + 1. Make sure that your native app and Metro is already running (i.e. using the [run-windows command](run-windows-cli.md)) + 2. Click on *Debug* in Visual Studio's menu bar and select *Attach to Process...* + 3. Find and select the native process for your app (not Metro) + 4. Make sure *Attach to:* is set to *Automatic: Script code* or *Script code* + > If *Attach to:* is set to something else, double check that *Script* is present in the *Type* column for your app's process. If it isn't, make sure you've enabled Direct Debugging in your app, and click the *Refresh* button. If *Script* is present under *Type* but not in *Attach to:*, click on the *Select...* button and try manually checking *Debug these code types: > Script*. + + 5. Click on the *Attach* button + +Once everything is running, you should be able to debug your RNW application. To set breakpoints, simply do so in your app's JS source files directly in Visual Studio. + +To see your app's JS source in Visual Studio, you can either: + +1. Open the files directly (via *Open > File...* in the *File* menu or by pressing `Ctrl+O`) OR +2. Looking for the files in the *Solution Explorer* sidebar under *`Solution 'MyApp'` > `Script Documents` > `file://...` > `script block` > `http://localhost:8081/...`* + +#### Using Visual Studio (Hermes) + +You can direct debug RNW apps using the Hermes JS engine with [Visual Studio](https://visualstudio.microsoft.com/) with the debugger from the *Node.js development* workload. + +1. Make sure you have Visual Studio installed with the *Node.js development* workload +2. Start Visual Studio without a solution file (*Continue without code*) +> **Important:** You should not have a solution file opened. There's a [known issue with trying to debug JS with your project's solution opened](https://github.com/microsoft/react-native-windows/issues/12842) that may be fixed, at which point this warning can be removed. + +3. **Option A:** Let Visual Studio launch the app and start debugging +> **Important:** Launching the app and starting direct debug with Hermes isn't supported in Visual Studio. + +4. **Option B:** Attach Visual Studio to the app that's already running + 1. Make sure that your native app and Metro is already running (i.e. using the [run-windows command](run-windows-cli.md)) + 2. Click on *Debug* in Visual Studio's menu bar and select *Attach to Process...* + 3. Make sure *Connection type:* is set to *JavaScript and TypeScript (Chrome DevTools/V8 Inspector)* + > If you don't see *JavaScript and TypeScript (Chrome DevTools/V8 Inspector)*, make sure you've installed the *Node.js development* workload for your version of Visual Studio. + + 4. Make sure *Connection target:* is set to `http://localhost:8081` + 5. Make sure *Attach to:* is set to *JavaScript and TypeScript* + 6. Find and select the *Hermes* from the process list + > If you don't see *Hermes* in the list, open a browser and navigate to `http://localhost:8081/json`. Copy the value of `webSocketDebuggerUrl` (i.e. something like `ws://[::1]:8081/inspector/debug?device=0&page=1`) and use that as the *Connection target* instead. + + 7. Click on the *Attach* button + +Once everything is running, you should be able to debug your RNW application. To set breakpoints, simply do so in your app's JS source files directly in Visual Studio. + +To see your app's JS source in Visual Studio, you can either: + +1. Open the files directly (via *Open > File...* in the *File* menu or by pressing `Ctrl+O`) OR +2. Looking for the files in the *Solution Explorer* sidebar under *`Solution 'MyApp'` > `Script Documents`* + + + +#### Using Visual Studio Code + +You can direct debug RNW apps using the Hermes JS engine with [VS Code](http://code.visualstudio.com/)'s built-in Node.js debugger. + +1. Make sure you have VS Code installed +2. Open your project's root folder in VS Code +3. Click on *Run* in VS Code's menu bar and select *Add Configuration...* +4. **Option A:** Let VS Code launch everything and start debugging +> **Important:** Launching everything and starting debugging isn't supported with VS Code's built-in Node.js debugger. + +5. **Option B:** Attach VS Code to Metro that's already running + 1. Depending on whether or not you already have a `launch.json` file, the drop-down will let you select *Node.js: Attach* (if it's available) or just *Node.js* + > If you don't see *Node.js*, try again without a code file opened in the editor. + + 2. A new (possibly incorrect) entry should appear in your `launch.json` file. The config will need to look like this (the `name` doesn't matter) to debug properly: + ```json + { + "name": "Attach", + "port": 8081, + "request": "attach", + "skipFiles": [ + "/**" + ], + "outFiles": [ + "${workspaceFolder}/**/*" + ], + "type": "node" + } + ``` + 3. Make sure that your native app and Metro is already running (i.e. using the [run-windows command](run-windows-cli.md)) + 4. Open the *Run and Debug* sidebar by clicking on the button in the sidebar or by pressing `Ctrl+Shift+D` + 5. Make sure the new config is selected at the top of the *Run and Debug* sidebar + 6. Click on the ▶️ button or press `F5` in VS Code + > Watch the *Call Stack* panel in the sidebar for *Attach: Remote Process* to indicate a successful debugger connection. Note, it may take VS Code a minute to scan your source before breakpoints will work properly. + +Once everything is running, you should be able to debug your RNW application. To set breakpoints, simply do so in your app's JS source files directly in VS Code. + +> Remember to save `launch.json` so you can reuse this debugging configuration in the future. + + + +#### Using Visual Studio Code with the React Native Tools + +You can direct debug RNW apps using the Hermes JS engine with [VS Code](http://code.visualstudio.com/) using the [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) extension. + +1. Make sure you have VS Code and the React Native Tools extension installed +2. Open your project's root folder in VS Code +3. Click on *Run* in VS Code's menu bar and select *Add Configuration...* then *React Native* +> If you don't see *React Native*, try again without a code file opened in the editor. + +4. **Option A:** Let VS Code launch everything and start debugging + 1. Depending on whether or not you already have a `launch.json` file, the drop-down will either: + 1. Provide a list of debug configurations. Check the box for *Debug Windows Hermes -Experimental* and click *OK*. OR + 2. Guide you through a series of prompts. Select *Debug application*, *Windows*, *Application in direct mode(Hermes)*. + 2. A new (possibly incorrect) entry should appear in your `launch.json` file. The config will need to look like this (the `name` doesn't matter) to debug properly: + ```json + { + "name": "Debug Windows Hermes - Experimental", + "cwd": "${workspaceFolder}", + "type": "reactnativedirect", + "request": "launch", + "platform": "windows" + } + ``` + 3. Make sure that Metro and your native app are **not** already running + 4. Open the *Run and Debug* sidebar by clicking on the button in the sidebar or by pressing `Ctrl+Shift+D` + 5. Make sure the new config is selected at the top of the *Run and Debug* sidebar + 6. Click on the ▶️ button or press `F5` in VS Code + > Watch VS Code's *Debug Console* output for a successful debugger connection. This can be very slow, but VS Code should automatically launch Metro, establish the debugger connection, then launch your native app to download the bundle. + +5. **Option B:** Attach VS Code to Metro that's already running + 1. Depending on whether or not you already have a `launch.json` file, the drop-down will either: + 1. Provide a list of debug configurations. Check the box for *Attach to Hermes application* and click *OK*. OR + 2. Guide you through a series of prompts. Select *Attach to application*, *Application in direct mode(Hermes)*, *Hermes engine*, `localhost`, `8081`. + 2. A new (possibly incorrect) entry should appear in your `launch.json` file. The config will need to look like this (the `name` doesn't matter) to debug properly: + ```json + { + "name": "Attach to Hermes application - Experimental", + "cwd": "${workspaceFolder}", + "type": "reactnativedirect", + "request": "attach" + } + ``` + 3. Make sure that your native app and Metro is already running (i.e. using the [run-windows command](run-windows-cli.md)) + 4. Open the *Run and Debug* sidebar by clicking on the button in the sidebar or by pressing `Ctrl+Shift+D` + 5. Make sure the new config is selected at the top of the *Run and Debug* sidebar + 6. Click on the ▶️ button or press `F5` in VS Code + > Watch the *Call Stack* panel in the sidebar for *Attach: Remote Process* to indicate a successful debugger connection. + +Once everything is running, you should be able to debug your RNW application. To set breakpoints, simply do so in your app's JS source files directly in VS Code. + +> Remember to save `launch.json` so you can reuse this debugging configuration in the future. + + + +## Web Debugging + +*Web Debugging* (also referred to as *Remote JS Debugging*) was the original JS debugging solution for RN and RNW projects. + + +It works by running your app's JS code within the JS engine of an external process, usually a web browser such as Edge (or Chrome). You're then able to debug your app using the development tools of that external process, i.e. the browser's web development tools. + +> Web Debugging requires the Metro Packager, as Metro proxies the connection between your native Windows app and the remote JS engine. + +> **Important:** Web Debugging was officially marked as deprecated in RN 0.73 and will be removed in a later release. + +### Web Debugging Tool Support + +| JavaScript Engine | Edge Developer Tools | Visual Studio Code
w/ React Native Tools | +|:------------------|:-:|:-:| +| Hermes (Default) | ✅ | ✅ | +| Chakra | ✅ | ✅ | + +> **Important:** As your code is run in the remote JS engine, the app's embedded engine is not used. This can cause your released app to behave differently when it *is* using the embedded engine. See [Web vs. Direct Debugging](#web-vs-direct-debugging) for details\. + +### Step 1: Enable Web Debugging + + + +Web Debugging can be enabled by setting `UseWebDebugger` property of your app's `InstanceSettings` during startup. + + + + + +#### Modifying your C# RNW app + + +1. You'll want to edit your `App`'s constructor in `App.xaml.cs` with: + +```csharp +InstanceSettings.UseWebDebugger = true; +InstanceSettings.UseDirectDebugger = false; +``` + + + +#### Modifying your C++ RNW app + + +1. You'll want to edit your `App`'s constructor in `App.cpp` with: + +```c++ +InstanceSettings().UseWebDebugger(true); +InstanceSettings().UseDirectDebugger(false); +``` + + + +2. Then simply re-build and launch your RNW app as usual. + +> Unless otherwise specified, for a new RNW app, `UseWebDebugger` defaults to `false`. + +### Step 2: Connect a debugger + +The next step is to connect to Metro with your chosen debugger / development tools. + +> This must happen before the native app attempts to download the JS bundle from Metro. If a debugger is not already attached, Metro will automatically attempt to set up the Edge Developer Tools. + + + + + +#### Using the Edge Developer Tools + +You can web debug within Edge by using the [Edge Developer Tools](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/). + +> If you use Chrome, the process is similar for using the [Chrome Developer Tools](https://developer.chrome.com/docs/devtools/). + +1. Launch your RNW app (with Web Debugging enabled and Metro running) +2. In Edge, open the URL http://localhost:8081/debugger-ui/ +> Metro may have already opened it, look for a *React Native Debugger* tab. + +3. Press `Ctrl+Shift+J` on the page to launch the Developer Tools + +You should now be able to debug your RNW application. To set breakpoints you'll find your app's JS source files in the *Sources* tab under *`debuggerWorker.js` > `localhost:8081` > `src/ui`*. + + + +#### Using Visual Studio Code with the React Native Tools + +You can web debug within [VS Code](http://code.visualstudio.com/) by using the [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) extension. + +> **Important**: You will not be able to connect VS Code to Metro if the Edge Developer Tools (or another debugger) is already connected. So double check you don't have any previous *React Native Debugger* browser tabs open before running these steps. + +1. Make sure you have VS Code and the React Native Tools extension installed +2. Open your project's root folder in VS Code +3. Click on *Run* in VS Code's menu bar and select *Add Configuration...* then *React Native* +> If you don't see *React Native*, try again without a code file opened in the editor. + +4. **Option A:** Let VS Code launch everything and start debugging + 1. Depending on whether or not you already have a `launch.json` file, the drop-down will either: + 1. Provide a list of debug configurations. Check the box for *Debug Windows* and click *OK*. OR + 2. Guide you through a series of prompts. Select *Debug application*, *Windows*, *Classic application*. + 2. A new (possibly incorrect) entry should appear in your `launch.json` file. The config will need to look like this (the `name` doesn't matter) to debug properly: + ```json + { + "name": "Debug Windows", + "cwd": "${workspaceFolder}", + "type": "reactnative", + "request": "launch", + "platform": "windows" + } + ``` + 3. Make sure that Metro, your native app, and/or any browser Developer Tools are **not** already running + 4. Make sure the new config is selected at the top of the *Run and Debug* sidebar + 5. Click on the ▶️ button or press `F5` in VS Code + > Watch VS Code's *Debug Console* output for a successful debugger connection. This can be very slow, but VS Code should automatically launch Metro, establish the debugger connection, then launch your native app to download the bundle. + +5. **Option B:** Attach VS Code to Metro that's already running + 1. Depending on whether or not you already have a `launch.json` file, the drop-down will either: + 1. Provide a list of debug configurations. Check the box for *Attach to packager* and click *OK*. OR + 2. Guide you through a series of prompts. Select *Attach to application*, *Classic application*, `localhost`, `8081`. + 2. A new (possibly incorrect) entry should appear in your `launch.json` file. The config will need to look like this (the `name` doesn't matter) to debug properly: + ```json + { + "name": "Attach to packager", + "cwd": "${workspaceFolder}", + "type": "reactnative", + "request": "attach" + } + ``` + 3. Make sure that only Metro is already running (i.e. `npx react-native start`) + 4. Make sure the new config is selected at the top of the *Run and Debug* sidebar + 5. Click on the ▶️ button or press `F5` in VS Code + > Watch VS Code's *Debug Console* output for a successful debugger connection. + + 6. Manually launch your native app + +Once everything is running, you should be able to debug your RNW application. To set breakpoints, simply do so in your app's JS source files directly in VS Code. + +> Remember to save `launch.json` so you can reuse this debugging configuration in the future. + +> *Important:* If you're having difficulty getting VS Code to connect with Web Debugging, double check you're not running any part of RNW (watch out for rogue `node.exe` processes) before starting the steps above. + + + +## Web vs. Direct Debugging + +As mentioned above, RNW supports both Web and Direct Debugging, and it's worth knowing when to use each. + +Web Debugging is the older, more well-established of the two debugging solutions. It relies on the powerful in-browser debugging tools already familiar to web developers. This reinforces RN's purpose of enabling web developers to build native apps with web technologies. + +However, Web Debugging is not without its limitations. The primary problem is that JS can behave slightly differently when running in different JS engines. As such, by developing (and testing) your app while using a browser to run the JS, you might miss bugs or other issues that only manifest when running your app normally with the embedded JS engine. + +This requires developers to double check all of their app's functionality in the release build, or risk situations where customers find bugs in production that aren't reproducible when using Web Debugging. + +Furthermore, some parts of RN, such as synchronous calls to native module methods, only work when running on the embedded JS engine. Such native methods won't work when using Web Debugging. + +With Direct Debugging, you're debugging your JS code in the same engine you ship with your final app. This removes that class of bugs caused by using a different engine while in development. + +However, Direct Debugging has its own limitations too. It is newer and therefore more likely to have setup and stability issues. Furthermore, the JS debugger you want to use might not support the JS engine you want your app to use. + +It is important to note, that while Web Debugging may be a sufficient for your needs now, both the RN and RNW teams are focusing future investment into the Direct Debugging experience. + +## Other Tools + +Here are some other tools you find useful while debugging your RNW apps. + +### React Developer Tools + +The [React Developer Tools](https://beta.reactjs.org/learn/react-developer-tools) can be used to inspect your app's React component hierarchy and perform performance profiling. It works in conjunction with either Web or Direct Debugging. + +1. Launch your RNW app (with Metro running) +2. Run `npx react-devtools` from the command line +3. With your RNW app running, press `Ctrl+Shift+D` to invoke the Developer Menu + +The React Developer Tools should detect the Developer Menu opening and automatically attach to your app. diff --git a/website/versioned_docs/version-0.82/getting-started.md b/website/versioned_docs/version-0.82/getting-started.md new file mode 100644 index 000000000..2c4f9e8e5 --- /dev/null +++ b/website/versioned_docs/version-0.82/getting-started.md @@ -0,0 +1,136 @@ +--- +id: version-0.82-getting-started +title: Get Started with Windows +original_id: getting-started +--- + +> **Important:** Starting with React Native Windows 0.82, the legacy Paper architecture has been completely removed. All apps now run exclusively on the [New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page). If you haven't already migrated your app to Fabric, you must do so before upgrading to 0.82. See the [New Architecture migration guide](new-architecture.md) for details. + +This guide will help you get started on setting up your very first React Native for Windows app. + +Make sure you have installed all of the [development dependencies](rnw-dependencies.md). + +For information around how to set up React Native, see the [React Native Getting Started Guide](https://reactnative.dev/docs/getting-started). + +## Create a new React Native project + +Call the following from the place where you want your project directory to live: + + + + + + + + + +```bat +npx --yes @react-native-community/cli@latest init --version "^0.82.0" +``` + +### Navigate into this newly created directory + +The command will create your project in a new sub-directory, which you must enter before continuing: + +```bat +cd +``` + +### Add React Native Windows to your project's dependencies + + + + + + +Next you'll want to add `react-native-windows` as a dependency: + + + + + +```bat +yarn add react-native-windows@^0.82.0 +``` + + + +```bat +npm install --save react-native-windows@^0.82.0 +``` + + + +### Initialize the React Native Windows native code and projects + +Lastly, initialize the React Native for Windows application with the [init-windows command](init-windows-cli.md): + +```bat +npx react-native init-windows --overwrite +``` + +> **Metro Note:** React Native Windows overwrites the app project's `metro.config.js` file to enable Windows support. If you are starting a new project, overwriting React Native's default `metro.config.js` should have no impact. However, if you have previously modified your `metro.config.js` file, please make sure to back up and re-apply your modifications after adding React Native Windows. + +## Running a React Native Windows App + +> Make sure a browser is launched and running before running a React Native Windows app. +> Also ensure your system meets all the [requirements](rnw-dependencies.md) to build a Windows app as well. + +- Without Using Visual Studio + + In your React Native Windows project directory, run the [run-windows command](run-windows-cli.md): + + ```bat + npx react-native run-windows + ``` + + A new Command Prompt window will open with the React packager as well as your React Native for Windows app. This step may take a while during first run since it involves building the entire project and all dependencies. You can now start developing! :tada: + +- Using Visual Studio + + - From the root of the project directory, run the [autolink-windows command](autolink-windows-cli.md), which will automatically link your app's dependencies: + ```bat + npx react-native autolink-windows + ``` + - Open the solution file in the application folder in Visual Studio (e.g., `AwesomeProject/windows/AwesomeProject.sln` if you used `AwesomeProject` as ``) + - Select the `Debug` configuration and the `x64` platform from the combo box controls to the left of the `Run` button and underneath the `Team` and `Tools` menu item. + - Run `yarn start` (or `npm start`) from your project directory, and wait for the React Native packager to report success. + - Click the `Run` button to the right of the platform combo box control in VS, or select the `Debug`->`Start without Debugging` menu item. You now see your new app and Chrome should have loaded `http://localhost:8081/debugger-ui/` in a new tab. Press `F12` or `Ctrl+Shift+I` in Chrome to open its Developer Tools. :tada: + +- With VS Code + - Open your applications folder in VS Code. + - Install the [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) plugin for VS Code. + - Create a new file in the applications root directory, `.vscode/launch.json` and paste the following configuration: + ```json + { + "version": "0.2.0", + "configurations": [ + { + "name": "Debug Windows", + "cwd": "${workspaceFolder}", + "type": "reactnative", + "request": "launch", + "platform": "windows" + } + ] + } + ``` + - Press `F5` or navigate to the debug menu (alternatively press `Ctrl+Shift+D`) and in the Debug drop-down select "Debug Windows" and press the green arrow to run the application. + +## Authoring Native Modules + +See [Native Platform: Overview](native-platform.md). + +## Building a standalone React Native Windows App + +Follow these steps to build a version of your app that you can install or publish to the store. This version will package your bundle and assets into the APPX package so you don't need to run Metro. + +- Open the solution in Visual Studio +- Select the Release configuration from the Configuration Manager drop-down. +- Build the solution. You can now launch without first launching Metro. +- If you want to build an APPX package to share or publish, use the **Project** > **Publish** > **Create App Packages...** option. + +> The Debug configuration uses the Web Debugger by default, which means the application's JavaScript code runs in Chrome.
+> If you're getting different runtime behavior between the Release and Debug configurations, consider disabling the `UseWebDebugger` setting in [`App.cpp`](https://github.com/microsoft/react-native-windows/blob/6b415659aa017dbc41e3f28e817fb768a8e80435/vnext/template/cpp-app/src/App.cpp#L30) or [`App.xaml.cs`](https://github.com/microsoft/react-native-windows/blob/6b415659aa017dbc41e3f28e817fb768a8e80435/vnext/template/cs-app/src/App.xaml.cs#L20) to get the same behavior in the Debug configuration. + +See also this article for additional details: https://techcommunity.microsoft.com/t5/windows-dev-appconsult/getting-started-with-react-native-for-windows/ba-p/912093# diff --git a/website/versioned_docs/version-0.82/hermes.md b/website/versioned_docs/version-0.82/hermes.md new file mode 100644 index 000000000..d93ef7603 --- /dev/null +++ b/website/versioned_docs/version-0.82/hermes.md @@ -0,0 +1,100 @@ +--- +id: version-0.82-hermes +title: Hermes on Windows +original_id: hermes +--- + +# Hermes + +The [Hermes](https://hermesengine.dev/) engine is an open source JavaScript engine created by Facebook to optimize building and running React Native applications. + +To learn more about what it is and how to use it, check out the [React Native](https://reactnative.dev/docs/hermes#docsNav) documentation for it. + +## Hermes on Windows: + +Hermes is supported on Windows, generally providing better performance characteristics than the default Chakra engine. + +### Enabling Hermes for new projects + +Hermes is enabled by default for React Native Windows projects. + +### Using Hermes in an existing project + +Set the `UseHermes` property to `true` in the `ExperimentalFeatures.props` file in your project's `windows` directory: + +```xml + + ... + true + +``` + +### Disabling Hermes + +To revert back to using Chakra, set the `UseHermes` property to `false` in the `ExperimentalFeatures.props` file in your project's `windows` directory: + +```xml + + ... + false + +``` + +### Known limitations + +- Hermes dll is not signed by Microsoft. + +## Hermes Inspector + +*React Native for Windows* with *Hermes engine* supports direct JavaScript runtime inspection using tools such as Chrome or [Edge `devtools`](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/), [`VSCode` debugger](https://code.visualstudio.com/Docs/editor/debugging), [Flipper](https://fbflipper.com/) etc. by implementing an in-process Chrome Debug Protocol server. +Please note that it is fundamentally different from "Remote JS Debugging", which loads the JavaScript bundle into a remote Chrome browser session with duplex communication over IPC channels. + +We share the implementation (code and design) with other platforms wherever possible. All the external endpoints, APIs and protocols should be identical to *React Native* environments on other platforms. +Hence, we expect most tooling available on other platforms to just work on Windows. But, as of now, we have tested only with Chrome and Edge `devtools`. + +### Steps to enable direct debugging + +1. Initialize React Native Host, + - Turn on `DeveloperSupport` + - Turn on `FastRefresh` + - Turn off `WebDebugger` + - Turn on `Direct Debugging` +2. Ensure Dev-Server is running +3. Start the application + +After the app has booted, + +4. Navigate to `edge://inspect` in Edge browser or `chrome://inspect` in Chrome browser +5. Enable **Discover network targets** and **configure** the target discovery settings to include `localhost:8081` (or wherever the metro server is running) +6. Within a few seconds "Hermes React Native" should appear on the page as a remote target +7. Click on the **inspect** link to launch the `devtools` page +8. Click `Ctrl+P` to open source files and set break points +9. Alternatively, you can insert `debugger` statements in source code to break on specific locations + +In order to break on locations during boot, you can either + +- Add statements into the boot sequence to pause the runtime waiting for debugger to connect. +```js +debugger; +``` +- Set a break point and refresh the bundle through the Dev Server. The runtime will wait for debugger to attach. + + +### Steps to enable heap profiling + +Follow steps 1-7 from above, and then +1. Click on the "Memory" tab in the inspector +2. Heap snapshots and instrumented allocations should be working. + +### Enable debugging/profiling on release builds + +We keep the inspector turned off on release builds by default. If you want to debug or profile release builds, set the MSBuild property `EnableHermesInspectorInReleaseFlavor` to `'true'` when building the platform with the [run-windows command](run-windows-cli.md), i.e.: + +```bash +npx react-native run-windows --msbuildprops EnableHermesInspectorInReleaseFlavor=true +``` + +### Known Issues + +1. CPU Sampling profiler currently doesn't work. + diff --git a/website/versioned_docs/version-0.82/ikeyboardprops-api-windows.md b/website/versioned_docs/version-0.82/ikeyboardprops-api-windows.md new file mode 100644 index 000000000..9bbfa4433 --- /dev/null +++ b/website/versioned_docs/version-0.82/ikeyboardprops-api-windows.md @@ -0,0 +1,99 @@ +--- +id: version-0.82-ikeyboardprops-api +title: IKeyboardProps +original_id: ikeyboardprops-api +--- + +> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md). + +When developing for a Windows device, the likelihood of you needing to support a rich keyboarding experience in your app is very high - this API allows you to customize and control how keyboarding works on your custom or native components. + +``` +const App = class App extends React.Component { + state = { + lastKeyDown + } + + private _onKeyDown = (event: IKeyboardEvent) => { + this.setState({ lastKeyDown: event.nativeEvent.key }); + }; + + render() { + return ( + + ); + } +} + +export default App; +``` + +# Reference + +## Methods + +### ```onKeyDown()``` + +``` +static onKeyDown() +``` + +Event fires once when a key is pressed. + +### ```onKeyDownCapture()``` + +``` +static onKeyDownCapture() +``` + +### ```OnKeyUp()``` + +``` +static OnKeyUp() +``` + +Event fires once when a key is released. + +### ```OnKeyUpCapture()``` + +``` +static OnKeyUpCapture() +``` + +### ```eventPhase``` + +``` +enum eventPhase +``` + +Enumeration of types of keyboard event phases. +Possible values: + +- `None` +- `Capturing` +- `AtTarget` +- `Bubbling` + +### ```keyDownEvents``` + +``` +IHandledKeyboardEvent[] keyDownEvents +``` + +Array of key down events currently being handled. + +### ```keyUpEvents``` + +``` +IHandledKeyboardEvent[] keyUpEvents +``` + +Array of key up events currently being handled. + +### ```HandledEventPhase``` + +``` +enum HandledEventPhase +``` + +The currently handled event phase. diff --git a/website/versioned_docs/version-0.82/init-windows-cli.md b/website/versioned_docs/version-0.82/init-windows-cli.md new file mode 100644 index 000000000..21a7c46d8 --- /dev/null +++ b/website/versioned_docs/version-0.82/init-windows-cli.md @@ -0,0 +1,69 @@ +--- +id: version-0.82-init-windows-cli +title: react-native init-windows +original_id: init-windows-cli +--- + +This guide will give you more information on the `init-windows` command of the React Native Windows CLI. + +## `init-windows` + +The `init-windows` CLI command is used to (re-)initialize a new React Native for Windows project inside an existing React Native project. + +### Usage +Initializes a new React Native for Windows project from a given template. + +```bat +npx react-native init-windows +``` + +### Options + +Here are the options that `react-native init-windows` takes: + +| Option | Input Type | Description | +|-----------------------|------------|--------------------------------------------------| +| `--logging` | boolean | Verbose output logging | +| `--template` | string | Specify the template to use (default: `cpp-app`) | +| `--name` | string | The native project name. Defaults to the name property in `app.json` or `package.json` | +| `--namespace` | string | The native project namespace, expressed using dots as separators, i.e. `Level1.Level2.Level3`. Defaults to the same as name | +| `--overwrite` | boolean | Overwrite any existing files without prompting | +| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI | +| `--list` | | Shows a list with all available templates with their descriptions. | +| `-h`, `--help` | boolean | Display help for command | + +### Default Options and Re-initializing Projects + +After running, the `init-windows` command will save the `name`, `namespace` and `template` configuration in the project's `package.json`: + +```json +"react-native-windows": { + "init-windows": { + "name": "MyApp", + "namespace": "MyApp", + "template": "cpp-app" + } + } +``` + +If you later repeat the `init-windows` command to re-initialize a Windows project, without specifying any of those options, the command will default to any saved values. Among other things, this means you can safely re-run `init-windows` without it automatically changing your project to a different template (i.e. if your project is an Old Architecture app, `init-windows` won't force you to migrate to the New Architecture). + +If you *want* to change the value (say, you *do* want to migrate to a new template) just explicitly (re-)specify the option when running `init-windows`. + +## Templates + +The following templates are available to `init-windows` and can by manually specified with the `--template` option (i.e. `--template cpp-lib`): + +| Template | Name | Description | +|:-:|:--|:--| +| `cpp-app` | React Native Windows Application (WinAppSDK, C++) | `[Default]` A RNW app built in C++ and targeting WinAppSDK | +| `cpp-lib` | React Native Windows Library (C++) | A RNW (Turbo) Native Module built in C++ | + +## Telemetry Notice + +This command sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details. + +The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices. + +This data collection notice only applies to the process of running the react-native-windows CLI commands. + \ No newline at end of file diff --git a/website/versioned_docs/version-0.82/iviewwindowsprops-api-windows.md b/website/versioned_docs/version-0.82/iviewwindowsprops-api-windows.md new file mode 100644 index 000000000..6cdd06bef --- /dev/null +++ b/website/versioned_docs/version-0.82/iviewwindowsprops-api-windows.md @@ -0,0 +1,35 @@ +--- +id: version-0.82-iviewwindowsprops-api +title: IViewWindowsProps +original_id: iviewwindowsprops-api +--- + +> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md). + +This extends the [View Props](https://reactnative.dev/docs/view#props) and [`IKeyboardProps`](ikeyboardprops-api-windows.md) APIs. + +# Reference + +## Methods + +### `accessibilityPosInSet` + +Indicates to accessibility services that the Component is within a set and has the given numbered position. + +| type | required | +|:--|:--| +| number | No | + +### `accessibilitySetSize` + +Indicates to accessibility services that the Component is within a set with the given size. + +| type | required | +|:--|:--| +| number | No | + +### `children` + +| type | required | +|:--|:--| +| any | No | diff --git a/website/versioned_docs/version-0.82/metro-config-out-tree-platforms.md b/website/versioned_docs/version-0.82/metro-config-out-tree-platforms.md new file mode 100644 index 000000000..ee8589c90 --- /dev/null +++ b/website/versioned_docs/version-0.82/metro-config-out-tree-platforms.md @@ -0,0 +1,95 @@ +--- +id: version-0.82-metro-config-out-tree-platforms +title: Metro config for out of tree platforms +original_id: metro-config-out-tree-platforms +--- + +How to setup and diagnose issues with metro config for `react-native-macos` and `react-native-windows`. Many of the instructions within this document may refer just to `react-native-windows`, but the steps apply to `react-native-macos` in the same way. + +# Version requirements + +The information here only applies to versions of `react-native-macos` **>=0.62.11** and `react-native-windows` **>=0.62.0**. It is also required that you have `@react-native-community/cli` **>=4.9.0**. Older versions require a much more complex configuration which is not covered by this document. + +# What does the metro config for macOS/Windows need to do + +The way that `react-native-macos` and `react-native-windows` provide an implementation for `react-native` is by providing an additional copy of the `react-native` JavaScript files that implement their respective platforms. This JavaScript code is not included in the `react-native` package. When you do an `import from 'react-native'` normally metro will look for `node_modules/react-native` somewhere up the file path to file that module. Unfortunately when using `react-native-macos` or `react-native-windows` this will return the wrong JavaScript code. A simple solution might be to add a metro-config that includes +```js +resolver { + extraNodeModules: { + 'react-native': + } +} +``` + +While that would enable metro to find the correct JavaScript files when building a windows bundle, that config would not work for macOS, or iOS and Android. Instead what we really need is for metro to resolve `react-native` differently depending on which platform is being bundled at the time. + +The solution is to provide metro a custom resolver that accounts for the current platform being resolved. As of `@react-native-community/cli@4.9.0` a [change](https://github.com/react-native-community/cli/pull/1115) was added to the react-native CLI to configure metro with a custom resolver that does just that. + + +# Diagnosing metro config issues + +The usual way that these show up is a failure something like + +``` +Error: Unable to resolve module `./Libraries/Components/AccessibilityInfo/AccessibilityInfo` from +``` + +Its usually an import to `AccessibilityInfo` that fails, this is because this is the first module that `react-native` itself tries to resolve, which only includes a `.ios` and `.android` version of the file within `react-native`. + + +## Reset your metro cache + +Sometimes after bumping package versions or modifying your metro config, the metro cache can get out of sync. A simple thing to try is resetting metro's file cache. This can be done by running `yarn start --reset-cache`. + + +## Verify the platform is installed and hooked into the CLI + +Run `npx react-native config`. Look at the output and verify that the JSON contains either the `platforms.macos.npmPackageName` property or the `platforms.windows.npmPackageName` property (or both) depending on which platform you are using: +```json +{ + ... + "platforms": { + "ios": {}, + "android": {}, + "macos": { + "npmPackageName": "react-native-macos" + }, + "windows": { + "npmPackageName": "react-native-windows" + } + }, + ... +} +``` + +## If in a mono-repo, verify that react-native-macos/react-native-windows is not in your exclusionList + +You can run `node -p require.resolve('react-native-windows')` if you are not sure where `react-native-windows` is installed. Ensure that the `react-native-windows` folder is not included within the exclusionList in your `metro.config.js`. + +## Verify that react-native-macos/react-native-windows is in your `watchFolders` + +By default metro config will see all files within your package's folder. Many package managers, especially when running in monorepos (yarn workspaces etc) will hoist packages to a location outside of the package's local file structure. In this case you may need to add addition folders to metros watch list. This can be done adding to metro config: + +```js + watchFolders: [ + // Include hoisted modules + path.resolve(__dirname, '../..', 'node_modules'), + ], +``` +The file location above should include the path to `react-native-windows` that is returned by the `node -p require.resolve('react-native-windows')`. + +## If your setup includes symlinks + +Various package managers may create symlinks within `node_modules`. Metro does not support following symlinks, so if `node_modules/react-native-windows` is a symlink metro will not be able to find it. If that is the case, you can add +```js +resolver { + extraNodeModules: { + 'react-native-windows': + } +} +``` +to your metro config to notify metro of the real location of `react-native-windows`. + +## Reset your cache again + +If you were following these steps in order, you probably made a bunch of changes to your metro config file. Have you tired resetting the metro cache again? `yarn start --reset-cache` diff --git a/website/versioned_docs/version-0.82/migration-guide.md b/website/versioned_docs/version-0.82/migration-guide.md new file mode 100644 index 000000000..d40bbaa4a --- /dev/null +++ b/website/versioned_docs/version-0.82/migration-guide.md @@ -0,0 +1,146 @@ +--- +id: version-0.82-migration-guide +title: Migration Guide +original_id: migration-guide +--- + +### React Native Windows — Migration from Paper (Old Architecture) to Fabric (New Architecture) - Sample Calculator App + + +### Introduction + +React Native 0.80 introduces Fabric as the default renderer and completes the transition to the New Architecture (Fabric + TurboModules). For React Native Windows (RNW), this migration replaces the legacy Paper architecture with a modern rendering pipeline that improves performance and memory usage. + +> **Note:** This documentation references RNW v0.80, since Fabric becomes the default renderer starting with this version. However, the migration guide can be generally referred to for migrating from Paper to Fabric beginning with RNW versions supporting Fabric (starting RNW v0.74). + +### Key Concepts + + +- Paper (Old Architecture): Legacy renderer that uses UIManager and bridge-based communication between JS and native. + +- Fabric (New Architecture): Modern concurrent renderer built on React Fiber and JSI. + +- TurboModules: New native module system that replaces the old bridge-based modules with JSI bindings. + +- RNW cpp-app Template: Default Windows template for new-architecture (Fabric) apps using C++/WinAppSDK. + +- RNW old-uwp/cpp-app Template: Legacy UWP template used for Paper-based (old architecture) apps. + + +### Prerequisites + +- Node.js ≥ 18.x + - React Native CLI ≥ 13.x + - Visual Studio 2022 (v17.10 or later) + - Windows SDK ≥ 10.0.22621.0 + - Existing RNW app running on RN < 0.80 (Paper architecture) + +Run yarn install after every update of package.json file + +### RNW App Migration + +About the App: + +For the purposes of this migration guide, we will use the sample Calculator app from the [React-native-windows-samples repository](https://github.com/microsoft/react-native-windows-samples). This Calculator app demonstrates a straightforward React Native for Windows project implemented in C++/WinRT, making it well-suited for illustrating the steps required to move from the legacy Paper architecture to the modern Fabric architecture. The app covers basic UI, native modules, and integration patterns typical in RNW projects, providing a practical reference as you follow each migration step. + +You can view the Calculator app's source code at [react-native-windows-samples/samples/Calculator/cppwinrt](https://github.com/microsoft/react-native-windows-samples/tree/9e5d850e843acc2ff060fbd64673511cc67265f9/samples/Calculator/cppwinrt) and examine the full migration changes in the pull request diff [migrate calculator by anupriya13 · PR #1092](https://github.com/microsoft/react-native-windows-samples/pull/1092/files#diff-12ccc26d0186ecea507053fb04c1d4eac13aea210e5e1e95332e9add88940971). This real-world example enables you to compare the project structure and dependencies before and after the migration, making it easier to understand and replicate the process in your own RNW apps. + + + +Repo: [react-native-windows-samples/samples/Calculator/cppwinrt at main · microsoft/react-native-windows-samples](https://github.com/microsoft/react-native-windows-samples/tree/main/samples/Calculator/cppwinrt) + +Sample Diff: [migrate calculator by anupriya13 · Pull Request #1092 · microsoft/react-native-windows-samples](https://github.com/microsoft/react-native-windows-samples/pull/1092/files#diff-12ccc26d0186ecea507053fb04c1d4eac13aea210e5e1e95332e9add88940971) + +Before you migrate confirm few things on your Paper project re-confirm that your project is using Paper architecture by checking the package.json init-window section + + +### Steps Followed to Migrate to New Architecture (Fabric) +- Upgrade Dependencies: Update package.json to use React Native 0.80 and run: + ```bash + npm install + ``` + or + ```bash + yarn install + ``` + (Reference - [react-native-windows-samples/samples/Calculator/cppwinrt/package.json at 9e5d850e843acc2ff060fbd64673511cc67265f9 · microsoft/react-native-windows-samples](https://github.com/microsoft/react-native-windows-samples/blob/9e5d850e843acc2ff060fbd64673511cc67265f9/samples/Calculator/cppwinrt/package.json)) + +- Delete the Existing Windows Directory: + ```bash + rm -rf windows + ``` + +- Update Template in package.json: Set `"template": "cpp-app"` to use the new architecture template. + +- Run: + ```bash + yarn install + ``` + +- Reinitialize the Windows Project: + ```bash + npx react-native init-windows --template cpp-app + ``` + +- Run the Application: + ```bash + npx @react-native-community/cli run-windows + ``` + + +You will see new files created / updated inside windows directory + +No JS/TSX changes needed in src as Calculator uses basic components. + + +Commit Paper to Fabric: [migrate calculator by anupriya13 · Pull Request #1092 · microsoft/react-native-windows-samples](https://github.com/microsoft/react-native-windows-samples/pull/1092/commits/773c0ddec708083ab3fbd93dca08acfe0aa408aa) + +### Reverting to Old Architecture (Paper) + +In case you encounter issues migrating to Fabric or due to unsupported controls or properties in Fabric please refer to below steps to revert back to Paper architecture. If you encounter missing properties, please open an issue: https://github.com/microsoft/react-native-windows/issues + +- Delete the Windows Directory: + ```bash + rm -rf windows + ``` + +- Update Template in package.json: Set `"template": "old/uwp-cpp-app"`. (Reference -[react-native-windows-samples/samples/Calculator/fabric/package.json at 9e5d850e843acc2ff060fbd64673511cc67265f9 · microsoft/react-native-windows-samples](https://github.com/microsoft/react-native-windows-samples/blob/9e5d850e843acc2ff060fbd64673511cc67265f9/samples/Calculator/fabric/package.json)) + +- Run: + ```bash + yarn + ``` + +- Reinitialize the Old Architecture Project: + ```bash + npx react-native init-windows --template old/uwp-cpp-app + ``` + +- Run the App: + ```bash + npx @react-native-community/cli run-windows + ``` + + + +Commit Fabric to Paper for reference: [migrate calculator by anupriya13 · Pull Request #1092 · microsoft/react-native-windows-samples](https://github.com/microsoft/react-native-windows-samples/pull/1092/commits/450baba033b9c1f0e9b9e882bee91954f03767a1) + +### Third-Party Modules and Community Libraries [Out of Scope for Calculator] + +When migrating to the New Architecture (Fabric), it's important to verify that all third-party or community modules used in your project are compatible with the new architecture. Modules developed for the old Paper bridge may not function correctly without Fabric support. + +Before using any external module: + + Check the module's documentation or GitHub repository for Fabric or TurboModule support. + +Prefer modules that explicitly state compatibility with React Native 0.80 or higher. + +If the module is not updated, consider alternative libraries or maintain your own fork until Fabric support is added. + +### Flyout / Popup Behavior Update [Out of Scope for Calculator] + +In the New Architecture RNW, the Flyout and Popup components have been updated to align with the Modal API for better cross-platform consistency. Any previous usage of Flyout or Popup should be reviewed and replaced with the new Modal-based implementation, ensuring proper layering, dismissal, and accessibility behavior. + +### Conclusion + +Migrating from Paper to Fabric in React Native Windows modernizes your project, improves performance, and prepares your app for future React Native releases. Reverting to the old architecture is simple if required. diff --git a/website/versioned_docs/version-0.82/native-api/ActivityIndicatorComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/ActivityIndicatorComponentView-api-windows.md new file mode 100644 index 000000000..5f22b3f9c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ActivityIndicatorComponentView-api-windows.md @@ -0,0 +1,11 @@ +--- +id: version-0.82-ActivityIndicatorComponentView +title: ActivityIndicatorComponentView +original_id: ActivityIndicatorComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/AnimationClass-api-windows.md b/website/versioned_docs/version-0.82/native-api/AnimationClass-api-windows.md new file mode 100644 index 000000000..018274fcd --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/AnimationClass-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-AnimationClass +title: AnimationClass +original_id: AnimationClass +--- + +Kind: `enum` + +| Name | Value | Description | +|--|--|--| +|`None` | 0x0 | | +|`ScrollBar` | 0x1 | | +|`ScrollBarThumbHorizontal` | 0x2 | | +|`ScrollBarThumbVertical` | 0x3 | | +|`SwitchThumb` | 0x4 | | + +## Referenced by +- [`IVisual`](IVisual) diff --git a/website/versioned_docs/version-0.82/native-api/BackNavigationHandlerKind-api-windows.md b/website/versioned_docs/version-0.82/native-api/BackNavigationHandlerKind-api-windows.md new file mode 100644 index 000000000..d917a0d44 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/BackNavigationHandlerKind-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-BackNavigationHandlerKind +title: BackNavigationHandlerKind +original_id: BackNavigationHandlerKind +--- + +Kind: `enum` + +| Name | Value | Description | +|--|--|--| +|`JavaScript` | 0x0 | | +|`Native` | 0x1 | | + +## Referenced by +- [`QuirkSettings`](QuirkSettings) diff --git a/website/versioned_docs/version-0.82/native-api/BackfaceVisibility-api-windows.md b/website/versioned_docs/version-0.82/native-api/BackfaceVisibility-api-windows.md new file mode 100644 index 000000000..8839368be --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/BackfaceVisibility-api-windows.md @@ -0,0 +1,16 @@ +--- +id: version-0.82-BackfaceVisibility +title: BackfaceVisibility +original_id: BackfaceVisibility +--- + +Kind: `enum` + +| Name | Value | Description | +|--|--|--| +|`Inherit` | 0x0 | | +|`Visible` | 0x1 | | +|`Hidden` | 0x2 | | + +## Referenced by +- [`IVisual`](IVisual) diff --git a/website/versioned_docs/version-0.82/native-api/CallFunc-api-windows.md b/website/versioned_docs/version-0.82/native-api/CallFunc-api-windows.md new file mode 100644 index 000000000..4ebd5f606 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/CallFunc-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-CallFunc +title: CallFunc +original_id: CallFunc +--- + +Kind: `delegate` + +Function that acts on a JsiRuntime, provided as the argument to the function. ABI safe version of facebook::react::CallFunc in CallInvoker.h. Most direct usage of this should be avoided by using ReactContext.CallInvoker. + +## Invoke +void **`Invoke`**(Object runtime) + +## Referenced by +- [`CallInvoker`](CallInvoker) diff --git a/website/versioned_docs/version-0.82/native-api/CallInvoker-api-windows.md b/website/versioned_docs/version-0.82/native-api/CallInvoker-api-windows.md new file mode 100644 index 000000000..645ba7f71 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/CallInvoker-api-windows.md @@ -0,0 +1,19 @@ +--- +id: version-0.82-CallInvoker +title: CallInvoker +original_id: CallInvoker +--- + +Kind: `class` + +CallInvoker used to access the jsi runtime. Most direct usage of this should be avoided by using ReactContext.CallInvoker. + +## Methods +### InvokeAsync +void **`InvokeAsync`**([`CallFunc`](CallFunc) func) + +### InvokeSync +void **`InvokeSync`**([`CallFunc`](CallFunc) func) + +## Referenced by +- [`IReactContext`](IReactContext) diff --git a/website/versioned_docs/version-0.82/native-api/CharacterReceivedRoutedEventArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/CharacterReceivedRoutedEventArgs-api-windows.md new file mode 100644 index 000000000..29d948296 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/CharacterReceivedRoutedEventArgs-api-windows.md @@ -0,0 +1,25 @@ +--- +id: version-0.82-CharacterReceivedRoutedEventArgs +title: CharacterReceivedRoutedEventArgs +original_id: CharacterReceivedRoutedEventArgs +--- + +Kind: `interface` + +Implements: [`RoutedEventArgs`](RoutedEventArgs) + +## Properties +### Handled + bool `Handled` + +### KeyCode +`readonly` int `KeyCode` + +### KeyStatus +`readonly` [`PhysicalKeyStatus`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Input.PhysicalKeyStatus) `KeyStatus` + +### KeyboardSource +`readonly` [`KeyboardSource`](KeyboardSource) `KeyboardSource` + +## Referenced by +- [`ComponentView`](ComponentView) diff --git a/website/versioned_docs/version-0.82/native-api/Color-api-windows.md b/website/versioned_docs/version-0.82/native-api/Color-api-windows.md new file mode 100644 index 000000000..8ba04fe3c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/Color-api-windows.md @@ -0,0 +1,48 @@ +--- +id: version-0.82-Color +title: Color +original_id: Color +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Methods +### AsBrush +[`CompositionBrush`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.CompositionBrush) **`AsBrush`**([`Theme`](Theme) theme) + +> **EXPERIMENTAL** + +### AsWindowsColor +[`Color`](https://docs.microsoft.com/uwp/api/Windows.UI.Color) **`AsWindowsColor`**([`Theme`](Theme) theme) + +> **EXPERIMENTAL** + +### Black +`static` [`Color`](Color) **`Black`**() + +> **EXPERIMENTAL** + +### Equals +bool **`Equals`**([`Color`](Color) color) + +> **EXPERIMENTAL** + +### ReadValue +`static` [`Color`](Color) **`ReadValue`**([`IJSValueReader`](IJSValueReader) reader) + +> **EXPERIMENTAL** + +### Transparent +`static` [`Color`](Color) **`Transparent`**() + +> **EXPERIMENTAL** + +### WriteValue +`static` void **`WriteValue`**([`IJSValueWriter`](IJSValueWriter) writer, [`Color`](Color) color) + +> **EXPERIMENTAL** + +## Referenced by +- [`ViewProps`](ViewProps) diff --git a/website/versioned_docs/version-0.82/native-api/ComponentIslandComponentViewInitializer-api-windows.md b/website/versioned_docs/version-0.82/native-api/ComponentIslandComponentViewInitializer-api-windows.md new file mode 100644 index 000000000..7e643ab1e --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ComponentIslandComponentViewInitializer-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-ComponentIslandComponentViewInitializer +title: ComponentIslandComponentViewInitializer +original_id: ComponentIslandComponentViewInitializer +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ContentIslandComponentView`](ContentIslandComponentView) view) + +## Referenced by +- [`IReactCompositionViewComponentBuilder`](IReactCompositionViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/ComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/ComponentView-api-windows.md new file mode 100644 index 000000000..42d82f4e3 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ComponentView-api-windows.md @@ -0,0 +1,44 @@ +--- +id: version-0.82-ComponentView +title: ComponentView +original_id: ComponentView +--- + +Kind: `class` + +Extends: [`ComponentView`](ComponentView) + +> **EXPERIMENTAL** + +## Properties +### Compositor +`readonly` [`Compositor`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Compositor) `Compositor` + +> **EXPERIMENTAL** + +### Root +`readonly` [`RootComponentView`](RootComponentView) `Root` + +> **EXPERIMENTAL** + +### Theme + [`Theme`](Theme) `Theme` + +> **EXPERIMENTAL** + +## Methods +### CapturePointer +bool **`CapturePointer`**([`Pointer`](Pointer) pointer) + +> **EXPERIMENTAL** + +### ReleasePointerCapture +void **`ReleasePointerCapture`**([`Pointer`](Pointer) pointer) + +> **EXPERIMENTAL** + +## Events +### `ThemeChanged` +> **EXPERIMENTAL** + +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1) diff --git a/website/versioned_docs/version-0.82/native-api/ComponentViewFeatures-api-windows.md b/website/versioned_docs/version-0.82/native-api/ComponentViewFeatures-api-windows.md new file mode 100644 index 000000000..9252ea562 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ComponentViewFeatures-api-windows.md @@ -0,0 +1,21 @@ +--- +id: version-0.82-ComponentViewFeatures +title: ComponentViewFeatures +original_id: ComponentViewFeatures +--- + +Kind: `enum` + +> **EXPERIMENTAL** + +| Name | Value | Description | +|--|--|--| +|`None` | 0x0 | | +|`NativeBorder` | 0x1 | | +|`ShadowProps` | 0x2 | | +|`Background` | 0x4 | | +|`FocusVisual` | 0x8 | | +|`Default` | 0xf | | + +## Referenced by +- [`IReactCompositionViewComponentBuilder`](IReactCompositionViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/ComponentViewInitializer-api-windows.md b/website/versioned_docs/version-0.82/native-api/ComponentViewInitializer-api-windows.md new file mode 100644 index 000000000..2bdf6fc9f --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ComponentViewInitializer-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-ComponentViewInitializer +title: ComponentViewInitializer +original_id: ComponentViewInitializer +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +Provides a method to initialize an instance of a ComponentView. See [`IReactViewComponentBuilder.SetComponentViewInitializer`](IReactViewComponentBuilder#setcomponentviewinitializer) + +## Invoke +void **`Invoke`**([`ComponentView`](ComponentView) view) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/ComponentViewUpdateMask-api-windows.md b/website/versioned_docs/version-0.82/native-api/ComponentViewUpdateMask-api-windows.md new file mode 100644 index 000000000..fcaba8016 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ComponentViewUpdateMask-api-windows.md @@ -0,0 +1,21 @@ +--- +id: version-0.82-ComponentViewUpdateMask +title: ComponentViewUpdateMask +original_id: ComponentViewUpdateMask +--- + +Kind: `enum` + +> **EXPERIMENTAL** + +| Name | Value | Description | +|--|--|--| +|`None` | 0x0 | | +|`Props` | 0x1 | | +|`EventEmitter` | 0x2 | | +|`State` | 0x4 | | +|`LayoutMetrics` | 0x8 | | +|`All` | 0xf | | + +## Referenced by +- [`UpdateFinalizerDelegate`](UpdateFinalizerDelegate) diff --git a/website/versioned_docs/version-0.82/native-api/CompositionHwndHost-api-windows.md b/website/versioned_docs/version-0.82/native-api/CompositionHwndHost-api-windows.md new file mode 100644 index 000000000..a31602075 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/CompositionHwndHost-api-windows.md @@ -0,0 +1,46 @@ +--- +id: version-0.82-CompositionHwndHost +title: CompositionHwndHost +original_id: CompositionHwndHost +--- + +Kind: `class` + +> **EXPERIMENTAL** + +An HWND based host of RNW running on windows composition.Provided as an ease of use function - most of the time HWND-less hosting would be preferable.In the long term this is likely to be replaced with a more modern hosting interface. + +## Properties +### ReactViewHost + [`IReactViewHost`](IReactViewHost) `ReactViewHost` + +> **EXPERIMENTAL** + +A ReactViewHost specifies the root UI component and initial properties to render in this RootViewIt must be set to show any React UI elements. + +### UiaProvider +`readonly` Object `UiaProvider` + +> **EXPERIMENTAL** + +## Constructors +### CompositionHwndHost + **`CompositionHwndHost`**() + +## Methods +### Initialize +void **`Initialize`**(uint64_t hwnd) + +> **EXPERIMENTAL** + +### NavigateFocus +[`FocusNavigationResult`](FocusNavigationResult) **`NavigateFocus`**([`FocusNavigationRequest`](FocusNavigationRequest) request) + +> **EXPERIMENTAL** + +Move focus to this [`CompositionHwndHost`](CompositionHwndHost) + +### TranslateMessage +int64_t **`TranslateMessage`**(uint32_t msg, uint64_t wParam, int64_t lParam) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/CompositionStretch-api-windows.md b/website/versioned_docs/version-0.82/native-api/CompositionStretch-api-windows.md new file mode 100644 index 000000000..deb59dc79 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/CompositionStretch-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-CompositionStretch +title: CompositionStretch +original_id: CompositionStretch +--- + +Kind: `enum` + +| Name | Value | Description | +|--|--|--| +|`None` | 0x0 | | +|`Fill` | 0x1 | | +|`Uniform` | 0x2 | | +|`UniformToFill` | 0x3 | | + +## Referenced by +- [`IDrawingSurfaceBrush`](IDrawingSurfaceBrush) diff --git a/website/versioned_docs/version-0.82/native-api/CompositionUIService-api-windows.md b/website/versioned_docs/version-0.82/native-api/CompositionUIService-api-windows.md new file mode 100644 index 000000000..523d84979 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/CompositionUIService-api-windows.md @@ -0,0 +1,33 @@ +--- +id: version-0.82-CompositionUIService +title: CompositionUIService +original_id: CompositionUIService +--- + +Kind: `class` + +> **EXPERIMENTAL** + +Provides access to Composition UI-specific functionality. + +## Methods +### ComponentFromReactTag +`static` [`ComponentView`](ComponentView) **`ComponentFromReactTag`**([`IReactContext`](IReactContext) context, int64_t reactTag) + +> **EXPERIMENTAL** + +Gets the ComponentView from a react tag. + +### GetCompositor +`static` [`Compositor`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Compositor) **`GetCompositor`**([`IReactPropertyBag`](IReactPropertyBag) properties) + +> **EXPERIMENTAL** + +Gets the Compositor used by this ReactNative instance. + +### SetCompositor +`static` void **`SetCompositor`**([`ReactInstanceSettings`](ReactInstanceSettings) settings, [`Compositor`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Compositor) compositor) + +> **EXPERIMENTAL** + +Configures the react instance to use the provided Compositor. Setting this will opt into using the new architecture diff --git a/website/versioned_docs/version-0.82/native-api/ConstantProviderDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/ConstantProviderDelegate-api-windows.md new file mode 100644 index 000000000..62acda957 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ConstantProviderDelegate-api-windows.md @@ -0,0 +1,31 @@ +--- +id: version-0.82-ConstantProviderDelegate +title: ConstantProviderDelegate +original_id: ConstantProviderDelegate +--- + +## New Architecture + +Kind: `delegate` + +A delegate to gather constants for the native module. + +### Invoke +void **`Invoke`**([`IJSValueWriter`](IJSValueWriter) constantWriter) + +### Referenced by +- [`IReactModuleBuilder`](IReactModuleBuilder) + +## Old Architecture + +Kind: `delegate` + +A delegate to gather constants for the native module. + +### Invoke +void **`Invoke`**([`IJSValueWriter`](IJSValueWriter) constantWriter) + +### Referenced by +- [`IReactModuleBuilder`](IReactModuleBuilder) +- [`IViewManagerWithExportedEventTypeConstants`](IViewManagerWithExportedEventTypeConstants) +- [`IViewManagerWithExportedViewConstants`](IViewManagerWithExportedViewConstants) diff --git a/website/versioned_docs/version-0.82/native-api/ContentIslandComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/ContentIslandComponentView-api-windows.md new file mode 100644 index 000000000..fc50d7105 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ContentIslandComponentView-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-ContentIslandComponentView +title: ContentIslandComponentView +original_id: ContentIslandComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** + +## Methods +### Connect +void **`Connect`**([`ContentIsland`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Content.ContentIsland) contentIsland) + +> **EXPERIMENTAL** + +## Referenced by +- [`ComponentIslandComponentViewInitializer`](ComponentIslandComponentViewInitializer) diff --git a/website/versioned_docs/version-0.82/native-api/CreateInternalVisualDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/CreateInternalVisualDelegate-api-windows.md new file mode 100644 index 000000000..c3b4c12fb --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/CreateInternalVisualDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-CreateInternalVisualDelegate +title: CreateInternalVisualDelegate +original_id: CreateInternalVisualDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +[`IVisual`](IVisual) **`Invoke`**([`ComponentView`](ComponentView) view) + +## Referenced by +- [`IInternalCreateVisual`](IInternalCreateVisual) diff --git a/website/versioned_docs/version-0.82/native-api/CreateVisualDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/CreateVisualDelegate-api-windows.md new file mode 100644 index 000000000..259866500 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/CreateVisualDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-CreateVisualDelegate +title: CreateVisualDelegate +original_id: CreateVisualDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +[`Visual`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Visual) **`Invoke`**([`ComponentView`](ComponentView) view) + +## Referenced by +- [`IReactCompositionViewComponentBuilder`](IReactCompositionViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/CustomResourceResult-api-windows.md b/website/versioned_docs/version-0.82/native-api/CustomResourceResult-api-windows.md new file mode 100644 index 000000000..c97186caf --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/CustomResourceResult-api-windows.md @@ -0,0 +1,25 @@ +--- +id: version-0.82-CustomResourceResult +title: CustomResourceResult +original_id: CustomResourceResult +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Properties +### AlternateResourceId + string `AlternateResourceId` + +> **EXPERIMENTAL** + +The value of this resource should resolve to the value of another ResourceId + +### Resource + Object `Resource` + +> **EXPERIMENTAL** + +## Referenced by +- [`ICustomResourceLoader`](ICustomResourceLoader) diff --git a/website/versioned_docs/version-0.82/native-api/DebuggingOverlayComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/DebuggingOverlayComponentView-api-windows.md new file mode 100644 index 000000000..1123b64e0 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/DebuggingOverlayComponentView-api-windows.md @@ -0,0 +1,11 @@ +--- +id: version-0.82-DebuggingOverlayComponentView +title: DebuggingOverlayComponentView +original_id: DebuggingOverlayComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/DesktopWindowMessage-api-windows.md b/website/versioned_docs/version-0.82/native-api/DesktopWindowMessage-api-windows.md new file mode 100644 index 000000000..87835c0f7 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/DesktopWindowMessage-api-windows.md @@ -0,0 +1,19 @@ +--- +id: version-0.82-DesktopWindowMessage +title: DesktopWindowMessage +original_id: DesktopWindowMessage +--- + +Kind: `struct` + +Represents a window message. See https://docs.microsoft.com/windows/win32/learnwin32/window-messages + +## Fields +### LParam +Type: `int64_t` + +### Msg +Type: `uint32_t` + +### WParam +Type: `uint64_t` diff --git a/website/versioned_docs/version-0.82/native-api/EmitEventSetterDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/EmitEventSetterDelegate-api-windows.md new file mode 100644 index 000000000..e8258578b --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/EmitEventSetterDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-EmitEventSetterDelegate +title: EmitEventSetterDelegate +original_id: EmitEventSetterDelegate +--- + +Kind: `delegate` + +A delegate gets the arguments for an event emit on a EventEmitter. + +## Invoke +void **`Invoke`**([`JSValueArgWriter`](JSValueArgWriter) argWriter) + +## Referenced by +- [`EventEmitterInitializerDelegate`](EventEmitterInitializerDelegate) diff --git a/website/versioned_docs/version-0.82/native-api/EventEmitter-api-windows.md b/website/versioned_docs/version-0.82/native-api/EventEmitter-api-windows.md new file mode 100644 index 000000000..a6dca78b8 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/EventEmitter-api-windows.md @@ -0,0 +1,19 @@ +--- +id: version-0.82-EventEmitter +title: EventEmitter +original_id: EventEmitter +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Methods +### DispatchEvent +void **`DispatchEvent`**(string eventName, [`JSValueArgWriter`](JSValueArgWriter) args) + +> **EXPERIMENTAL** + +## Referenced by +- [`ShadowNode`](ShadowNode) +- [`UpdateEventEmitterDelegate`](UpdateEventEmitterDelegate) diff --git a/website/versioned_docs/version-0.82/native-api/EventEmitterInitializerDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/EventEmitterInitializerDelegate-api-windows.md new file mode 100644 index 000000000..60a9e153e --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/EventEmitterInitializerDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-EventEmitterInitializerDelegate +title: EventEmitterInitializerDelegate +original_id: EventEmitterInitializerDelegate +--- + +Kind: `delegate` + +A delegate to call a turbo module EventEmitter. + +## Invoke +void **`Invoke`**([`EmitEventSetterDelegate`](EmitEventSetterDelegate) emitter) + +## Referenced by +- [`IReactModuleBuilder`](IReactModuleBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/FocusManager-api-windows.md b/website/versioned_docs/version-0.82/native-api/FocusManager-api-windows.md new file mode 100644 index 000000000..7734415ee --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/FocusManager-api-windows.md @@ -0,0 +1,24 @@ +--- +id: version-0.82-FocusManager +title: FocusManager +original_id: FocusManager +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Methods +### FindFirstFocusableElement +`static` [`ComponentView`](ComponentView) **`FindFirstFocusableElement`**([`ComponentView`](ComponentView) searchScope) + +> **EXPERIMENTAL** + +Retrieves the first component that can receive focus based on the specified scope. + +### FindLastFocusableElement +`static` [`ComponentView`](ComponentView) **`FindLastFocusableElement`**([`ComponentView`](ComponentView) searchScope) + +> **EXPERIMENTAL** + +Retrieves the last component that can receive focus based on the specified scope. diff --git a/website/versioned_docs/version-0.82/native-api/FocusNavigationDirection-api-windows.md b/website/versioned_docs/version-0.82/native-api/FocusNavigationDirection-api-windows.md new file mode 100644 index 000000000..20f506f5e --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/FocusNavigationDirection-api-windows.md @@ -0,0 +1,19 @@ +--- +id: version-0.82-FocusNavigationDirection +title: FocusNavigationDirection +original_id: FocusNavigationDirection +--- + +Kind: `enum` + +| Name | Value | Description | +|--|--|--| +|`None` | 0x0 | | +|`Next` | 0x1 | | +|`Previous` | 0x2 | | +|`First` | 0x3 | | +|`Last` | 0x4 | | + +## Referenced by +- [`GettingFocusEventArgs`](GettingFocusEventArgs) +- [`LosingFocusEventArgs`](LosingFocusEventArgs) diff --git a/website/versioned_docs/version-0.82/native-api/FocusNavigationReason-api-windows.md b/website/versioned_docs/version-0.82/native-api/FocusNavigationReason-api-windows.md new file mode 100644 index 000000000..3edab1617 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/FocusNavigationReason-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-FocusNavigationReason +title: FocusNavigationReason +original_id: FocusNavigationReason +--- + +Kind: `enum` + +> **EXPERIMENTAL** + +sdf + +| Name | Value | Description | +|--|--|--| +|`Restore` | 0x0 | | +|`First` | 0x1 | | +|`Last` | 0x2 | | + +## Referenced by +- [`FocusNavigationRequest`](FocusNavigationRequest) diff --git a/website/versioned_docs/version-0.82/native-api/FocusNavigationRequest-api-windows.md b/website/versioned_docs/version-0.82/native-api/FocusNavigationRequest-api-windows.md new file mode 100644 index 000000000..7b7db6c3b --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/FocusNavigationRequest-api-windows.md @@ -0,0 +1,31 @@ +--- +id: version-0.82-FocusNavigationRequest +title: FocusNavigationRequest +original_id: FocusNavigationRequest +--- + +Kind: `class` + +> **EXPERIMENTAL** + +Argument type for [`ReactNativeIsland.NavigateFocus`](ReactNativeIsland#navigatefocus). + +## Properties +### Reason + [`FocusNavigationReason`](FocusNavigationReason) `Reason` + +> **EXPERIMENTAL** + +The reason the [`ReactNativeIsland`](ReactNativeIsland) is getting focus. + +## Constructors +### FocusNavigationRequest + **`FocusNavigationRequest`**([`FocusNavigationReason`](FocusNavigationReason) reason) + +> **EXPERIMENTAL** + +Creates new instance of [`FocusNavigationRequest`](FocusNavigationRequest) + +## Referenced by +- [`CompositionHwndHost`](CompositionHwndHost) +- [`ReactNativeIsland`](ReactNativeIsland) diff --git a/website/versioned_docs/version-0.82/native-api/FocusNavigationResult-api-windows.md b/website/versioned_docs/version-0.82/native-api/FocusNavigationResult-api-windows.md new file mode 100644 index 000000000..e21923ae1 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/FocusNavigationResult-api-windows.md @@ -0,0 +1,23 @@ +--- +id: version-0.82-FocusNavigationResult +title: FocusNavigationResult +original_id: FocusNavigationResult +--- + +Kind: `class` + +> **EXPERIMENTAL** + +Provides result from a [`ReactNativeIsland.NavigateFocus`](ReactNativeIsland#navigatefocus) method call. + +## Properties +### WasFocusMoved +`readonly` bool `WasFocusMoved` + +> **EXPERIMENTAL** + +Gets a value that indicates whether the focus successfully moved. + +## Referenced by +- [`CompositionHwndHost`](CompositionHwndHost) +- [`ReactNativeIsland`](ReactNativeIsland) diff --git a/website/versioned_docs/version-0.82/native-api/GettingFocusEventArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/GettingFocusEventArgs-api-windows.md new file mode 100644 index 000000000..9ce1ffb38 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/GettingFocusEventArgs-api-windows.md @@ -0,0 +1,44 @@ +--- +id: version-0.82-GettingFocusEventArgs +title: GettingFocusEventArgs +original_id: GettingFocusEventArgs +--- + +Kind: `class` + +Implements: [`RoutedEventArgs`](RoutedEventArgs) + +> **EXPERIMENTAL** + +## Properties +### Direction +`readonly` [`FocusNavigationDirection`](FocusNavigationDirection) `Direction` + +> **EXPERIMENTAL** + +### NewFocusedComponent +`readonly` [`ComponentView`](ComponentView) `NewFocusedComponent` + +> **EXPERIMENTAL** + +### OldFocusedComponent +`readonly` [`ComponentView`](ComponentView) `OldFocusedComponent` + +> **EXPERIMENTAL** + +### OriginalSource +`readonly` int `OriginalSource` + +## Methods +### TryCancel +void **`TryCancel`**() + +> **EXPERIMENTAL** + +### TrySetNewFocusedComponent +void **`TrySetNewFocusedComponent`**([`ComponentView`](ComponentView) component) + +> **EXPERIMENTAL** + +## Referenced by +- [`ComponentView`](ComponentView) diff --git a/website/versioned_docs/version-0.82/native-api/HandleCommandArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/HandleCommandArgs-api-windows.md new file mode 100644 index 000000000..62bc383fa --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/HandleCommandArgs-api-windows.md @@ -0,0 +1,28 @@ +--- +id: version-0.82-HandleCommandArgs +title: HandleCommandArgs +original_id: HandleCommandArgs +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Properties +### CommandArgs +`readonly` [`IJSValueReader`](IJSValueReader) `CommandArgs` + +> **EXPERIMENTAL** + +### CommandName +`readonly` string `CommandName` + +> **EXPERIMENTAL** + +### Handled + bool `Handled` + +> **EXPERIMENTAL** + +## Referenced by +- [`HandleCommandDelegate`](HandleCommandDelegate) diff --git a/website/versioned_docs/version-0.82/native-api/HandleCommandDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/HandleCommandDelegate-api-windows.md new file mode 100644 index 000000000..4e22d4bcf --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/HandleCommandDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-HandleCommandDelegate +title: HandleCommandDelegate +original_id: HandleCommandDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ComponentView`](ComponentView) source, [`HandleCommandArgs`](HandleCommandArgs) args) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/HttpSettings-api-windows.md b/website/versioned_docs/version-0.82/native-api/HttpSettings-api-windows.md new file mode 100644 index 000000000..f13d3afb6 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/HttpSettings-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-HttpSettings +title: HttpSettings +original_id: HttpSettings +--- + +Kind: `class` + +Provides settings for Http functionality. + +## Methods +### SetDefaultUserAgent +`static` void **`SetDefaultUserAgent`**([`ReactInstanceSettings`](ReactInstanceSettings) settings, string userAgent) + +Configures the react instance to use a user-agent header by default on http requests. diff --git a/website/versioned_docs/version-0.82/native-api/IActivityVisual-api-windows.md b/website/versioned_docs/version-0.82/native-api/IActivityVisual-api-windows.md new file mode 100644 index 000000000..30309fed0 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IActivityVisual-api-windows.md @@ -0,0 +1,27 @@ +--- +id: version-0.82-IActivityVisual +title: IActivityVisual +original_id: IActivityVisual +--- + +Kind: `interface` + +Implements: [`IVisual`](IVisual) + +> **EXPERIMENTAL** + +## Methods +### Brush +void **`Brush`**([`IBrush`](IBrush) brush) + +### Size +void **`Size`**(float value) + +### StartAnimation +void **`StartAnimation`**() + +### StopAnimation +void **`StopAnimation`**() + +## Referenced by +- [`ICompositionContext`](ICompositionContext) diff --git a/website/versioned_docs/version-0.82/native-api/IBrush-api-windows.md b/website/versioned_docs/version-0.82/native-api/IBrush-api-windows.md new file mode 100644 index 000000000..5f0512e0b --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IBrush-api-windows.md @@ -0,0 +1,22 @@ +--- +id: version-0.82-IBrush +title: IBrush +original_id: IBrush +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Referenced by +- [`IActivityVisual`](IActivityVisual) +- [`ICaretVisual`](ICaretVisual) +- [`ICompositionContext`](ICompositionContext) +- [`IInternalColor`](IInternalColor) +- [`IInternalTheme`](IInternalTheme) +- [`IRoundedRectangleVisual`](IRoundedRectangleVisual) +- [`IScrollVisual`](IScrollVisual) +- [`ISpriteVisual`](ISpriteVisual) +- [`MicrosoftCompositionContextHelper`](MicrosoftCompositionContextHelper) +- [`SystemCompositionContextHelper`](SystemCompositionContextHelper) +- [`UriBrushFactory`](UriBrushFactory) diff --git a/website/versioned_docs/version-0.82/native-api/ICaretVisual-api-windows.md b/website/versioned_docs/version-0.82/native-api/ICaretVisual-api-windows.md new file mode 100644 index 000000000..38ef4f67c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ICaretVisual-api-windows.md @@ -0,0 +1,29 @@ +--- +id: version-0.82-ICaretVisual +title: ICaretVisual +original_id: ICaretVisual +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Properties +### InnerVisual +`readonly` [`IVisual`](IVisual) `InnerVisual` + +### IsVisible + bool `IsVisible` + +## Methods +### Brush +void **`Brush`**([`IBrush`](IBrush) brush) + +### Position +void **`Position`**([`Vector2`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector2) position) + +### Size +void **`Size`**([`Vector2`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector2) size) + +## Referenced by +- [`ICompositionContext`](ICompositionContext) diff --git a/website/versioned_docs/version-0.82/native-api/IComponentProps-api-windows.md b/website/versioned_docs/version-0.82/native-api/IComponentProps-api-windows.md new file mode 100644 index 000000000..e7a0f54f3 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IComponentProps-api-windows.md @@ -0,0 +1,22 @@ +--- +id: version-0.82-IComponentProps +title: IComponentProps +original_id: IComponentProps +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +Interface to implement custom view component properties. + +## Methods +### SetProp +void **`SetProp`**(uint32_t hash, string propName, [`IJSValueReader`](IJSValueReader) value) + +This method will be called for each property that comes from JavaScript. It is up to an individual implementation to store the values of properties for access within its UpdateProps. Properties that are part of ViewProps can be accessed from the [`ViewProps`](ViewProps) object, and so do not need to be stored. + +## Referenced by +- [`InitialStateDataFactory`](InitialStateDataFactory) +- [`UpdatePropsDelegate`](UpdatePropsDelegate) +- [`ViewPropsFactory`](ViewPropsFactory) diff --git a/website/versioned_docs/version-0.82/native-api/IComponentState-api-windows.md b/website/versioned_docs/version-0.82/native-api/IComponentState-api-windows.md new file mode 100644 index 000000000..a3ec07a43 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IComponentState-api-windows.md @@ -0,0 +1,23 @@ +--- +id: version-0.82-IComponentState +title: IComponentState +original_id: IComponentState +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Properties +### Data +`readonly` Object `Data` + +## Methods +### UpdateState +void **`UpdateState`**(Object data) + +### UpdateStateWithMutation +void **`UpdateStateWithMutation`**([`StateUpdateMutation`](StateUpdateMutation) mutation) + +## Referenced by +- [`UpdateStateDelegate`](UpdateStateDelegate) diff --git a/website/versioned_docs/version-0.82/native-api/ICompositionContext-api-windows.md b/website/versioned_docs/version-0.82/native-api/ICompositionContext-api-windows.md new file mode 100644 index 000000000..260438b66 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ICompositionContext-api-windows.md @@ -0,0 +1,43 @@ +--- +id: version-0.82-ICompositionContext +title: ICompositionContext +original_id: ICompositionContext +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Methods +### CreateActivityVisual +[`IActivityVisual`](IActivityVisual) **`CreateActivityVisual`**() + +### CreateCaretVisual +[`ICaretVisual`](ICaretVisual) **`CreateCaretVisual`**() + +### CreateColorBrush +[`IBrush`](IBrush) **`CreateColorBrush`**([`Color`](https://docs.microsoft.com/uwp/api/Windows.UI.Color) color) + +### CreateDrawingSurfaceBrush +[`IDrawingSurfaceBrush`](IDrawingSurfaceBrush) **`CreateDrawingSurfaceBrush`**([`Size`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Size) surfaceSize, [`DirectXPixelFormat`](https://docs.microsoft.com/uwp/api/Windows.Graphics.DirectX.DirectXPixelFormat) pixelFormat, [`DirectXAlphaMode`](https://docs.microsoft.com/uwp/api/Windows.Graphics.DirectX.DirectXAlphaMode) alphaMode) + +### CreateDropShadow +[`IDropShadow`](IDropShadow) **`CreateDropShadow`**() + +### CreateFocusVisual +[`IFocusVisual`](IFocusVisual) **`CreateFocusVisual`**() + +### CreateRoundedRectangleVisual +[`IRoundedRectangleVisual`](IRoundedRectangleVisual) **`CreateRoundedRectangleVisual`**() + +### CreateScrollerVisual +[`IScrollVisual`](IScrollVisual) **`CreateScrollerVisual`**() + +### CreateSpriteVisual +[`ISpriteVisual`](ISpriteVisual) **`CreateSpriteVisual`**() + +## Referenced by +- [`IInternalComponentView`](IInternalComponentView) +- [`MicrosoftCompositionContextHelper`](MicrosoftCompositionContextHelper) +- [`SystemCompositionContextHelper`](SystemCompositionContextHelper) +- [`UriBrushFactory`](UriBrushFactory) diff --git a/website/versioned_docs/version-0.82/native-api/ICustomResourceLoader-api-windows.md b/website/versioned_docs/version-0.82/native-api/ICustomResourceLoader-api-windows.md new file mode 100644 index 000000000..7d9f15028 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ICustomResourceLoader-api-windows.md @@ -0,0 +1,27 @@ +--- +id: version-0.82-ICustomResourceLoader +title: ICustomResourceLoader +original_id: ICustomResourceLoader +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +Applications can implement this interface to provide custom values for native platform colors. + +## Methods +### GetResource +void **`GetResource`**(string resourceId, [`ResourceType`](ResourceType) resourceType, [`CustomResourceResult`](CustomResourceResult) result) + +Called when a theme is queried for a specific resource. resourceId will be the name of the platform color. Implementations should return an empty result if the resource is not being overridden. + +## Events +### `ResourcesChanged` +Implementations should raise this event if the platform colors will return new values + +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1) + +## Referenced by +- [`ReactNativeIsland`](ReactNativeIsland) +- [`Theme`](Theme) diff --git a/website/versioned_docs/version-0.82/native-api/IDrawingSurfaceBrush-api-windows.md b/website/versioned_docs/version-0.82/native-api/IDrawingSurfaceBrush-api-windows.md new file mode 100644 index 000000000..c663ce8ba --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IDrawingSurfaceBrush-api-windows.md @@ -0,0 +1,26 @@ +--- +id: version-0.82-IDrawingSurfaceBrush +title: IDrawingSurfaceBrush +original_id: IDrawingSurfaceBrush +--- + +Kind: `interface` + +Implements: [`IBrush`](IBrush) + +> **EXPERIMENTAL** + +## Methods +### HorizontalAlignmentRatio +void **`HorizontalAlignmentRatio`**(float value) + +### Stretch +void **`Stretch`**([`CompositionStretch`](CompositionStretch) value) + +### VerticalAlignmentRatio +void **`VerticalAlignmentRatio`**(float value) + +## Referenced by +- [`ICompositionContext`](ICompositionContext) +- [`MicrosoftCompositionContextHelper`](MicrosoftCompositionContextHelper) +- [`SystemCompositionContextHelper`](SystemCompositionContextHelper) diff --git a/website/versioned_docs/version-0.82/native-api/IDropShadow-api-windows.md b/website/versioned_docs/version-0.82/native-api/IDropShadow-api-windows.md new file mode 100644 index 000000000..492c2c504 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IDropShadow-api-windows.md @@ -0,0 +1,28 @@ +--- +id: version-0.82-IDropShadow +title: IDropShadow +original_id: IDropShadow +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Methods +### BlurRadius +void **`BlurRadius`**(float value) + +### Color +void **`Color`**([`Color`](https://docs.microsoft.com/uwp/api/Windows.UI.Color) value) + +### Offset +void **`Offset`**([`Vector3`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector3) value) + +### Opacity +void **`Opacity`**(float value) + +## Referenced by +- [`ICompositionContext`](ICompositionContext) +- [`ISpriteVisual`](ISpriteVisual) +- [`MicrosoftCompositionContextHelper`](MicrosoftCompositionContextHelper) +- [`SystemCompositionContextHelper`](SystemCompositionContextHelper) diff --git a/website/versioned_docs/version-0.82/native-api/IFocusVisual-api-windows.md b/website/versioned_docs/version-0.82/native-api/IFocusVisual-api-windows.md new file mode 100644 index 000000000..a50da6d88 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IFocusVisual-api-windows.md @@ -0,0 +1,22 @@ +--- +id: version-0.82-IFocusVisual +title: IFocusVisual +original_id: IFocusVisual +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Properties +### InnerVisual +`readonly` [`IVisual`](IVisual) `InnerVisual` + +### IsFocused + bool `IsFocused` + +### ScaleFactor + float `ScaleFactor` + +## Referenced by +- [`ICompositionContext`](ICompositionContext) diff --git a/website/versioned_docs/version-0.82/native-api/IInternalColor-api-windows.md b/website/versioned_docs/version-0.82/native-api/IInternalColor-api-windows.md new file mode 100644 index 000000000..3774c6f98 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IInternalColor-api-windows.md @@ -0,0 +1,13 @@ +--- +id: version-0.82-IInternalColor +title: IInternalColor +original_id: IInternalColor +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Methods +### AsInternalBrush +[`IBrush`](IBrush) **`AsInternalBrush`**([`Theme`](Theme) theme) diff --git a/website/versioned_docs/version-0.82/native-api/IInternalComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/IInternalComponentView-api-windows.md new file mode 100644 index 000000000..7d9e2fc50 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IInternalComponentView-api-windows.md @@ -0,0 +1,13 @@ +--- +id: version-0.82-IInternalComponentView +title: IInternalComponentView +original_id: IInternalComponentView +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Properties +### CompositionContext +`readonly` [`ICompositionContext`](ICompositionContext) `CompositionContext` diff --git a/website/versioned_docs/version-0.82/native-api/IInternalCompositionRootView-api-windows.md b/website/versioned_docs/version-0.82/native-api/IInternalCompositionRootView-api-windows.md new file mode 100644 index 000000000..446d76762 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IInternalCompositionRootView-api-windows.md @@ -0,0 +1,34 @@ +--- +id: version-0.82-IInternalCompositionRootView +title: IInternalCompositionRootView +original_id: IInternalCompositionRootView +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +Custom ViewComponents need to implement this interface to be able to provide a custom visual using the composition context that allows custom compositors. This is only required for custom components that need to support running in RNW instances with custom compositors. Most custom components can just override CreateVisual on ViewComponentView. This interface will be removed in future versions + +## Properties +### InternalRootVisual + [`IVisual`](IVisual) `InternalRootVisual` + +The RootVisual associated with the ReactNativeIsland (unresolved reference). It must be set to show any React UI elements. + +## Methods +### OnMounted +void **`OnMounted`**() + +### OnUnmounted +void **`OnUnmounted`**() + +### SendMessage +int64_t **`SendMessage`**(uint32_t Msg, uint64_t WParam, int64_t LParam) + +Forward input to the RootView. Only required when not using ContentIslands + +### SetWindow +void **`SetWindow`**(uint64_t hwnd) + +Hosting Window that input is coming from. Only required when not using ContentIslands diff --git a/website/versioned_docs/version-0.82/native-api/IInternalCreateVisual-api-windows.md b/website/versioned_docs/version-0.82/native-api/IInternalCreateVisual-api-windows.md new file mode 100644 index 000000000..135b6942c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IInternalCreateVisual-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-IInternalCreateVisual +title: IInternalCreateVisual +original_id: IInternalCreateVisual +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +Custom ViewComponents need to implement this interface to be able to provide a custom visual using the composition context that allows custom compositors. This is only required for custom components that need to support running in RNW instances with custom compositors. Most custom components can just set CreateVisualHandler on ViewComponentView. This will be removed in a future version + +## Properties +### CreateInternalVisualHandler + [`CreateInternalVisualDelegate`](CreateInternalVisualDelegate) `CreateInternalVisualHandler` diff --git a/website/versioned_docs/version-0.82/native-api/IInternalTheme-api-windows.md b/website/versioned_docs/version-0.82/native-api/IInternalTheme-api-windows.md new file mode 100644 index 000000000..aed41d90a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IInternalTheme-api-windows.md @@ -0,0 +1,13 @@ +--- +id: version-0.82-IInternalTheme +title: IInternalTheme +original_id: IInternalTheme +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Methods +### InternalPlatformBrush +[`IBrush`](IBrush) **`InternalPlatformBrush`**(string platformColor) diff --git a/website/versioned_docs/version-0.82/native-api/IJSValueReader-api-windows.md b/website/versioned_docs/version-0.82/native-api/IJSValueReader-api-windows.md new file mode 100644 index 000000000..f84656995 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IJSValueReader-api-windows.md @@ -0,0 +1,154 @@ +--- +id: version-0.82-IJSValueReader +title: IJSValueReader +original_id: IJSValueReader +--- + +## New Architecture + +Kind: `interface` + +Forward-only reader for JSON-like streams. +It is used to read data sent between native modules and the Microsoft.ReactNative library. + +The JSON-like streams are data structures that satisfy the [JSON specification](https://tools.ietf.org/html/rfc8259). The data structure may have objects with name-value pairs and arrays of items. Property values or array items can be of type `Null`, `Object`, `Array`, `String`, `Boolean`, or `Number`. The `IJSValueReader` treats the `Number` type as `Int64` or `Double`. See [`JSValueType`](JSValueType). + +When `IJSValueReader` reads data it must walk the whole tree without skipping any items. For example, if the current value type is `Object`, one must call [`GetNextObjectProperty`](#getnextobjectproperty) to start reading the current object's properties, and if the current type is `Array`, [`GetNextArrayItem`](#getnextarrayitem) must be called to start reading the elements in the array. These functions must be called in a loop until they return false, which signifies that there are no more items within the object or array being traversed. + +See the [`IJSValueWriter`](IJSValueWriter) for the corresponding writer interface. + +The [`IJSValueReader`](IJSValueReader) and [`IJSValueWriter`](IJSValueWriter) must be rarely used directly. Use them to create functions that serialize a native type or deserialize into a native type. The rest of application code must use these functions to serialize/deserialize values. The `Microsoft.ReactNative.Cxx` and `Microsoft.ReactNative.Managed` projects offer serializer/deserializer functions for many standard types. Use them directly or to define serializer/deserializer functions for your types. + +### Properties +#### ValueType +`readonly` [`JSValueType`](JSValueType) `ValueType` + +Gets the type of the current value. + +### Methods +#### GetBoolean +bool **`GetBoolean`**() + +Gets the current `Boolean` value. + +#### GetDouble +double **`GetDouble`**() + +Gets the current `Number` value as a `Double`. + +#### GetInt64 +int64_t **`GetInt64`**() + +Gets the current `Number` value as an `Int64`. + +#### GetNextArrayItem +bool **`GetNextArrayItem`**() + +Advances the iterator within the current array to fetch the next array element. The element can then be obtained by calling one of the Get functions. + +Returns **`true`** if the next array item is acquired successfully. Otherwise, it returns **`false`**, meaning that reading of the JSON-like array is completed. + +**Note** +- Use [`ValueType`](#valuetype) to get the type of the array item and other GetXXX methods to read it. +- Use [`GetNextObjectProperty`](#getnextobjectproperty) method to start reading property value of type [`JSValueType`](JSValueType) `Object`. +- Use [`GetNextArrayItem`](#getnextarrayitem) method to start reading property value of type [`JSValueType`](JSValueType) `Array + +#### GetNextObjectProperty +bool **`GetNextObjectProperty`**(**out** string propertyName) + +Advances the iterator within the current object to fetch the next object property. The property value can then be obtained by calling one of the Get functions. + +Returns **`true`** if the next property is acquired successfully. In that case the `propertyName` is set to the name of the property. Otherwise, it returns **`false`**, meaning that reading of the JSON-like object is completed. + +**Note** +- Use [`ValueType`](#valuetype) to get the type of the property value and other GetXXX methods to read it. +- Use [`GetNextObjectProperty`](#getnextobjectproperty) method to start reading property value of type [`JSValueType`](JSValueType) `Object`. +- Use [`GetNextArrayItem`](#getnextarrayitem) method to start reading property value of type [`JSValueType`](JSValueType) `Array + +#### GetString +string **`GetString`**() + +Gets the current `String` value. + +### Referenced by +- [`Color`](Color) +- [`HandleCommandArgs`](HandleCommandArgs) +- [`IComponentProps`](IComponentProps) +- [`IRedBoxErrorInfo`](IRedBoxErrorInfo) +- [`ImageSource`](ImageSource) +- [`MethodDelegate`](MethodDelegate) +- [`SyncMethodDelegate`](SyncMethodDelegate) + +## Old Architecture + +Kind: `interface` + +Forward-only reader for JSON-like streams. +It is used to read data sent between native modules and the Microsoft.ReactNative library. + +The JSON-like streams are data structures that satisfy the [JSON specification](https://tools.ietf.org/html/rfc8259). The data structure may have objects with name-value pairs and arrays of items. Property values or array items can be of type `Null`, `Object`, `Array`, `String`, `Boolean`, or `Number`. The `IJSValueReader` treats the `Number` type as `Int64` or `Double`. See [`JSValueType`](JSValueType). + +When `IJSValueReader` reads data it must walk the whole tree without skipping any items. For example, if the current value type is `Object`, one must call [`GetNextObjectProperty`](#getnextobjectproperty) to start reading the current object's properties, and if the current type is `Array`, [`GetNextArrayItem`](#getnextarrayitem) must be called to start reading the elements in the array. These functions must be called in a loop until they return false, which signifies that there are no more items within the object or array being traversed. + +See the [`IJSValueWriter`](IJSValueWriter) for the corresponding writer interface. + +The [`IJSValueReader`](IJSValueReader) and [`IJSValueWriter`](IJSValueWriter) must be rarely used directly. Use them to create functions that serialize a native type or deserialize into a native type. The rest of application code must use these functions to serialize/deserialize values. The `Microsoft.ReactNative.Cxx` and `Microsoft.ReactNative.Managed` projects offer serializer/deserializer functions for many standard types. Use them directly or to define serializer/deserializer functions for your types. + +### Properties +#### ValueType +`readonly` [`JSValueType`](JSValueType) `ValueType` + +Gets the type of the current value. + +### Methods +#### GetBoolean +bool **`GetBoolean`**() + +Gets the current `Boolean` value. + +#### GetDouble +double **`GetDouble`**() + +Gets the current `Number` value as a `Double`. + +#### GetInt64 +int64_t **`GetInt64`**() + +Gets the current `Number` value as an `Int64`. + +#### GetNextArrayItem +bool **`GetNextArrayItem`**() + +Advances the iterator within the current array to fetch the next array element. The element can then be obtained by calling one of the Get functions. + +Returns **`true`** if the next array item is acquired successfully. Otherwise, it returns **`false`**, meaning that reading of the JSON-like array is completed. + +**Note** +- Use [`ValueType`](#valuetype) to get the type of the array item and other GetXXX methods to read it. +- Use [`GetNextObjectProperty`](#getnextobjectproperty) method to start reading property value of type [`JSValueType`](JSValueType) `Object`. +- Use [`GetNextArrayItem`](#getnextarrayitem) method to start reading property value of type [`JSValueType`](JSValueType) `Array + +#### GetNextObjectProperty +bool **`GetNextObjectProperty`**(**out** string propertyName) + +Advances the iterator within the current object to fetch the next object property. The property value can then be obtained by calling one of the Get functions. + +Returns **`true`** if the next property is acquired successfully. In that case the `propertyName` is set to the name of the property. Otherwise, it returns **`false`**, meaning that reading of the JSON-like object is completed. + +**Note** +- Use [`ValueType`](#valuetype) to get the type of the property value and other GetXXX methods to read it. +- Use [`GetNextObjectProperty`](#getnextobjectproperty) method to start reading property value of type [`JSValueType`](JSValueType) `Object`. +- Use [`GetNextArrayItem`](#getnextarrayitem) method to start reading property value of type [`JSValueType`](JSValueType) `Array + +#### GetString +string **`GetString`**() + +Gets the current `String` value. + +### Referenced by +- [`IRedBoxErrorInfo`](IRedBoxErrorInfo) +- [`IViewManagerCreateWithProperties`](IViewManagerCreateWithProperties) +- [`IViewManagerWithCommands`](IViewManagerWithCommands) +- [`IViewManagerWithNativeProperties`](IViewManagerWithNativeProperties) +- [`MethodDelegate`](MethodDelegate) +- [`SyncMethodDelegate`](SyncMethodDelegate) diff --git a/website/versioned_docs/version-0.82/native-api/IJSValueWriter-api-windows.md b/website/versioned_docs/version-0.82/native-api/IJSValueWriter-api-windows.md new file mode 100644 index 000000000..05ee97281 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IJSValueWriter-api-windows.md @@ -0,0 +1,148 @@ +--- +id: version-0.82-IJSValueWriter +title: IJSValueWriter +original_id: IJSValueWriter +--- + +## New Architecture + +Kind: `interface` + +JSON-like stream writer. +It is used to write data that is sent between native modules and the Microsoft.ReactNative library. + +The JSON-like streams are data structures that satisfy the [JSON specification](https://tools.ietf.org/html/rfc8259). The data structure may have objects with name-value pairs and arrays of items. Property values or array items can be of type `Null`, `Object`, `Array`, `String`, `Boolean`, or `Number`. The `IJSValueWriter` treats the `Number` type as `Int64` or `Double`. See [`JSValueType`](JSValueType). + +See the [`IJSValueReader`](IJSValueReader) for the corresponding reader interface. + +The [`IJSValueReader`](IJSValueReader) and [`IJSValueWriter`](IJSValueWriter) must be rarely used directly. Use them to create functions that serialize a native type or deserialize into a native type. The rest of application code must use these functions to serialize/deserialize values. The `Microsoft.ReactNative.Cxx` and `Microsoft.ReactNative.Managed` projects offer serializer/deserializer functions for many standard types. Use them directly or to define serializer/deserializer functions for your types. + +### Methods +#### WriteArrayBegin +void **`WriteArrayBegin`**() + +Starts writing an array. + +#### WriteArrayEnd +void **`WriteArrayEnd`**() + +Completes writing an array. + +#### WriteBoolean +void **`WriteBoolean`**(bool value) + +Writes a `Boolean` value. + +#### WriteDouble +void **`WriteDouble`**(double value) + +Writes a `Number` value from a double. + +#### WriteInt64 +void **`WriteInt64`**(int64_t value) + +Writes a `Number` value from an integer. + +#### WriteNull +void **`WriteNull`**() + +Writes a `Null` value. + +#### WriteObjectBegin +void **`WriteObjectBegin`**() + +Starts writing an `Object`. + +#### WriteObjectEnd +void **`WriteObjectEnd`**() + +Completes writing an object. + +#### WritePropertyName +void **`WritePropertyName`**(string name) + +Writes a property name within an object. This call should then be followed by writing the value of that property. + +#### WriteString +void **`WriteString`**(string value) + +Writes a `String` value. + +### Referenced by +- [`Color`](Color) +- [`ConstantProviderDelegate`](ConstantProviderDelegate) +- [`JSValueArgWriter`](JSValueArgWriter) +- [`MethodDelegate`](MethodDelegate) +- [`MethodResultCallback`](MethodResultCallback) +- [`SyncMethodDelegate`](SyncMethodDelegate) + +## Old Architecture + +Kind: `interface` + +JSON-like stream writer. +It is used to write data that is sent between native modules and the Microsoft.ReactNative library. + +The JSON-like streams are data structures that satisfy the [JSON specification](https://tools.ietf.org/html/rfc8259). The data structure may have objects with name-value pairs and arrays of items. Property values or array items can be of type `Null`, `Object`, `Array`, `String`, `Boolean`, or `Number`. The `IJSValueWriter` treats the `Number` type as `Int64` or `Double`. See [`JSValueType`](JSValueType). + +See the [`IJSValueReader`](IJSValueReader) for the corresponding reader interface. + +The [`IJSValueReader`](IJSValueReader) and [`IJSValueWriter`](IJSValueWriter) must be rarely used directly. Use them to create functions that serialize a native type or deserialize into a native type. The rest of application code must use these functions to serialize/deserialize values. The `Microsoft.ReactNative.Cxx` and `Microsoft.ReactNative.Managed` projects offer serializer/deserializer functions for many standard types. Use them directly or to define serializer/deserializer functions for your types. + +### Methods +#### WriteArrayBegin +void **`WriteArrayBegin`**() + +Starts writing an array. + +#### WriteArrayEnd +void **`WriteArrayEnd`**() + +Completes writing an array. + +#### WriteBoolean +void **`WriteBoolean`**(bool value) + +Writes a `Boolean` value. + +#### WriteDouble +void **`WriteDouble`**(double value) + +Writes a `Number` value from a double. + +#### WriteInt64 +void **`WriteInt64`**(int64_t value) + +Writes a `Number` value from an integer. + +#### WriteNull +void **`WriteNull`**() + +Writes a `Null` value. + +#### WriteObjectBegin +void **`WriteObjectBegin`**() + +Starts writing an `Object`. + +#### WriteObjectEnd +void **`WriteObjectEnd`**() + +Completes writing an object. + +#### WritePropertyName +void **`WritePropertyName`**(string name) + +Writes a property name within an object. This call should then be followed by writing the value of that property. + +#### WriteString +void **`WriteString`**(string value) + +Writes a `String` value. + +### Referenced by +- [`ConstantProviderDelegate`](ConstantProviderDelegate) +- [`JSValueArgWriter`](JSValueArgWriter) +- [`MethodDelegate`](MethodDelegate) +- [`MethodResultCallback`](MethodResultCallback) +- [`SyncMethodDelegate`](SyncMethodDelegate) diff --git a/website/versioned_docs/version-0.82/native-api/IJsiByteBuffer-api-windows.md b/website/versioned_docs/version-0.82/native-api/IJsiByteBuffer-api-windows.md new file mode 100644 index 000000000..bec42e058 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IJsiByteBuffer-api-windows.md @@ -0,0 +1,24 @@ +--- +id: version-0.82-IJsiByteBuffer +title: IJsiByteBuffer +original_id: IJsiByteBuffer +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Properties +### Size +`readonly` uint32_t `Size` + +## Methods +### GetData +void **`GetData`**([`JsiByteArrayUser`](JsiByteArrayUser) useBytes) + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/IJsiHostObject-api-windows.md b/website/versioned_docs/version-0.82/native-api/IJsiHostObject-api-windows.md new file mode 100644 index 000000000..36bd8f294 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IJsiHostObject-api-windows.md @@ -0,0 +1,26 @@ +--- +id: version-0.82-IJsiHostObject +title: IJsiHostObject +original_id: IJsiHostObject +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Methods +### GetProperty +[`JsiValueRef`](JsiValueRef) **`GetProperty`**([`JsiRuntime`](JsiRuntime) runtime, [`JsiPropertyIdRef`](JsiPropertyIdRef) propertyId) + +### GetPropertyIds +[`IVector`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Collections.IVector-1)<[`JsiPropertyIdRef`](JsiPropertyIdRef)> **`GetPropertyIds`**([`JsiRuntime`](JsiRuntime) runtime) + +### SetProperty +void **`SetProperty`**([`JsiRuntime`](JsiRuntime) runtime, [`JsiPropertyIdRef`](JsiPropertyIdRef) propertyId, [`JsiValueRef`](JsiValueRef) value) + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/IPointerPointTransform-api-windows.md b/website/versioned_docs/version-0.82/native-api/IPointerPointTransform-api-windows.md new file mode 100644 index 000000000..3b4d5669d --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IPointerPointTransform-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-IPointerPointTransform +title: IPointerPointTransform +original_id: IPointerPointTransform +--- + +Kind: `interface` + +## Properties +### Inverse +`readonly` [`IPointerPointTransform`](IPointerPointTransform) `Inverse` + +## Methods +### TryTransform +bool **`TryTransform`**([`Point`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Point) inPoint, **out** [`Point`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Point) outPoint) + +### TryTransformBounds +bool **`TryTransformBounds`**([`Rect`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Rect) inRect, **out** [`Rect`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Rect) outRect) diff --git a/website/versioned_docs/version-0.82/native-api/IPortalStateData-api-windows.md b/website/versioned_docs/version-0.82/native-api/IPortalStateData-api-windows.md new file mode 100644 index 000000000..2e44dc7f2 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IPortalStateData-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-IPortalStateData +title: IPortalStateData +original_id: IPortalStateData +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +StateData type to be used with a PortalComponentView. The LayoutConstraints and PointScaleFactor will be used to layout the content of the Portal + +## Properties +### LayoutConstraints +`readonly` [`LayoutConstraints`](LayoutConstraints) `LayoutConstraints` + +### PointScaleFactor +`readonly` float `PointScaleFactor` diff --git a/website/versioned_docs/version-0.82/native-api/IReactCompositionViewComponentBuilder-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactCompositionViewComponentBuilder-api-windows.md new file mode 100644 index 000000000..be7e7c827 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactCompositionViewComponentBuilder-api-windows.md @@ -0,0 +1,33 @@ +--- +id: version-0.82-IReactCompositionViewComponentBuilder +title: IReactCompositionViewComponentBuilder +original_id: IReactCompositionViewComponentBuilder +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +. + +## Methods +### SetContentIslandComponentViewInitializer +void **`SetContentIslandComponentViewInitializer`**([`ComponentIslandComponentViewInitializer`](ComponentIslandComponentViewInitializer) initializer) + +### SetCreateVisualHandler +void **`SetCreateVisualHandler`**([`CreateVisualDelegate`](CreateVisualDelegate) impl) + +### SetPortalComponentViewInitializer +void **`SetPortalComponentViewInitializer`**([`PortalComponentViewInitializer`](PortalComponentViewInitializer) initializer) + +### SetUpdateLayoutMetricsHandler +void **`SetUpdateLayoutMetricsHandler`**([`UpdateLayoutMetricsDelegate`](UpdateLayoutMetricsDelegate) impl) + +### SetViewComponentViewInitializer +void **`SetViewComponentViewInitializer`**([`ViewComponentViewInitializer`](ViewComponentViewInitializer) initializer) + +### SetViewFeatures +void **`SetViewFeatures`**([`ComponentViewFeatures`](ComponentViewFeatures) viewFeatures) + +### SetVisualToMountChildrenIntoHandler +void **`SetVisualToMountChildrenIntoHandler`**([`VisualToMountChildrenIntoDelegate`](VisualToMountChildrenIntoDelegate) impl) diff --git a/website/versioned_docs/version-0.82/native-api/IReactCompositionViewComponentInternalBuilder-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactCompositionViewComponentInternalBuilder-api-windows.md new file mode 100644 index 000000000..a3b41391a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactCompositionViewComponentInternalBuilder-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-IReactCompositionViewComponentInternalBuilder +title: IReactCompositionViewComponentInternalBuilder +original_id: IReactCompositionViewComponentInternalBuilder +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +This interface is for use when running react-native-windows using a custom compositor. This interface will be removed in future versions + +## Methods +### SetIVisualToMountChildrenIntoHandler +void **`SetIVisualToMountChildrenIntoHandler`**([`IVisualToMountChildrenIntoDelegate`](IVisualToMountChildrenIntoDelegate) impl) diff --git a/website/versioned_docs/version-0.82/native-api/IReactContext-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactContext-api-windows.md new file mode 100644 index 000000000..adcee3ed1 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactContext-api-windows.md @@ -0,0 +1,193 @@ +--- +id: version-0.82-IReactContext +title: IReactContext +original_id: IReactContext +--- + +## New Architecture + +Kind: `interface` + +The `IReactContext` object is a weak pointer to the React instance. It allows native modules and view managers to communicate with the application, and with other native modules and view managers. +Since the [`IReactContext`](IReactContext) is a weak pointer to the React instance, some of its functionality becomes unavailable after the React instance is unloaded. When a React instance is reloaded inside of the [`ReactNativeHost`](ReactNativeHost), the previous React instance is unloaded and then a new React instance is created with a new [`IReactContext`](IReactContext). +- Use the [`Properties`](#properties-1) to share native module's data with other components. +- Use the [`Notifications`](#notifications) to exchange events with other components. +- Use [`CallJSFunction`](#calljsfunction) to call JavaScript functions, and [`EmitJSEvent`](#emitjsevent) to raise JavaScript events. +- Use [`UIDispatcher`](#uidispatcher) to post asynchronous work in the UI thread. +- Use [`JSDispatcher`](#jsdispatcher) to post asynchronous work in the JavaScript engine thread. + +### Properties +#### CallInvoker +`readonly` [`CallInvoker`](CallInvoker) `CallInvoker` + +used to schedule work on the JS runtime. Most direct usage of this should be avoided by using ReactContext.CallInvoker. + +#### JSDispatcher +`readonly` [`IReactDispatcher`](IReactDispatcher) `JSDispatcher` + +> **Deprecated**: Use [`IReactContext.CallInvoker`](IReactContext#callinvoker) instead + +Gets the JavaScript engine thread dispatcher. +It is a shortcut for the [`ReactDispatcherHelper.JSDispatcherProperty`](ReactDispatcherHelper#jsdispatcherproperty) from the [`Properties`](#properties-1) property bag. + +#### JSRuntime +`readonly` Object `JSRuntime` + +Gets the JavaScript runtime for the running React instance. +It can be null if Web debugging is used. +**Note: do not use this property directly. It is an experimental property will be removed in a future version. +Deprecated for new Arch: Use [`IReactContext.CallInvoker`](IReactContext#callinvoker) instead. + +#### LoadingState +`readonly` [`LoadingState`](LoadingState) `LoadingState` + +Gets the state of the ReactNative instance. + +#### Notifications +`readonly` [`IReactNotificationService`](IReactNotificationService) `Notifications` + +Gets the [`IReactNotificationService`](IReactNotificationService) shared with the [`ReactInstanceSettings.Notifications`](ReactInstanceSettings#notifications). +It can be used to send notifications events between components and the application. +All notification subscriptions added to the [`IReactContext.Notifications`](IReactContext#notifications) are automatically removed after the [`IReactContext`](IReactContext) is destroyed. +The notification subscriptions added to the [`ReactInstanceSettings.Notifications`](ReactInstanceSettings#notifications) are kept as long as the [`ReactInstanceSettings`](ReactInstanceSettings) is alive. + +#### Properties +`readonly` [`IReactPropertyBag`](IReactPropertyBag) `Properties` + +Gets the [`IReactPropertyBag`](IReactPropertyBag) shared with the [`ReactInstanceSettings.Properties`](ReactInstanceSettings#properties-1). +It can be used to share values and state between components and the applications. + +#### SettingsSnapshot +`readonly` [`IReactSettingsSnapshot`](IReactSettingsSnapshot) `SettingsSnapshot` + +Gets the settings snapshot that was used to start the React instance. + +#### UIDispatcher +`readonly` [`IReactDispatcher`](IReactDispatcher) `UIDispatcher` + +Gets the UI thread dispatcher. +It is a shortcut for the [`ReactDispatcherHelper.UIDispatcherProperty`](ReactDispatcherHelper#uidispatcherproperty) from the [`Properties`](#properties-1) property bag. + +### Methods +#### CallJSFunction +void **`CallJSFunction`**(string moduleName, string methodName, [`JSValueArgWriter`](JSValueArgWriter) paramsArgWriter) + +Calls the JavaScript function named `methodName` of `moduleName` with the `paramsArgWriter`. +The `paramsArgWriter` is a [`JSValueArgWriter`](JSValueArgWriter) delegate that receives [`IJSValueWriter`](IJSValueWriter) to serialize the method parameters. + +#### EmitJSEvent +void **`EmitJSEvent`**(string eventEmitterName, string eventName, [`JSValueArgWriter`](JSValueArgWriter) paramsArgWriter) + +Emits JavaScript module event `eventName` for the `eventEmitterName` with the `paramsArgWriter`. +It is a specialized [`CallJSFunction`](#calljsfunction)` call where the method name is always `emit` and the `eventName` is added to parameters. +The `paramsArgWriter` is a [`JSValueArgWriter`](JSValueArgWriter) delegate that receives [`IJSValueWriter`](IJSValueWriter) to serialize the event parameters. + +### Referenced by +- [`ComponentView`](ComponentView) +- [`IReactViewInstance`](IReactViewInstance) +- [`InitializerDelegate`](InitializerDelegate) +- [`InstanceCreatedEventArgs`](InstanceCreatedEventArgs) +- [`InstanceDestroyedEventArgs`](InstanceDestroyedEventArgs) +- [`InstanceLoadedEventArgs`](InstanceLoadedEventArgs) +- [`JsiInitializerDelegate`](JsiInitializerDelegate) +- [`ReactCoreInjection`](ReactCoreInjection) +- [`ReactNativeHost`](ReactNativeHost) +- [`XamlUIService`](XamlUIService) + +## Old Architecture + +Kind: `interface` + +The `IReactContext` object is a weak pointer to the React instance. It allows native modules and view managers to communicate with the application, and with other native modules and view managers. +Since the [`IReactContext`](IReactContext) is a weak pointer to the React instance, some of its functionality becomes unavailable after the React instance is unloaded. When a React instance is reloaded inside of the [`ReactNativeHost`](ReactNativeHost), the previous React instance is unloaded and then a new React instance is created with a new [`IReactContext`](IReactContext). +- Use the [`Properties`](#properties-1) to share native module's data with other components. +- Use the [`Notifications`](#notifications) to exchange events with other components. +- Use [`CallJSFunction`](#calljsfunction) to call JavaScript functions, and [`EmitJSEvent`](#emitjsevent) to raise JavaScript events. +- Use [`UIDispatcher`](#uidispatcher) to post asynchronous work in the UI thread. +- Use [`JSDispatcher`](#jsdispatcher) to post asynchronous work in the JavaScript engine thread. + +### Properties +#### CallInvoker +`readonly` [`CallInvoker`](CallInvoker) `CallInvoker` + +used to schedule work on the JS runtime. Most direct usage of this should be avoided by using ReactContext.CallInvoker. + +#### JSDispatcher +`readonly` [`IReactDispatcher`](IReactDispatcher) `JSDispatcher` + +> **Deprecated**: Use [`IReactContext.CallInvoker`](IReactContext#callinvoker) instead + +Gets the JavaScript engine thread dispatcher. +It is a shortcut for the [`ReactDispatcherHelper.JSDispatcherProperty`](ReactDispatcherHelper#jsdispatcherproperty) from the [`Properties`](#properties-1) property bag. + +#### JSRuntime +`readonly` Object `JSRuntime` + +Gets the JavaScript runtime for the running React instance. +It can be null if Web debugging is used. +**Note: do not use this property directly. It is an experimental property will be removed in a future version. +Deprecated for new Arch: Use [`IReactContext.CallInvoker`](IReactContext#callinvoker) instead. + +#### LoadingState +`readonly` [`LoadingState`](LoadingState) `LoadingState` + +Gets the state of the ReactNative instance. + +#### Notifications +`readonly` [`IReactNotificationService`](IReactNotificationService) `Notifications` + +Gets the [`IReactNotificationService`](IReactNotificationService) shared with the [`ReactInstanceSettings.Notifications`](ReactInstanceSettings#notifications). +It can be used to send notifications events between components and the application. +All notification subscriptions added to the [`IReactContext.Notifications`](IReactContext#notifications) are automatically removed after the [`IReactContext`](IReactContext) is destroyed. +The notification subscriptions added to the [`ReactInstanceSettings.Notifications`](ReactInstanceSettings#notifications) are kept as long as the [`ReactInstanceSettings`](ReactInstanceSettings) is alive. + +#### Properties +`readonly` [`IReactPropertyBag`](IReactPropertyBag) `Properties` + +Gets the [`IReactPropertyBag`](IReactPropertyBag) shared with the [`ReactInstanceSettings.Properties`](ReactInstanceSettings#properties-1). +It can be used to share values and state between components and the applications. + +#### SettingsSnapshot +`readonly` [`IReactSettingsSnapshot`](IReactSettingsSnapshot) `SettingsSnapshot` + +Gets the settings snapshot that was used to start the React instance. + +#### UIDispatcher +`readonly` [`IReactDispatcher`](IReactDispatcher) `UIDispatcher` + +Gets the UI thread dispatcher. +It is a shortcut for the [`ReactDispatcherHelper.UIDispatcherProperty`](ReactDispatcherHelper#uidispatcherproperty) from the [`Properties`](#properties-1) property bag. + +### Methods +#### CallJSFunction +void **`CallJSFunction`**(string moduleName, string methodName, [`JSValueArgWriter`](JSValueArgWriter) paramsArgWriter) + +Calls the JavaScript function named `methodName` of `moduleName` with the `paramsArgWriter`. +The `paramsArgWriter` is a [`JSValueArgWriter`](JSValueArgWriter) delegate that receives [`IJSValueWriter`](IJSValueWriter) to serialize the method parameters. + +#### DispatchEvent +void **`DispatchEvent`**([`FrameworkElement`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.FrameworkElement) view, string eventName, [`JSValueArgWriter`](JSValueArgWriter) eventDataArgWriter) + +> **Deprecated**: Use [`XamlUIService.DispatchEvent`](XamlUIService#dispatchevent) instead + +Deprecated property. Use [`XamlUIService.DispatchEvent`](XamlUIService#dispatchevent) instead. It will be removed in a future version. + +#### EmitJSEvent +void **`EmitJSEvent`**(string eventEmitterName, string eventName, [`JSValueArgWriter`](JSValueArgWriter) paramsArgWriter) + +Emits JavaScript module event `eventName` for the `eventEmitterName` with the `paramsArgWriter`. +It is a specialized [`CallJSFunction`](#calljsfunction)` call where the method name is always `emit` and the `eventName` is added to parameters. +The `paramsArgWriter` is a [`JSValueArgWriter`](JSValueArgWriter) delegate that receives [`IJSValueWriter`](IJSValueWriter) to serialize the event parameters. + +### Referenced by +- [`IReactViewInstance`](IReactViewInstance) +- [`IViewManagerWithReactContext`](IViewManagerWithReactContext) +- [`InitializerDelegate`](InitializerDelegate) +- [`InstanceCreatedEventArgs`](InstanceCreatedEventArgs) +- [`InstanceDestroyedEventArgs`](InstanceDestroyedEventArgs) +- [`InstanceLoadedEventArgs`](InstanceLoadedEventArgs) +- [`JsiInitializerDelegate`](JsiInitializerDelegate) +- [`LayoutService`](LayoutService) +- [`ReactCoreInjection`](ReactCoreInjection) +- [`ReactNativeHost`](ReactNativeHost) +- [`XamlUIService`](XamlUIService) diff --git a/website/versioned_docs/version-0.82/native-api/IReactDispatcher-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactDispatcher-api-windows.md new file mode 100644 index 000000000..52b542dfd --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactDispatcher-api-windows.md @@ -0,0 +1,30 @@ +--- +id: version-0.82-IReactDispatcher +title: IReactDispatcher +original_id: IReactDispatcher +--- + +Kind: `interface` + +`IReactDispatcher` provides the core threading/task management interface for ensuring that the code execution happens in the right order on the right thread. +One primary dispatcher that applications may require is the [`IReactContext.UIDispatcher`](IReactContext#uidispatcher) which provides native modules access to the UI thread associated with this React instance. Another one is the [`IReactContext.JSDispatcher`](IReactContext#jsdispatcher) which allows apps to post tasks to the JS engine thread. + +## Properties +### HasThreadAccess +`readonly` bool `HasThreadAccess` + +`true` if the dispatcher uses current thread. + +## Methods +### Post +void **`Post`**([`ReactDispatcherCallback`](ReactDispatcherCallback) callback) + +Posts a task to the dispatcher. +The `callback` will be called asynchronously on the thread/queue associated with this dispatcher. + +## Referenced by +- [`IReactContext`](IReactContext) +- [`IReactNotificationService`](IReactNotificationService) +- [`IReactNotificationSubscription`](IReactNotificationSubscription) +- [`ReactDispatcherHelper`](ReactDispatcherHelper) +- [`ReactInstanceSettings`](ReactInstanceSettings) diff --git a/website/versioned_docs/version-0.82/native-api/IReactModuleBuilder-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactModuleBuilder-api-windows.md new file mode 100644 index 000000000..e68c9244a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactModuleBuilder-api-windows.md @@ -0,0 +1,44 @@ +--- +id: version-0.82-IReactModuleBuilder +title: IReactModuleBuilder +original_id: IReactModuleBuilder +--- + +Kind: `interface` + +Builds native module inside of ReactNative code based on the provided meta-data. +See [Native Modules](native-modules) for more usage information. + +## Methods +### AddConstantProvider +void **`AddConstantProvider`**([`ConstantProviderDelegate`](ConstantProviderDelegate) constantProvider) + +Adds a constant provider method to define constants for the native module. See [`ConstantProviderDelegate`](ConstantProviderDelegate). + +### AddEventEmitter +void **`AddEventEmitter`**(string name, [`EventEmitterInitializerDelegate`](EventEmitterInitializerDelegate) emitter) + +Adds an EventEmitter to the turbo module. See [`EventEmitterInitializerDelegate`](EventEmitterInitializerDelegate). + +### AddInitializer +void **`AddInitializer`**([`InitializerDelegate`](InitializerDelegate) initializer) + +Adds an initializer method called on the native module initialization. +It provides the native module with the [`IReactContext`](IReactContext) for the running ReactNative instance. See [`InitializerDelegate`](InitializerDelegate). +There can be multiple initializer methods which are called in the order they were registered. + +### AddJsiInitializer +void **`AddJsiInitializer`**([`JsiInitializerDelegate`](JsiInitializerDelegate) initializer) + +### AddMethod +void **`AddMethod`**(string name, [`MethodReturnType`](MethodReturnType) returnType, [`MethodDelegate`](MethodDelegate) method) + +Adds an asynchronous method to the native module. See [`MethodDelegate`](MethodDelegate). + +### AddSyncMethod +void **`AddSyncMethod`**(string name, [`SyncMethodDelegate`](SyncMethodDelegate) method) + +Adds a synchronous method to the native module. See [`SyncMethodDelegate`](SyncMethodDelegate). + +## Referenced by +- [`ReactModuleProvider`](ReactModuleProvider) diff --git a/website/versioned_docs/version-0.82/native-api/IReactNonAbiValue-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactNonAbiValue-api-windows.md new file mode 100644 index 000000000..f7fd58139 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactNonAbiValue-api-windows.md @@ -0,0 +1,19 @@ +--- +id: version-0.82-IReactNonAbiValue +title: IReactNonAbiValue +original_id: IReactNonAbiValue +--- + +Kind: `interface` + +The `IReactNonAbiValue` helps wrapping a non-ABI-safe C++ value into an `IInspectable` object. Use it to handle native module lifetime. +It also can be used to store values in the [`IReactPropertyBag`](IReactPropertyBag) that do not need to go through the EXE/DLL boundary. + +## Methods +### GetPtr +int64_t **`GetPtr`**() + +Gets a pointer to the stored value. + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/IReactNotificationArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactNotificationArgs-api-windows.md new file mode 100644 index 000000000..92f331a65 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactNotificationArgs-api-windows.md @@ -0,0 +1,23 @@ +--- +id: version-0.82-IReactNotificationArgs +title: IReactNotificationArgs +original_id: IReactNotificationArgs +--- + +Kind: `interface` + +Notification args provided to the notification handler. + +## Properties +### Data +`readonly` Object `Data` + +The data sent with the notification. It can be any WinRT type. Consider using [`IReactPropertyBag`](IReactPropertyBag) for sending semi-structured data. It can be null if the notification has no data associated with it. + +### Subscription +`readonly` [`IReactNotificationSubscription`](IReactNotificationSubscription) `Subscription` + +The notification subscription that can be used to unsubscribe in the notification handler. It also has the name and dispatcher associated with the notification. + +## Referenced by +- [`ReactNotificationHandler`](ReactNotificationHandler) diff --git a/website/versioned_docs/version-0.82/native-api/IReactNotificationService-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactNotificationService-api-windows.md new file mode 100644 index 000000000..1914fa38a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactNotificationService-api-windows.md @@ -0,0 +1,35 @@ +--- +id: version-0.82-IReactNotificationService +title: IReactNotificationService +original_id: IReactNotificationService +--- + +Kind: `interface` + +The notification service that can be used to send notifications between different components in an app. +Use the [`Subscribe`](#subscribe) method to subscribe to notifications and the [`SendNotification`](#sendnotification) method to send notifications. + +## Methods +### SendNotification +void **`SendNotification`**([`IReactPropertyName`](IReactPropertyName) notificationName, Object sender, Object data) + +Sends the notification with `notificationName`. +- `notificationName` is the name of the notification to send. It must not be null. +- `sender` is the object that sends notification. It can be null. +- `data` is the data associated with the notification. It can be null. +Consider using [`IReactPropertyBag`](IReactPropertyBag) for sending semi-structured data. It can be created using the [`ReactPropertyBagHelper.CreatePropertyBag`](ReactPropertyBagHelper#createpropertybag) method. + +### Subscribe +[`IReactNotificationSubscription`](IReactNotificationSubscription) **`Subscribe`**([`IReactPropertyName`](IReactPropertyName) notificationName, [`IReactDispatcher`](IReactDispatcher) dispatcher, [`ReactNotificationHandler`](ReactNotificationHandler) handler) + +Subscribes to a notification. +- `notificationName` is a non-null notification name that can belong to a specific namespace like any [`IReactPropertyName`](IReactPropertyName). +- `dispatcher` is used to call notification handlers. If it is null, then the handler is called synchronously. +- `handler` is a delegate that can be implemented as a lambda to handle notifications. +The method returns a [`IReactNotificationSubscription`](IReactNotificationSubscription) that must be kept alive while the subscription is active. The subscription is removed when the [`IReactNotificationSubscription`](IReactNotificationSubscription) is destroyed. + +## Referenced by +- [`IReactContext`](IReactContext) +- [`IReactNotificationSubscription`](IReactNotificationSubscription) +- [`ReactInstanceSettings`](ReactInstanceSettings) +- [`ReactNotificationServiceHelper`](ReactNotificationServiceHelper) diff --git a/website/versioned_docs/version-0.82/native-api/IReactNotificationSubscription-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactNotificationSubscription-api-windows.md new file mode 100644 index 000000000..b8b8b26ba --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactNotificationSubscription-api-windows.md @@ -0,0 +1,46 @@ +--- +id: version-0.82-IReactNotificationSubscription +title: IReactNotificationSubscription +original_id: IReactNotificationSubscription +--- + +Kind: `interface` + +A subscription to a [`IReactNotificationService`](IReactNotificationService) notification. +The subscription is removed when this object is deleted or the [`Unsubscribe`](#unsubscribe) method is called. + +## Properties +### Dispatcher +`readonly` [`IReactDispatcher`](IReactDispatcher) `Dispatcher` + +The [`IReactDispatcher`](IReactDispatcher) that was provided when the notification subscription was created. +All notifications for this subscription will be handled using this dispatcher. +If the dispatcher is null, then the events are handled synchronously. + +### IsSubscribed +`readonly` bool `IsSubscribed` + +True if the subscription is still active. +This property is checked internally before the notification handler is invoked. + +### NotificationName +`readonly` [`IReactPropertyName`](IReactPropertyName) `NotificationName` + +Name of the notification. + +### NotificationService +`readonly` [`IReactNotificationService`](IReactNotificationService) `NotificationService` + +The notification service for the subscription. +It can be null if [`IsSubscribed`](#issubscribed) is true and the notification service was already deleted. + +## Methods +### Unsubscribe +void **`Unsubscribe`**() + +Removes the subscription. +Because of the multi-threaded nature of the notifications, the handler can be still called after the [`Unsubscribe`](#unsubscribe) method has been called if the [`IsSubscribed`](#issubscribed) property has already been checked. Consider calling the [`Unsubscribe`](#unsubscribe) method and the handler in the same [`IReactDispatcher`](IReactDispatcher) to ensure that no handler is invoked after the [`Unsubscribe`](#unsubscribe) method call. + +## Referenced by +- [`IReactNotificationArgs`](IReactNotificationArgs) +- [`IReactNotificationService`](IReactNotificationService) diff --git a/website/versioned_docs/version-0.82/native-api/IReactPackageBuilder-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactPackageBuilder-api-windows.md new file mode 100644 index 000000000..ee221b64c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactPackageBuilder-api-windows.md @@ -0,0 +1,52 @@ +--- +id: version-0.82-IReactPackageBuilder +title: IReactPackageBuilder +original_id: IReactPackageBuilder +--- + +## New Architecture + +Kind: `interface` + +Builds ReactNative package with the set of native modules and view managers. + +### Methods +#### AddModule +void **`AddModule`**(string moduleName, [`ReactModuleProvider`](ReactModuleProvider) moduleProvider) + +Adds a custom native module. See [`ReactModuleProvider`](ReactModuleProvider). + +#### AddTurboModule +void **`AddTurboModule`**(string moduleName, [`ReactModuleProvider`](ReactModuleProvider) moduleProvider) + +Adds a custom native module. See [`ReactModuleProvider`](ReactModuleProvider). This will register themodule as a TurboModule unless the application is running using [`ReactInstanceSettings.UseWebDebugger`](ReactInstanceSettings#usewebdebugger),in which case it will revert to a legacy NativeModule. +NOTE: TurboModules using JSI directly will not run correctly while using [`ReactInstanceSettings.UseWebDebugger`](ReactInstanceSettings#usewebdebugger) + +### Referenced by +- [`IReactPackageProvider`](IReactPackageProvider) + +## Old Architecture + +Kind: `interface` + +Builds ReactNative package with the set of native modules and view managers. + +### Methods +#### AddModule +void **`AddModule`**(string moduleName, [`ReactModuleProvider`](ReactModuleProvider) moduleProvider) + +Adds a custom native module. See [`ReactModuleProvider`](ReactModuleProvider). + +#### AddTurboModule +void **`AddTurboModule`**(string moduleName, [`ReactModuleProvider`](ReactModuleProvider) moduleProvider) + +Adds a custom native module. See [`ReactModuleProvider`](ReactModuleProvider). This will register themodule as a TurboModule unless the application is running using [`ReactInstanceSettings.UseWebDebugger`](ReactInstanceSettings#usewebdebugger),in which case it will revert to a legacy NativeModule. +NOTE: TurboModules using JSI directly will not run correctly while using [`ReactInstanceSettings.UseWebDebugger`](ReactInstanceSettings#usewebdebugger) + +#### AddViewManager +void **`AddViewManager`**(string viewManagerName, [`ReactViewManagerProvider`](ReactViewManagerProvider) viewManagerProvider) + +Adds a custom view manager. See [`ReactViewManagerProvider`](ReactViewManagerProvider). + +### Referenced by +- [`IReactPackageProvider`](IReactPackageProvider) diff --git a/website/versioned_docs/version-0.82/native-api/IReactPackageBuilderFabric-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactPackageBuilderFabric-api-windows.md new file mode 100644 index 000000000..057cc12d9 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactPackageBuilderFabric-api-windows.md @@ -0,0 +1,22 @@ +--- +id: version-0.82-IReactPackageBuilderFabric +title: IReactPackageBuilderFabric +original_id: IReactPackageBuilderFabric +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +Provides ability to register custom ViewComponents when running fabric. + +## Methods +### AddUriImageProvider +void **`AddUriImageProvider`**([`IUriImageProvider`](IUriImageProvider) provider) + +Ability to load images using custom Uri protocol handlers. + +### AddViewComponent +void **`AddViewComponent`**(string componentName, [`ReactViewComponentProvider`](ReactViewComponentProvider) componentProvider) + +Registers a custom native view component. diff --git a/website/versioned_docs/version-0.82/native-api/IReactPackageProvider-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactPackageProvider-api-windows.md new file mode 100644 index 000000000..06e5a5877 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactPackageProvider-api-windows.md @@ -0,0 +1,16 @@ +--- +id: version-0.82-IReactPackageProvider +title: IReactPackageProvider +original_id: IReactPackageProvider +--- + +Kind: `interface` + +Implement this interface to provide custom native modules and view managers. + +## Methods +### CreatePackage +void **`CreatePackage`**([`IReactPackageBuilder`](IReactPackageBuilder) packageBuilder) + +Creates a new package with help of the [`IReactPackageBuilder`](IReactPackageBuilder). +Use the [`IReactPackageBuilder`](IReactPackageBuilder) to register custom native modules and view managers. diff --git a/website/versioned_docs/version-0.82/native-api/IReactPropertyBag-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactPropertyBag-api-windows.md new file mode 100644 index 000000000..2fb7e64b8 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactPropertyBag-api-windows.md @@ -0,0 +1,45 @@ +--- +id: version-0.82-IReactPropertyBag +title: IReactPropertyBag +original_id: IReactPropertyBag +--- + +Kind: `interface` + +`IReactPropertyBag` provides a thread-safe property storage. +Properties are identified by an instance of [`IReactPropertyName`](IReactPropertyName). It is expected that there will be no direct use of this interface. Ideally, all usage should happen through strongly-typed accessors. + +## Methods +### CopyFrom +void **`CopyFrom`**([`IReactPropertyBag`](IReactPropertyBag) other) + +Copies the properties from another property bag + +### Get +Object **`Get`**([`IReactPropertyName`](IReactPropertyName) name) + +Gets value of the `name` property. +It returns null if the property does not exist. + +### GetOrCreate +Object **`GetOrCreate`**([`IReactPropertyName`](IReactPropertyName) name, [`ReactCreatePropertyValue`](ReactCreatePropertyValue) createValue) + +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. + +### Set +Object **`Set`**([`IReactPropertyName`](IReactPropertyName) name, Object value) + +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. + +## Referenced by +- [`IReactContext`](IReactContext) +- [`ReactCoreInjection`](ReactCoreInjection) +- [`ReactInstanceSettings`](ReactInstanceSettings) +- [`ReactPropertyBagHelper`](ReactPropertyBagHelper) +- [`Timer`](Timer) +- [`UIBatchCompleteCallback`](UIBatchCompleteCallback) +- [`XamlUIService`](XamlUIService) diff --git a/website/versioned_docs/version-0.82/native-api/IReactPropertyName-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactPropertyName-api-windows.md new file mode 100644 index 000000000..9f89e5e29 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactPropertyName-api-windows.md @@ -0,0 +1,29 @@ +--- +id: version-0.82-IReactPropertyName +title: IReactPropertyName +original_id: IReactPropertyName +--- + +Kind: `interface` + +A name for a [`IReactPropertyBag`](IReactPropertyBag) property. +Use [`ReactPropertyBagHelper.GetName`](ReactPropertyBagHelper#getname) to get atomic property name for a string in a [`IReactPropertyNamespace`](IReactPropertyNamespace). +Each [`IReactPropertyName`](IReactPropertyName) object has a unique [`LocalName`](#localname) in context of the [`IReactPropertyNamespace`](IReactPropertyNamespace) + +## Properties +### LocalName +`readonly` string `LocalName` + +Gets String representation of the [`IReactPropertyName`](IReactPropertyName). + +### Namespace +`readonly` [`IReactPropertyNamespace`](IReactPropertyNamespace) `Namespace` + +Gets the [`IReactPropertyNamespace`](IReactPropertyNamespace) where the property name is defined. + +## Referenced by +- [`IReactNotificationService`](IReactNotificationService) +- [`IReactNotificationSubscription`](IReactNotificationSubscription) +- [`IReactPropertyBag`](IReactPropertyBag) +- [`ReactDispatcherHelper`](ReactDispatcherHelper) +- [`ReactPropertyBagHelper`](ReactPropertyBagHelper) diff --git a/website/versioned_docs/version-0.82/native-api/IReactPropertyNamespace-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactPropertyNamespace-api-windows.md new file mode 100644 index 000000000..0ba5f819a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactPropertyNamespace-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-IReactPropertyNamespace +title: IReactPropertyNamespace +original_id: IReactPropertyNamespace +--- + +Kind: `interface` + +A namespace for a [`IReactPropertyBag`](IReactPropertyBag) property name. +Use [`ReactPropertyBagHelper.GetNamespace`](ReactPropertyBagHelper#getnamespace) to get atomic property namespace for a string. + +## Properties +### NamespaceName +`readonly` string `NamespaceName` + +Gets String representation of the [`IReactPropertyNamespace`](IReactPropertyNamespace). + +## Referenced by +- [`IReactPropertyName`](IReactPropertyName) +- [`ReactPropertyBagHelper`](ReactPropertyBagHelper) diff --git a/website/versioned_docs/version-0.82/native-api/IReactSettingsSnapshot-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactSettingsSnapshot-api-windows.md new file mode 100644 index 000000000..112dc57b6 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactSettingsSnapshot-api-windows.md @@ -0,0 +1,101 @@ +--- +id: version-0.82-IReactSettingsSnapshot +title: IReactSettingsSnapshot +original_id: IReactSettingsSnapshot +--- + +Kind: `interface` + +An immutable snapshot of the [`ReactInstanceSettings`](ReactInstanceSettings) used to create the current React instance. + +## Properties +### BundleAppId +`readonly` string `BundleAppId` + +A read-only snapshot of the [`ReactInstanceSettings.BundleAppId`](ReactInstanceSettings#bundleappid) property value at the time when the React instance was created. +The name of the app passed to the packager server via the 'app' query parameter. + +### BundleRootPath +`readonly` string `BundleRootPath` + +A read-only snapshot of the [`ReactInstanceSettings.BundleRootPath`](ReactInstanceSettings#bundlerootpath) property value at the time when the React instance was created. +Base path used for the location of the bundle. + +### DebugBundlePath +`readonly` string `DebugBundlePath` + +A read-only snapshot of the [`ReactInstanceSettings.DebugBundlePath`](ReactInstanceSettings#debugbundlepath) property value at the time when the React instance was created. +When loading from a bundle server (such as metro), this is the path that will be requested from the server. + +### DebuggerBreakOnNextLine +`readonly` bool `DebuggerBreakOnNextLine` + +A read-only snapshot of the [`ReactInstanceSettings.DebuggerBreakOnNextLine`](ReactInstanceSettings#debuggerbreakonnextline) property value at the time when the React instance was created. +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 +`readonly` uint16_t `DebuggerPort` + +A read-only snapshot of the [`ReactInstanceSettings.DebuggerPort`](ReactInstanceSettings#debuggerport) property value at the time when the React instance was created. +When [`UseDirectDebugger`](#usedirectdebugger) is enabled, this controls the port that the JavaScript engine debugger will run on. + +### JavaScriptBundleFile +`readonly` string `JavaScriptBundleFile` + +A read-only snapshot of the [`ReactInstanceSettings.JavaScriptBundleFile`](ReactInstanceSettings#javascriptbundlefile) property value at the time when the React instance was created. +The name of the JavaScript bundle file to load. This should be a relative path from [`BundleRootPath`](#bundlerootpath). The `.bundle` extension will be appended to the end, when looking for the bundle file. + +### RequestDevBundle +`readonly` bool `RequestDevBundle` + +A read-only snapshot of the [`ReactInstanceSettings.RequestDevBundle`](ReactInstanceSettings#requestdevbundle) property value at the time when the React instance was created. +When querying the bundle server for a bundle, should it request the dev bundle or release bundle. + +### RequestInlineSourceMap +`readonly` bool `RequestInlineSourceMap` + +A read-only snapshot of the [`ReactInstanceSettings.RequestInlineSourceMap`](ReactInstanceSettings#requestinlinesourcemap) property value at the time when the React instance was created. +If set, the bundler will include the source maps inline (this will improve debugging experience, but for very large bundles it could have a significant performance hit) + +### SourceBundleHost +`readonly` string `SourceBundleHost` + +A read-only snapshot of the [`ReactInstanceSettings.SourceBundleHost`](ReactInstanceSettings#sourcebundlehost) property value at the time when the React instance was created. +When using [`ReactInstanceSettings.UseFastRefresh`](ReactInstanceSettings#usefastrefresh), [`ReactInstanceSettings.UseLiveReload`](ReactInstanceSettings#uselivereload), or [`ReactInstanceSettings.UseWebDebugger`](ReactInstanceSettings#usewebdebugger) this is the server hostname that will be used to load the bundle from. + +### SourceBundlePort +`readonly` uint16_t `SourceBundlePort` + +A read-only snapshot of the [`ReactInstanceSettings.SourceBundlePort`](ReactInstanceSettings#sourcebundleport) property value at the time when the React instance was created. +When using [`ReactInstanceSettings.UseFastRefresh`](ReactInstanceSettings#usefastrefresh), [`ReactInstanceSettings.UseLiveReload`](ReactInstanceSettings#uselivereload), or [`ReactInstanceSettings.UseWebDebugger`](ReactInstanceSettings#usewebdebugger) this is the server port that will be used to load the bundle from. + +### UseDirectDebugger +`readonly` bool `UseDirectDebugger` + +A read-only snapshot of the [`ReactInstanceSettings.UseDirectDebugger`](ReactInstanceSettings#usedirectdebugger) property value at the time when the React instance was created. +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 +`readonly` bool `UseFastRefresh` + +A read-only snapshot of the [`ReactInstanceSettings.UseFastRefresh`](ReactInstanceSettings#usefastrefresh) property value at the time when the React instance was created. +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](https://reactnative.dev/docs/fast-refresh) for more information on Fast Refresh. + +### UseWebDebugger +`readonly` bool `UseWebDebugger` + +> **Deprecated**: Debugging should be done using DirectDebugging rather than WebDebugger. Web debugging changes the app behavior and will be removed in a future version. + +A read-only snapshot of the [`ReactInstanceSettings.UseWebDebugger`](ReactInstanceSettings#usewebdebugger) property value at the time when the React instance was created. +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. + +## Referenced by +- [`IReactContext`](IReactContext) diff --git a/website/versioned_docs/version-0.82/native-api/IReactViewComponentBuilder-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactViewComponentBuilder-api-windows.md new file mode 100644 index 000000000..033a5dc2c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactViewComponentBuilder-api-windows.md @@ -0,0 +1,57 @@ +--- +id: version-0.82-IReactViewComponentBuilder +title: IReactViewComponentBuilder +original_id: IReactViewComponentBuilder +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Methods +### SetComponentViewInitializer +void **`SetComponentViewInitializer`**([`ComponentViewInitializer`](ComponentViewInitializer) initializer) + +### SetCreateProps +void **`SetCreateProps`**([`ViewPropsFactory`](ViewPropsFactory) impl) + +Create an implementation of your custom Props type that will be passed to your components Composition.ICompositionViewComponent.UpdateProps method. + +### SetCreateShadowNode +void **`SetCreateShadowNode`**([`ViewShadowNodeFactory`](ViewShadowNodeFactory) impl) + +### SetCustomCommandHandler +void **`SetCustomCommandHandler`**([`HandleCommandDelegate`](HandleCommandDelegate) impl) + +### SetFinalizeUpdateHandler +void **`SetFinalizeUpdateHandler`**([`UpdateFinalizerDelegate`](UpdateFinalizerDelegate) impl) + +### SetInitialStateDataFactory +void **`SetInitialStateDataFactory`**([`InitialStateDataFactory`](InitialStateDataFactory) impl) + +### SetLayoutHandler +void **`SetLayoutHandler`**([`LayoutHandler`](LayoutHandler) impl) + +### SetMeasureContentHandler +void **`SetMeasureContentHandler`**([`MeasureContentHandler`](MeasureContentHandler) impl) + +### SetMountChildComponentViewHandler +void **`SetMountChildComponentViewHandler`**([`MountChildComponentViewDelegate`](MountChildComponentViewDelegate) impl) + +### SetShadowNodeCloner +void **`SetShadowNodeCloner`**([`ViewShadowNodeCloner`](ViewShadowNodeCloner) impl) + +### SetUnmountChildComponentViewHandler +void **`SetUnmountChildComponentViewHandler`**([`UnmountChildComponentViewDelegate`](UnmountChildComponentViewDelegate) impl) + +### SetUpdateEventEmitterHandler +void **`SetUpdateEventEmitterHandler`**([`UpdateEventEmitterDelegate`](UpdateEventEmitterDelegate) impl) + +### SetUpdatePropsHandler +void **`SetUpdatePropsHandler`**([`UpdatePropsDelegate`](UpdatePropsDelegate) impl) + +### SetUpdateStateHandler +void **`SetUpdateStateHandler`**([`UpdateStateDelegate`](UpdateStateDelegate) impl) + +## Referenced by +- [`ReactViewComponentProvider`](ReactViewComponentProvider) diff --git a/website/versioned_docs/version-0.82/native-api/IReactViewHost-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactViewHost-api-windows.md new file mode 100644 index 000000000..1ee5476ab --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactViewHost-api-windows.md @@ -0,0 +1,93 @@ +--- +id: version-0.82-IReactViewHost +title: IReactViewHost +original_id: IReactViewHost +--- + +## New Architecture + +Kind: `interface` + +> **EXPERIMENTAL** + +Used to implement a non-XAML platform ReactRootView. + +### Properties +#### ReactNativeHost +`readonly` [`ReactNativeHost`](ReactNativeHost) `ReactNativeHost` + +The ReactNativeHost associated with this ReactViewHost. + +### Methods +#### AttachViewInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`AttachViewInstance`**([`IReactViewInstance`](IReactViewInstance) operation) + +Attaches IReactViewInstance to the IReactViewHost. + +#### DetachViewInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`DetachViewInstance`**() + +Detaches IReactViewInstance from the IReactViewHost. + +#### ReloadViewInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`ReloadViewInstance`**() + +Reloads the IReactViewInstance if it is attached. + +#### ReloadViewInstanceWithOptions +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`ReloadViewInstanceWithOptions`**([`ReactViewOptions`](ReactViewOptions) operation) + +Reloads IReactViewInstance if it is attached with a new set of options. + +#### UnloadViewInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`UnloadViewInstance`**() + +Unloads the attached IReactViewInstance. + +### Referenced by +- [`CompositionHwndHost`](CompositionHwndHost) +- [`ReactCoreInjection`](ReactCoreInjection) +- [`ReactNativeIsland`](ReactNativeIsland) + +## Old Architecture + +Kind: `interface` + +> **EXPERIMENTAL** + +Used to implement a non-XAML platform ReactRootView. + +### Properties +#### ReactNativeHost +`readonly` [`ReactNativeHost`](ReactNativeHost) `ReactNativeHost` + +The ReactNativeHost associated with this ReactViewHost. + +### Methods +#### AttachViewInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`AttachViewInstance`**([`IReactViewInstance`](IReactViewInstance) operation) + +Attaches IReactViewInstance to the IReactViewHost. + +#### DetachViewInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`DetachViewInstance`**() + +Detaches IReactViewInstance from the IReactViewHost. + +#### ReloadViewInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`ReloadViewInstance`**() + +Reloads the IReactViewInstance if it is attached. + +#### ReloadViewInstanceWithOptions +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`ReloadViewInstanceWithOptions`**([`ReactViewOptions`](ReactViewOptions) operation) + +Reloads IReactViewInstance if it is attached with a new set of options. + +#### UnloadViewInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`UnloadViewInstance`**() + +Unloads the attached IReactViewInstance. + +### Referenced by +- [`ReactCoreInjection`](ReactCoreInjection) diff --git a/website/versioned_docs/version-0.82/native-api/IReactViewInstance-api-windows.md b/website/versioned_docs/version-0.82/native-api/IReactViewInstance-api-windows.md new file mode 100644 index 000000000..af61b73fd --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IReactViewInstance-api-windows.md @@ -0,0 +1,30 @@ +--- +id: version-0.82-IReactViewInstance +title: IReactViewInstance +original_id: IReactViewInstance +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +Used to implement a non-XAML platform ReactRootView. + +## Methods +### InitRootView +void **`InitRootView`**([`IReactContext`](IReactContext) context, [`ReactViewOptions`](ReactViewOptions) viewOptions) + +Initialize ReactRootView with the reactInstance and view-specific settings + +### UninitRootView +void **`UninitRootView`**() + +Uninitialize ReactRootView and destroy UI tree + +### UpdateRootView +void **`UpdateRootView`**() + +Update ReactRootView with changes in ReactInstance + +## Referenced by +- [`IReactViewHost`](IReactViewHost) diff --git a/website/versioned_docs/version-0.82/native-api/IRedBoxErrorFrameInfo-api-windows.md b/website/versioned_docs/version-0.82/native-api/IRedBoxErrorFrameInfo-api-windows.md new file mode 100644 index 000000000..a9861b7d1 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IRedBoxErrorFrameInfo-api-windows.md @@ -0,0 +1,35 @@ +--- +id: version-0.82-IRedBoxErrorFrameInfo +title: IRedBoxErrorFrameInfo +original_id: IRedBoxErrorFrameInfo +--- + +Kind: `interface` + +This object represents a single frame within the call stack of an error. + +## Properties +### Collapse +`readonly` bool `Collapse` + +True if this frame is part of the internals of `react-native`, that is likely not useful for the developer to see. + +### Column +`readonly` uint32_t `Column` + +The column within the line. + +### File +`readonly` string `File` + +The file location of this frame. + +### Line +`readonly` uint32_t `Line` + +The line number within the file. + +### Method +`readonly` string `Method` + +The method name of this frame. diff --git a/website/versioned_docs/version-0.82/native-api/IRedBoxErrorInfo-api-windows.md b/website/versioned_docs/version-0.82/native-api/IRedBoxErrorInfo-api-windows.md new file mode 100644 index 000000000..fe3174bbd --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IRedBoxErrorInfo-api-windows.md @@ -0,0 +1,48 @@ +--- +id: version-0.82-IRedBoxErrorInfo +title: IRedBoxErrorInfo +original_id: IRedBoxErrorInfo +--- + +Kind: `interface` + +This object provides information about the error. For JavaScript errors, a call stack is also provided. + +## Properties +### Callstack +`readonly` [`IVectorView`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Collections.IVectorView-1)<[`IRedBoxErrorFrameInfo`](IRedBoxErrorFrameInfo)> `Callstack` + +For JavaScript errors, this will contain the call stack of where the error occurred. + +### ComponentStack +`readonly` string `ComponentStack` + +This will contain the component stack where the error occurred, which can help identify the component that is producing the error. + +### ExtraData +`readonly` [`IJSValueReader`](IJSValueReader) `ExtraData` + +Provides access to extra data attached to the error. Adding additional data to the errors is not yet part of the stable API. + +### Id +`readonly` uint32_t `Id` + +This Id can be used in [`IRedBoxHandler.UpdateError`](IRedBoxHandler#updateerror) to identify which error is being updated. For native errors, this is currently always `0`, and [`IRedBoxHandler.UpdateError`](IRedBoxHandler#updateerror) will never be called. + +### Message +`readonly` string `Message` + +The error message. + +### Name +`readonly` string `Name` + +An identifier for this error. + +### OriginalMessage +`readonly` string `OriginalMessage` + +If the message was adjusted for formatting, or otherwise processed, this contains the message before those modifications. + +## Referenced by +- [`IRedBoxHandler`](IRedBoxHandler) diff --git a/website/versioned_docs/version-0.82/native-api/IRedBoxHandler-api-windows.md b/website/versioned_docs/version-0.82/native-api/IRedBoxHandler-api-windows.md new file mode 100644 index 000000000..ba62534e1 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IRedBoxHandler-api-windows.md @@ -0,0 +1,94 @@ +--- +id: version-0.82-IRedBoxHandler +title: IRedBoxHandler +original_id: IRedBoxHandler +--- + +Kind: `interface` + +`IRedBoxHandler` provides an extension point to allow custom error handling within the React instance. +This can be useful if you have an existing error reporting system that you want React errors to be reported to. +The default implementation of `RedBoxHandler` shows an error messages in a error screen +that covers the whole application window. + +If you want to maintain the existing `RedBox` behaviors, and also report errors to your own reporting system, +your implementation can call into the default `RedBoxHandler`, which can be obtained by calling : + +```csharp +RedBoxHelper::CreateDefaultHandler(Host); +``` + +Sample settings up a `RedBoxHandler` that reports errors to an external system, and displays the default `RedBox` +experience within the application: + +```csharp + +class MyRedBoxHandler : IRedBoxHandler +{ + MyRedBoxHandler(IRedBoxHandler defaultHandler) { + innerHandler = defaultHandler; + } + + public void ShowNewError(IRedBoxErrorInfo info, RedBoxErrorType type) { + // Do not report non-fatal errors (optional) + if (type != RedBoxErrorType.JavaScriptSoft) + ReportErrorToMyErrorReportingSystem(info, type); + + // Display errors in app if the instance is running with DevSupportEnabled + if (innerHandler.IsDevSupportEnabled) + innerHandler.ShowNewError(info, type); + } + + public bool IsDevSupportEnabled { + get; + } + { + // The default handler will return true if the instance has DevSupport turned on + // But if you want to record error information in released versions of your app + // Then you should return true here, so that all errors get reported. + return true; + } + + public void UpdateError(IRedBoxErrorInfo info) { + if (innerHandler.IsDevSupportEnabled) + innerHandler.UpdateError(info); + } + + public void DismissRedBox() { + if (innerHandler.IsDevSupportEnabled) + innerHandler.DismissRedBox(); + } + + private IRedBoxHandler innerHandler; +} + +RegisterMyRedBoxHandler() +{ + Host.InstanceSettings.RedBoxHandler = new MyRedBoxHandler(RedBoxHelper.CreateDefaultHandler(Host)); +} + +``` + +## Properties +### IsDevSupportEnabled +`readonly` bool `IsDevSupportEnabled` + +This property will control if errors should be reported to the handler. If this returns false, [`ShowNewError`](#shownewerror) and [`UpdateError`](#updateerror) will not be called. + +## Methods +### DismissRedBox +void **`DismissRedBox`**() + +### ShowNewError +void **`ShowNewError`**([`IRedBoxErrorInfo`](IRedBoxErrorInfo) info, [`RedBoxErrorType`](RedBoxErrorType) type) + +This method is called when an error is initially hit. + +### UpdateError +void **`UpdateError`**([`IRedBoxErrorInfo`](IRedBoxErrorInfo) info) + +This method is called when updated information about an error has been resolved. For JavaScript errors, this is called if source map information was able to be resolved to provide a more useful call stack. + +## Referenced by +- [`ReactInstanceSettings`](ReactInstanceSettings) +- [`RedBoxHelper`](RedBoxHelper) diff --git a/website/versioned_docs/version-0.82/native-api/IRoundedRectangleVisual-api-windows.md b/website/versioned_docs/version-0.82/native-api/IRoundedRectangleVisual-api-windows.md new file mode 100644 index 000000000..2b861e461 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IRoundedRectangleVisual-api-windows.md @@ -0,0 +1,27 @@ +--- +id: version-0.82-IRoundedRectangleVisual +title: IRoundedRectangleVisual +original_id: IRoundedRectangleVisual +--- + +Kind: `interface` + +Implements: [`IVisual`](IVisual) + +> **EXPERIMENTAL** + +## Methods +### Brush +void **`Brush`**([`IBrush`](IBrush) brush) + +### CornerRadius +void **`CornerRadius`**([`Vector2`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector2) value) + +### StrokeBrush +void **`StrokeBrush`**([`IBrush`](IBrush) brush) + +### StrokeThickness +void **`StrokeThickness`**(float value) + +## Referenced by +- [`ICompositionContext`](ICompositionContext) diff --git a/website/versioned_docs/version-0.82/native-api/IScrollPositionChangedArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/IScrollPositionChangedArgs-api-windows.md new file mode 100644 index 000000000..133bed41c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IScrollPositionChangedArgs-api-windows.md @@ -0,0 +1,16 @@ +--- +id: version-0.82-IScrollPositionChangedArgs +title: IScrollPositionChangedArgs +original_id: IScrollPositionChangedArgs +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +## Properties +### Position +`readonly` [`Vector2`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector2) `Position` + +## Referenced by +- [`IScrollVisual`](IScrollVisual) diff --git a/website/versioned_docs/version-0.82/native-api/IScrollVisual-api-windows.md b/website/versioned_docs/version-0.82/native-api/IScrollVisual-api-windows.md new file mode 100644 index 000000000..f3acd346d --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IScrollVisual-api-windows.md @@ -0,0 +1,57 @@ +--- +id: version-0.82-IScrollVisual +title: IScrollVisual +original_id: IScrollVisual +--- + +Kind: `interface` + +Implements: [`IVisual`](IVisual) + +> **EXPERIMENTAL** + +## Properties +### Horizontal + bool `Horizontal` + +### ScrollPosition +`readonly` [`Vector3`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector3) `ScrollPosition` + +## Methods +### Brush +void **`Brush`**([`IBrush`](IBrush) brush) + +### ContentSize +void **`ContentSize`**([`Vector2`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector2) size) + +### OnPointerPressed +void **`OnPointerPressed`**([`PointerRoutedEventArgs`](PointerRoutedEventArgs) args) + +### ScrollBy +void **`ScrollBy`**([`Vector3`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector3) offset, bool animate) + +### ScrollEnabled +void **`ScrollEnabled`**(bool isScrollEnabled) + +### SetDecelerationRate +void **`SetDecelerationRate`**([`Vector3`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector3) decelerationRate) + +### SetMaximumZoomScale +void **`SetMaximumZoomScale`**(float maximumZoomScale) + +### SetMinimumZoomScale +void **`SetMinimumZoomScale`**(float minimumZoomScale) + +### TryUpdatePosition +void **`TryUpdatePosition`**([`Vector3`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector3) position, bool animate) + +## Events +### `ScrollBeginDrag` +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1)<[`IScrollPositionChangedArgs`](IScrollPositionChangedArgs)> +### `ScrollEndDrag` +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1)<[`IScrollPositionChangedArgs`](IScrollPositionChangedArgs)> +### `ScrollPositionChanged` +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1)<[`IScrollPositionChangedArgs`](IScrollPositionChangedArgs)> + +## Referenced by +- [`ICompositionContext`](ICompositionContext) diff --git a/website/versioned_docs/version-0.82/native-api/ISpriteVisual-api-windows.md b/website/versioned_docs/version-0.82/native-api/ISpriteVisual-api-windows.md new file mode 100644 index 000000000..145629ea0 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ISpriteVisual-api-windows.md @@ -0,0 +1,21 @@ +--- +id: version-0.82-ISpriteVisual +title: ISpriteVisual +original_id: ISpriteVisual +--- + +Kind: `interface` + +Implements: [`IVisual`](IVisual) + +> **EXPERIMENTAL** + +## Methods +### Brush +void **`Brush`**([`IBrush`](IBrush) brush) + +### Shadow +void **`Shadow`**([`IDropShadow`](IDropShadow) shadow) + +## Referenced by +- [`ICompositionContext`](ICompositionContext) diff --git a/website/versioned_docs/version-0.82/native-api/ITimer-api-windows.md b/website/versioned_docs/version-0.82/native-api/ITimer-api-windows.md new file mode 100644 index 000000000..78991da3f --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ITimer-api-windows.md @@ -0,0 +1,26 @@ +--- +id: version-0.82-ITimer +title: ITimer +original_id: ITimer +--- + +Kind: `interface` + +## Properties +### Interval + [`TimeSpan`](https://docs.microsoft.com/uwp/api/Windows.Foundation.TimeSpan) `Interval` + +## Methods +### Start +void **`Start`**() + +### Stop +void **`Stop`**() + +## Events +### `Tick` +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1) + +## Referenced by +- [`Timer`](Timer) +- [`TimerFactory`](TimerFactory) diff --git a/website/versioned_docs/version-0.82/native-api/IUriImageProvider-api-windows.md b/website/versioned_docs/version-0.82/native-api/IUriImageProvider-api-windows.md new file mode 100644 index 000000000..3282da1a6 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IUriImageProvider-api-windows.md @@ -0,0 +1,23 @@ +--- +id: version-0.82-IUriImageProvider +title: IUriImageProvider +original_id: IUriImageProvider +--- + +Kind: `interface` + +> **EXPERIMENTAL** + +This allows applications to provide their own image caching / storage pipelines. Or to generate images on the fly based on uri. + +## Methods +### CanLoadImageUri +bool **`CanLoadImageUri`**([`IReactContext`](IReactContext) context, [`Uri`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Uri) uri) + +This should return true if this provider will provide an image for the provided uri. + +### GetImageResponseAsync +[`IAsyncOperation`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncOperation-1)<[`ImageResponse`](ImageResponse)> **`GetImageResponseAsync`**([`IReactContext`](IReactContext) operation, [`ImageSource`](ImageSource) context) + +## Referenced by +- [`IReactPackageBuilderFabric`](IReactPackageBuilderFabric) diff --git a/website/versioned_docs/version-0.82/native-api/IVisual-api-windows.md b/website/versioned_docs/version-0.82/native-api/IVisual-api-windows.md new file mode 100644 index 000000000..b46a7a9a1 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IVisual-api-windows.md @@ -0,0 +1,71 @@ +--- +id: version-0.82-IVisual +title: IVisual +original_id: IVisual +--- + +Kind: `interface` + +Implemented by: +- [`IActivityVisual`](IActivityVisual) +- [`IRoundedRectangleVisual`](IRoundedRectangleVisual) +- [`IScrollVisual`](IScrollVisual) +- [`ISpriteVisual`](ISpriteVisual) + +> **EXPERIMENTAL** + +## Properties +### BackfaceVisibility + [`BackfaceVisibility`](BackfaceVisibility) `BackfaceVisibility` + +### Comment + string `Comment` + +## Methods +### AnimationClass +void **`AnimationClass`**([`AnimationClass`](AnimationClass) value) + +### GetAt +[`IVisual`](IVisual) **`GetAt`**(uint32_t index) + +### InsertAt +void **`InsertAt`**([`IVisual`](IVisual) visual, int index) + +### IsVisible +void **`IsVisible`**(bool isVisible) + +### Offset +void **`Offset`**([`Vector3`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector3) offset) + +### Offset +void **`Offset`**([`Vector3`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector3) offset, [`Vector3`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector3) relativeAdjustment) + +### Opacity +void **`Opacity`**(float opacity) + +### RelativeSizeWithOffset +void **`RelativeSizeWithOffset`**([`Vector2`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector2) size, [`Vector2`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector2) relativeSizeAdjustment) + +### Remove +void **`Remove`**([`IVisual`](IVisual) visual) + +### RotationAngle +void **`RotationAngle`**(float angle) + +### Scale +void **`Scale`**([`Vector3`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector3) scale) + +### Size +void **`Size`**([`Vector2`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Vector2) size) + +### TransformMatrix +void **`TransformMatrix`**([`Matrix4x4`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Numerics.Matrix4x4) transform) + +## Referenced by +- [`CreateInternalVisualDelegate`](CreateInternalVisualDelegate) +- [`ICaretVisual`](ICaretVisual) +- [`IFocusVisual`](IFocusVisual) +- [`IInternalCompositionRootView`](IInternalCompositionRootView) +- [`IVisualToMountChildrenIntoDelegate`](IVisualToMountChildrenIntoDelegate) +- [`MicrosoftCompositionContextHelper`](MicrosoftCompositionContextHelper) +- [`SystemCompositionContextHelper`](SystemCompositionContextHelper) diff --git a/website/versioned_docs/version-0.82/native-api/IVisualToMountChildrenIntoDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/IVisualToMountChildrenIntoDelegate-api-windows.md new file mode 100644 index 000000000..fb02cff3b --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/IVisualToMountChildrenIntoDelegate-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-IVisualToMountChildrenIntoDelegate +title: IVisualToMountChildrenIntoDelegate +original_id: IVisualToMountChildrenIntoDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +This type will be removed in future versions + +## Invoke +[`IVisual`](IVisual) **`Invoke`**([`ComponentView`](ComponentView) view) + +## Referenced by +- [`IReactCompositionViewComponentInternalBuilder`](IReactCompositionViewComponentInternalBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/ImageComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/ImageComponentView-api-windows.md new file mode 100644 index 000000000..fdf324859 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ImageComponentView-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-ImageComponentView +title: ImageComponentView +original_id: ImageComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** + +## Properties +### ViewProps +`readonly` [`ImageProps`](ImageProps) `ViewProps` + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/ImageFailedResponse-api-windows.md b/website/versioned_docs/version-0.82/native-api/ImageFailedResponse-api-windows.md new file mode 100644 index 000000000..36b9e8ce6 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ImageFailedResponse-api-windows.md @@ -0,0 +1,24 @@ +--- +id: version-0.82-ImageFailedResponse +title: ImageFailedResponse +original_id: ImageFailedResponse +--- + +Kind: `class` + +Extends: [`ImageResponse`](ImageResponse) + +> **EXPERIMENTAL** + +Use this as a return value from [`IUriImageProvider.GetImageResponseAsync`](IUriImageProvider#getimageresponseasync) to provide information about why the image load failed. + +## Constructors +### ImageFailedResponse + **`ImageFailedResponse`**(string errorMessage) + +> **EXPERIMENTAL** + +### ImageFailedResponse + **`ImageFailedResponse`**(string errorMessage, [`HttpStatusCode`](https://docs.microsoft.com/uwp/api/Windows.Web.Http.HttpStatusCode) responseCode, [`HttpResponseHeaderCollection`](https://docs.microsoft.com/uwp/api/Windows.Web.Http.Headers.HttpResponseHeaderCollection) responseHeaders) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/ImageProps-api-windows.md b/website/versioned_docs/version-0.82/native-api/ImageProps-api-windows.md new file mode 100644 index 000000000..245b5c9ec --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ImageProps-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-ImageProps +title: ImageProps +original_id: ImageProps +--- + +Kind: `class` + +Extends: [`ViewProps`](ViewProps) + +> **EXPERIMENTAL** + +## Properties +### Sources +`readonly` [`IVectorView`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Collections.IVectorView-1)<[`ImageSource`](ImageSource)> `Sources` + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/ImageResponse-api-windows.md b/website/versioned_docs/version-0.82/native-api/ImageResponse-api-windows.md new file mode 100644 index 000000000..bc2afd06e --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ImageResponse-api-windows.md @@ -0,0 +1,9 @@ +--- +id: version-0.82-ImageResponse +title: ImageResponse +original_id: ImageResponse +--- + +Kind: `class` + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/ImageSource-api-windows.md b/website/versioned_docs/version-0.82/native-api/ImageSource-api-windows.md new file mode 100644 index 000000000..3f22e4db8 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ImageSource-api-windows.md @@ -0,0 +1,30 @@ +--- +id: version-0.82-ImageSource +title: ImageSource +original_id: ImageSource +--- + +Kind: `class` + +> **EXPERIMENTAL** + +Provides information about an image source requested by the application. + +## Properties +### Scale +`readonly` float `Scale` + +> **EXPERIMENTAL** + +### Size +`readonly` [`Size`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Size) `Size` + +> **EXPERIMENTAL** + +### Uri +`readonly` [`Uri`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Uri) `Uri` + +> **EXPERIMENTAL** + +## Referenced by +- [`IUriImageProvider`](IUriImageProvider) diff --git a/website/versioned_docs/version-0.82/native-api/ImageSourceType-api-windows.md b/website/versioned_docs/version-0.82/native-api/ImageSourceType-api-windows.md new file mode 100644 index 000000000..3213309cc --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ImageSourceType-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-ImageSourceType +title: ImageSourceType +original_id: ImageSourceType +--- + +Kind: `enum` + +> **EXPERIMENTAL** + +| Name | Value | Description | +|--|--|--| +|`Invalid` | 0x0 | | +|`Remote` | 0x1 | | +|`Local` | 0x2 | | + +## Referenced by +- [`ImageSource`](ImageSource) diff --git a/website/versioned_docs/version-0.82/native-api/InitialStateDataFactory-api-windows.md b/website/versioned_docs/version-0.82/native-api/InitialStateDataFactory-api-windows.md new file mode 100644 index 000000000..309d0ce06 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/InitialStateDataFactory-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-InitialStateDataFactory +title: InitialStateDataFactory +original_id: InitialStateDataFactory +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +Object **`Invoke`**([`IComponentProps`](IComponentProps) props) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/InitializerDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/InitializerDelegate-api-windows.md new file mode 100644 index 000000000..aa939c1c0 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/InitializerDelegate-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-InitializerDelegate +title: InitializerDelegate +original_id: InitializerDelegate +--- + +Kind: `delegate` + +A delegate that sets `reactContext` for a module. +We use it for a stand-alone initialize method, strongly typed JS events and functions. +Experimental code uses it to initialize TurboModule `CallInvoker`. + +## Invoke +void **`Invoke`**([`IReactContext`](IReactContext) reactContext) + +## Referenced by +- [`IReactModuleBuilder`](IReactModuleBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/InstanceCreatedEventArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/InstanceCreatedEventArgs-api-windows.md new file mode 100644 index 000000000..497d89bbd --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/InstanceCreatedEventArgs-api-windows.md @@ -0,0 +1,23 @@ +--- +id: version-0.82-InstanceCreatedEventArgs +title: InstanceCreatedEventArgs +original_id: InstanceCreatedEventArgs +--- + +Kind: `class` + +The arguments for the [`ReactInstanceSettings.InstanceCreated`](ReactInstanceSettings#instancecreated) event. + +## Properties +### Context +`readonly` [`IReactContext`](IReactContext) `Context` + +Gets the [`IReactContext`](IReactContext) for the React instance that was just created. + +### RuntimeHandle +`readonly` Object `RuntimeHandle` + +Provides access to the jsi::Runtime for synchronous access using GetOrCreateContextRuntime + +## Referenced by +- [`ReactInstanceSettings`](ReactInstanceSettings) diff --git a/website/versioned_docs/version-0.82/native-api/InstanceDestroyedEventArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/InstanceDestroyedEventArgs-api-windows.md new file mode 100644 index 000000000..c02edcdcb --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/InstanceDestroyedEventArgs-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-InstanceDestroyedEventArgs +title: InstanceDestroyedEventArgs +original_id: InstanceDestroyedEventArgs +--- + +Kind: `class` + +The arguments for the [`ReactInstanceSettings.InstanceDestroyed`](ReactInstanceSettings#instancedestroyed) event. + +## Properties +### Context +`readonly` [`IReactContext`](IReactContext) `Context` + +Gets the [`IReactContext`](IReactContext) for the React instance that just destroyed. + +## Referenced by +- [`ReactInstanceSettings`](ReactInstanceSettings) diff --git a/website/versioned_docs/version-0.82/native-api/InstanceLoadedEventArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/InstanceLoadedEventArgs-api-windows.md new file mode 100644 index 000000000..e639a8784 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/InstanceLoadedEventArgs-api-windows.md @@ -0,0 +1,28 @@ +--- +id: version-0.82-InstanceLoadedEventArgs +title: InstanceLoadedEventArgs +original_id: InstanceLoadedEventArgs +--- + +Kind: `class` + +The arguments for the [`ReactInstanceSettings.InstanceLoaded`](ReactInstanceSettings#instanceloaded) event. + +## Properties +### Context +`readonly` [`IReactContext`](IReactContext) `Context` + +Gets the [`IReactContext`](IReactContext) for the React instance that finished loading the bundle. + +### Failed +`readonly` bool `Failed` + +Returns `true` if the JavaScript bundle failed to load. + +### RuntimeHandle +`readonly` Object `RuntimeHandle` + +Provides access to the jsi::Runtime for synchronous access using GetOrCreateContextRuntime + +## Referenced by +- [`ReactInstanceSettings`](ReactInstanceSettings) diff --git a/website/versioned_docs/version-0.82/native-api/JSIEngine-api-windows.md b/website/versioned_docs/version-0.82/native-api/JSIEngine-api-windows.md new file mode 100644 index 000000000..9bbf0c54a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JSIEngine-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-JSIEngine +title: JSIEngine +original_id: JSIEngine +--- + +Kind: `enum` + +A JavaScript engine type that can be set for a React instance in [`ReactInstanceSettings.JSIEngineOverride`](ReactInstanceSettings#jsiengineoverride) + +| Name | Value | Description | +|--|--|--| +|`Chakra` | 0x0 | | +|`Hermes` | 0x1 | | +|`V8` | 0x2 | | + +## Referenced by +- [`ReactInstanceSettings`](ReactInstanceSettings) diff --git a/website/versioned_docs/version-0.82/native-api/JSValueArgWriter-api-windows.md b/website/versioned_docs/version-0.82/native-api/JSValueArgWriter-api-windows.md new file mode 100644 index 000000000..2e21dd1eb --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JSValueArgWriter-api-windows.md @@ -0,0 +1,40 @@ +--- +id: version-0.82-JSValueArgWriter +title: JSValueArgWriter +original_id: JSValueArgWriter +--- + +## New Architecture + +Kind: `delegate` + +The `JSValueArgWriter` delegate is used to pass values to ABI API. +In a function that implements the delegate use the provided `writer` to stream custom values. + +### Invoke +void **`Invoke`**([`IJSValueWriter`](IJSValueWriter) writer) + +### Referenced by +- [`EmitEventSetterDelegate`](EmitEventSetterDelegate) +- [`EventEmitter`](EventEmitter) +- [`IReactContext`](IReactContext) +- [`ReactNativeIsland`](ReactNativeIsland) +- [`ReactViewOptions`](ReactViewOptions) + +## Old Architecture + +Kind: `delegate` + +The `JSValueArgWriter` delegate is used to pass values to ABI API. +In a function that implements the delegate use the provided `writer` to stream custom values. + +### Invoke +void **`Invoke`**([`IJSValueWriter`](IJSValueWriter) writer) + +### Referenced by +- [`EmitEventSetterDelegate`](EmitEventSetterDelegate) +- [`IReactContext`](IReactContext) +- [`ReactRootView`](ReactRootView) +- [`ReactViewOptions`](ReactViewOptions) +- [`XamlHelper`](XamlHelper) +- [`XamlUIService`](XamlUIService) diff --git a/website/versioned_docs/version-0.82/native-api/JSValueType-api-windows.md b/website/versioned_docs/version-0.82/native-api/JSValueType-api-windows.md new file mode 100644 index 000000000..66fb8c40d --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JSValueType-api-windows.md @@ -0,0 +1,22 @@ +--- +id: version-0.82-JSValueType +title: JSValueType +original_id: JSValueType +--- + +Kind: `enum` + +Type of value read by [`IJSValueReader`](IJSValueReader). + +| Name | Value | Description | +|--|--|--| +|`Null` | 0x0 | | +|`Object` | 0x1 | | +|`Array` | 0x2 | | +|`String` | 0x3 | | +|`Boolean` | 0x4 | | +|`Int64` | 0x5 | | +|`Double` | 0x6 | | + +## Referenced by +- [`IJSValueReader`](IJSValueReader) diff --git a/website/versioned_docs/version-0.82/native-api/JsiBigIntRef-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiBigIntRef-api-windows.md new file mode 100644 index 000000000..da45309fa --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiBigIntRef-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-JsiBigIntRef +title: JsiBigIntRef +original_id: JsiBigIntRef +--- + +Kind: `struct` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Fields +### Data +Type: `uint64_t` + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiByteArrayUser-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiByteArrayUser-api-windows.md new file mode 100644 index 000000000..0453c40b4 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiByteArrayUser-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-JsiByteArrayUser +title: JsiByteArrayUser +original_id: JsiByteArrayUser +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Invoke +void **`Invoke`**(uint8_t bytes) + +## Referenced by +- [`IJsiByteBuffer`](IJsiByteBuffer) +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiError-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiError-api-windows.md new file mode 100644 index 000000000..7d20825c9 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiError-api-windows.md @@ -0,0 +1,42 @@ +--- +id: version-0.82-JsiError +title: JsiError +original_id: JsiError +--- + +Kind: `class` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Properties +### ErrorDetails +`readonly` string `ErrorDetails` + +> **EXPERIMENTAL** + +### ErrorType +`readonly` [`JsiErrorType`](JsiErrorType) `ErrorType` + +> **EXPERIMENTAL** + +### Message +`readonly` string `Message` + +> **EXPERIMENTAL** + +### Stack +`readonly` string `Stack` + +> **EXPERIMENTAL** + +### Value +`readonly` [`JsiValueRef`](JsiValueRef) `Value` + +> **EXPERIMENTAL** + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiErrorType-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiErrorType-api-windows.md new file mode 100644 index 000000000..ce7fce133 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiErrorType-api-windows.md @@ -0,0 +1,22 @@ +--- +id: version-0.82-JsiErrorType +title: JsiErrorType +original_id: JsiErrorType +--- + +Kind: `enum` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +| Name | Value | Description | +|--|--|--| +|`JSError` | 0x0 | | +|`NativeException` | 0x1 | | + +## Referenced by +- [`JsiError`](JsiError) +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiHostFunction-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiHostFunction-api-windows.md new file mode 100644 index 000000000..964e4fe0d --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiHostFunction-api-windows.md @@ -0,0 +1,19 @@ +--- +id: version-0.82-JsiHostFunction +title: JsiHostFunction +original_id: JsiHostFunction +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Invoke +[`JsiValueRef`](JsiValueRef) **`Invoke`**([`JsiRuntime`](JsiRuntime) runtime, [`JsiValueRef`](JsiValueRef) thisArg, [`JsiValueRef`](JsiValueRef) args) + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiInitializerDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiInitializerDelegate-api-windows.md new file mode 100644 index 000000000..4599b3340 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiInitializerDelegate-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-JsiInitializerDelegate +title: JsiInitializerDelegate +original_id: JsiInitializerDelegate +--- + +Kind: `delegate` + +A delegate that sets `reactContext` for a module. +We use it for a stand-alone initialize method, strongly typed JS events and functions. +Experimental code uses it to initialize TurboModule `CallInvoker`. + +## Invoke +void **`Invoke`**([`IReactContext`](IReactContext) reactContext, Object runtimeHandle) + +## Referenced by +- [`IReactModuleBuilder`](IReactModuleBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/JsiObjectRef-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiObjectRef-api-windows.md new file mode 100644 index 000000000..cb4c63a08 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiObjectRef-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-JsiObjectRef +title: JsiObjectRef +original_id: JsiObjectRef +--- + +Kind: `struct` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Fields +### Data +Type: `uint64_t` + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiPreparedJavaScript-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiPreparedJavaScript-api-windows.md new file mode 100644 index 000000000..9832b88ee --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiPreparedJavaScript-api-windows.md @@ -0,0 +1,16 @@ +--- +id: version-0.82-JsiPreparedJavaScript +title: JsiPreparedJavaScript +original_id: JsiPreparedJavaScript +--- + +Kind: `class` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiPropertyIdRef-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiPropertyIdRef-api-windows.md new file mode 100644 index 000000000..cdb72dfed --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiPropertyIdRef-api-windows.md @@ -0,0 +1,21 @@ +--- +id: version-0.82-JsiPropertyIdRef +title: JsiPropertyIdRef +original_id: JsiPropertyIdRef +--- + +Kind: `struct` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Fields +### Data +Type: `uint64_t` + +## Referenced by +- [`IJsiHostObject`](IJsiHostObject) +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiRuntime-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiRuntime-api-windows.md new file mode 100644 index 000000000..6d5fba129 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiRuntime-api-windows.md @@ -0,0 +1,414 @@ +--- +id: version-0.82-JsiRuntime +title: JsiRuntime +original_id: JsiRuntime +--- + +Kind: `class` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Properties +### Description +`readonly` string `Description` + +> **EXPERIMENTAL** + +### Global +`readonly` [`JsiObjectRef`](JsiObjectRef) `Global` + +> **EXPERIMENTAL** + +### IsInspectable +`readonly` bool `IsInspectable` + +> **EXPERIMENTAL** + +## Methods +### BigIntStrictEquals +bool **`BigIntStrictEquals`**([`JsiBigIntRef`](JsiBigIntRef) left, [`JsiBigIntRef`](JsiBigIntRef) right) + +> **EXPERIMENTAL** + +### BigintIsInt64 +bool **`BigintIsInt64`**([`JsiBigIntRef`](JsiBigIntRef) bigInt) + +> **EXPERIMENTAL** + +### BigintIsUint64 +bool **`BigintIsUint64`**([`JsiBigIntRef`](JsiBigIntRef) bigInt) + +> **EXPERIMENTAL** + +### BigintToString +[`JsiStringRef`](JsiStringRef) **`BigintToString`**([`JsiBigIntRef`](JsiBigIntRef) bigInt, int val) + +> **EXPERIMENTAL** + +### Call +[`JsiValueRef`](JsiValueRef) **`Call`**([`JsiObjectRef`](JsiObjectRef) func, [`JsiValueRef`](JsiValueRef) thisArg, [`JsiValueRef`](JsiValueRef) args) + +> **EXPERIMENTAL** + +### CallAsConstructor +[`JsiValueRef`](JsiValueRef) **`CallAsConstructor`**([`JsiObjectRef`](JsiObjectRef) func, [`JsiValueRef`](JsiValueRef) args) + +> **EXPERIMENTAL** + +### CloneBigInt +[`JsiBigIntRef`](JsiBigIntRef) **`CloneBigInt`**([`JsiBigIntRef`](JsiBigIntRef) bigInt) + +> **EXPERIMENTAL** + +### CloneObject +[`JsiObjectRef`](JsiObjectRef) **`CloneObject`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### ClonePropertyId +[`JsiPropertyIdRef`](JsiPropertyIdRef) **`ClonePropertyId`**([`JsiPropertyIdRef`](JsiPropertyIdRef) propertyId) + +> **EXPERIMENTAL** + +### CloneString +[`JsiStringRef`](JsiStringRef) **`CloneString`**([`JsiStringRef`](JsiStringRef) str) + +> **EXPERIMENTAL** + +### CloneSymbol +[`JsiSymbolRef`](JsiSymbolRef) **`CloneSymbol`**([`JsiSymbolRef`](JsiSymbolRef) symbol) + +> **EXPERIMENTAL** + +### CreateArray +[`JsiObjectRef`](JsiObjectRef) **`CreateArray`**(uint32_t size) + +> **EXPERIMENTAL** + +### CreateArrayBuffer +[`JsiObjectRef`](JsiObjectRef) **`CreateArrayBuffer`**([`JsiObjectRef`](JsiObjectRef) buffer) + +> **EXPERIMENTAL** + +### CreateBigIntFromInt64 +[`JsiBigIntRef`](JsiBigIntRef) **`CreateBigIntFromInt64`**(int64_t val) + +> **EXPERIMENTAL** + +### CreateBigIntFromUint64 +[`JsiBigIntRef`](JsiBigIntRef) **`CreateBigIntFromUint64`**(uint64_t val) + +> **EXPERIMENTAL** + +### CreateFunctionFromHostFunction +[`JsiObjectRef`](JsiObjectRef) **`CreateFunctionFromHostFunction`**([`JsiPropertyIdRef`](JsiPropertyIdRef) funcName, uint32_t paramCount, [`JsiHostFunction`](JsiHostFunction) hostFunc) + +> **EXPERIMENTAL** + +### CreateObject +[`JsiObjectRef`](JsiObjectRef) **`CreateObject`**() + +> **EXPERIMENTAL** + +### CreateObjectWithHostObject +[`JsiObjectRef`](JsiObjectRef) **`CreateObjectWithHostObject`**([`IJsiHostObject`](IJsiHostObject) hostObject) + +> **EXPERIMENTAL** + +### CreatePropertyId +[`JsiPropertyIdRef`](JsiPropertyIdRef) **`CreatePropertyId`**(string name) + +> **EXPERIMENTAL** + +### CreatePropertyIdFromAscii +[`JsiPropertyIdRef`](JsiPropertyIdRef) **`CreatePropertyIdFromAscii`**(uint8_t ascii) + +> **EXPERIMENTAL** + +### CreatePropertyIdFromString +[`JsiPropertyIdRef`](JsiPropertyIdRef) **`CreatePropertyIdFromString`**([`JsiStringRef`](JsiStringRef) str) + +> **EXPERIMENTAL** + +### CreatePropertyIdFromSymbol +[`JsiPropertyIdRef`](JsiPropertyIdRef) **`CreatePropertyIdFromSymbol`**([`JsiSymbolRef`](JsiSymbolRef) sym) + +> **EXPERIMENTAL** + +### CreatePropertyIdFromUtf8 +[`JsiPropertyIdRef`](JsiPropertyIdRef) **`CreatePropertyIdFromUtf8`**(uint8_t utf8) + +> **EXPERIMENTAL** + +### CreateString +[`JsiStringRef`](JsiStringRef) **`CreateString`**(string value) + +> **EXPERIMENTAL** + +### CreateStringFromAscii +[`JsiStringRef`](JsiStringRef) **`CreateStringFromAscii`**(uint8_t ascii) + +> **EXPERIMENTAL** + +### CreateStringFromUtf8 +[`JsiStringRef`](JsiStringRef) **`CreateStringFromUtf8`**(uint8_t utf8) + +> **EXPERIMENTAL** + +### CreateValueFromJson +[`JsiValueRef`](JsiValueRef) **`CreateValueFromJson`**(string json) + +> **EXPERIMENTAL** + +### CreateValueFromJsonUtf8 +[`JsiValueRef`](JsiValueRef) **`CreateValueFromJsonUtf8`**(uint8_t json) + +> **EXPERIMENTAL** + +### CreateWeakObject +[`JsiWeakObjectRef`](JsiWeakObjectRef) **`CreateWeakObject`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### DrainMicrotasks +bool **`DrainMicrotasks`**(int maxMicrotasksHint) + +> **EXPERIMENTAL** + +### EvaluateJavaScript +[`JsiValueRef`](JsiValueRef) **`EvaluateJavaScript`**([`IJsiByteBuffer`](IJsiByteBuffer) buffer, string sourceUrl) + +> **EXPERIMENTAL** + +### EvaluatePreparedJavaScript +[`JsiValueRef`](JsiValueRef) **`EvaluatePreparedJavaScript`**([`JsiPreparedJavaScript`](JsiPreparedJavaScript) js) + +> **EXPERIMENTAL** + +### GetAndClearError +[`JsiError`](JsiError) **`GetAndClearError`**() + +> **EXPERIMENTAL** + +### GetArrayBufferData +void **`GetArrayBufferData`**([`JsiObjectRef`](JsiObjectRef) arrayBuffer, [`JsiByteArrayUser`](JsiByteArrayUser) useArrayBytes) + +> **EXPERIMENTAL** + +### GetArrayBufferSize +uint32_t **`GetArrayBufferSize`**([`JsiObjectRef`](JsiObjectRef) arrayBuffer) + +> **EXPERIMENTAL** + +### GetArraySize +uint32_t **`GetArraySize`**([`JsiObjectRef`](JsiObjectRef) arr) + +> **EXPERIMENTAL** + +### GetHostFunction +[`JsiHostFunction`](JsiHostFunction) **`GetHostFunction`**([`JsiObjectRef`](JsiObjectRef) func) + +> **EXPERIMENTAL** + +### GetHostObject +[`IJsiHostObject`](IJsiHostObject) **`GetHostObject`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### GetNativeState +[`IReactNonAbiValue`](IReactNonAbiValue) **`GetNativeState`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### GetProperty +[`JsiValueRef`](JsiValueRef) **`GetProperty`**([`JsiObjectRef`](JsiObjectRef) obj, [`JsiPropertyIdRef`](JsiPropertyIdRef) propertyId) + +> **EXPERIMENTAL** + +### GetPropertyIdArray +[`JsiObjectRef`](JsiObjectRef) **`GetPropertyIdArray`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### GetValueAtIndex +[`JsiValueRef`](JsiValueRef) **`GetValueAtIndex`**([`JsiObjectRef`](JsiObjectRef) arr, uint32_t index) + +> **EXPERIMENTAL** + +### HasNativeState +bool **`HasNativeState`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### HasProperty +bool **`HasProperty`**([`JsiObjectRef`](JsiObjectRef) obj, [`JsiPropertyIdRef`](JsiPropertyIdRef) propertyId) + +> **EXPERIMENTAL** + +### InstanceOf +bool **`InstanceOf`**([`JsiObjectRef`](JsiObjectRef) obj, [`JsiObjectRef`](JsiObjectRef) constructor) + +> **EXPERIMENTAL** + +### IsArray +bool **`IsArray`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### IsArrayBuffer +bool **`IsArrayBuffer`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### IsFunction +bool **`IsFunction`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### IsHostFunction +bool **`IsHostFunction`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### IsHostObject +bool **`IsHostObject`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### LockWeakObject +[`JsiValueRef`](JsiValueRef) **`LockWeakObject`**([`JsiWeakObjectRef`](JsiWeakObjectRef) weakObject) + +> **EXPERIMENTAL** + +### MakeChakraRuntime +`static` [`JsiRuntime`](JsiRuntime) **`MakeChakraRuntime`**() + +> **EXPERIMENTAL** + +### ObjectStrictEquals +bool **`ObjectStrictEquals`**([`JsiObjectRef`](JsiObjectRef) left, [`JsiObjectRef`](JsiObjectRef) right) + +> **EXPERIMENTAL** + +### PopScope +void **`PopScope`**([`JsiScopeState`](JsiScopeState) scopeState) + +> **EXPERIMENTAL** + +### PrepareJavaScript +[`JsiPreparedJavaScript`](JsiPreparedJavaScript) **`PrepareJavaScript`**([`IJsiByteBuffer`](IJsiByteBuffer) buffer, string sourceUrl) + +> **EXPERIMENTAL** + +### PropertyIdEquals +bool **`PropertyIdEquals`**([`JsiPropertyIdRef`](JsiPropertyIdRef) left, [`JsiPropertyIdRef`](JsiPropertyIdRef) right) + +> **EXPERIMENTAL** + +### PropertyIdToString +string **`PropertyIdToString`**([`JsiPropertyIdRef`](JsiPropertyIdRef) propertyId) + +> **EXPERIMENTAL** + +### PropertyIdToUtf8 +void **`PropertyIdToUtf8`**([`JsiPropertyIdRef`](JsiPropertyIdRef) propertyId, [`JsiByteArrayUser`](JsiByteArrayUser) useUtf8String) + +> **EXPERIMENTAL** + +### PushScope +[`JsiScopeState`](JsiScopeState) **`PushScope`**() + +> **EXPERIMENTAL** + +### QueueMicrotask +void **`QueueMicrotask`**([`JsiObjectRef`](JsiObjectRef) callback) + +> **EXPERIMENTAL** + +### ReleaseBigInt +void **`ReleaseBigInt`**([`JsiBigIntRef`](JsiBigIntRef) bigInt) + +> **EXPERIMENTAL** + +### ReleaseObject +void **`ReleaseObject`**([`JsiObjectRef`](JsiObjectRef) obj) + +> **EXPERIMENTAL** + +### ReleasePropertyId +void **`ReleasePropertyId`**([`JsiPropertyIdRef`](JsiPropertyIdRef) propertyId) + +> **EXPERIMENTAL** + +### ReleaseString +void **`ReleaseString`**([`JsiStringRef`](JsiStringRef) str) + +> **EXPERIMENTAL** + +### ReleaseSymbol +void **`ReleaseSymbol`**([`JsiSymbolRef`](JsiSymbolRef) symbol) + +> **EXPERIMENTAL** + +### SetError +void **`SetError`**([`JsiErrorType`](JsiErrorType) errorType, string errorDetails, [`JsiValueRef`](JsiValueRef) value) + +> **EXPERIMENTAL** + +### SetNativeState +void **`SetNativeState`**([`JsiObjectRef`](JsiObjectRef) obj, [`IReactNonAbiValue`](IReactNonAbiValue) state) + +> **EXPERIMENTAL** + +### SetProperty +void **`SetProperty`**([`JsiObjectRef`](JsiObjectRef) obj, [`JsiPropertyIdRef`](JsiPropertyIdRef) propertyId, [`JsiValueRef`](JsiValueRef) value) + +> **EXPERIMENTAL** + +### SetValueAtIndex +void **`SetValueAtIndex`**([`JsiObjectRef`](JsiObjectRef) arr, uint32_t index, [`JsiValueRef`](JsiValueRef) value) + +> **EXPERIMENTAL** + +### StringStrictEquals +bool **`StringStrictEquals`**([`JsiStringRef`](JsiStringRef) left, [`JsiStringRef`](JsiStringRef) right) + +> **EXPERIMENTAL** + +### StringToString +string **`StringToString`**([`JsiStringRef`](JsiStringRef) str) + +> **EXPERIMENTAL** + +### StringToUtf8 +void **`StringToUtf8`**([`JsiStringRef`](JsiStringRef) str, [`JsiByteArrayUser`](JsiByteArrayUser) useUtf8String) + +> **EXPERIMENTAL** + +### SymbolStrictEquals +bool **`SymbolStrictEquals`**([`JsiSymbolRef`](JsiSymbolRef) left, [`JsiSymbolRef`](JsiSymbolRef) right) + +> **EXPERIMENTAL** + +### SymbolToString +string **`SymbolToString`**([`JsiSymbolRef`](JsiSymbolRef) symbol) + +> **EXPERIMENTAL** + +### SymbolToUtf8 +void **`SymbolToUtf8`**([`JsiSymbolRef`](JsiSymbolRef) symbol, [`JsiByteArrayUser`](JsiByteArrayUser) useUtf8String) + +> **EXPERIMENTAL** + +### Truncate +uint64_t **`Truncate`**([`JsiBigIntRef`](JsiBigIntRef) bigInt) + +> **EXPERIMENTAL** + +## Referenced by +- [`IJsiHostObject`](IJsiHostObject) +- [`JsiHostFunction`](JsiHostFunction) diff --git a/website/versioned_docs/version-0.82/native-api/JsiScopeState-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiScopeState-api-windows.md new file mode 100644 index 000000000..2ddf3e332 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiScopeState-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-JsiScopeState +title: JsiScopeState +original_id: JsiScopeState +--- + +Kind: `struct` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Fields +### Data +Type: `uint64_t` + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiStringRef-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiStringRef-api-windows.md new file mode 100644 index 000000000..1d2ed17ed --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiStringRef-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-JsiStringRef +title: JsiStringRef +original_id: JsiStringRef +--- + +Kind: `struct` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Fields +### Data +Type: `uint64_t` + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiSymbolRef-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiSymbolRef-api-windows.md new file mode 100644 index 000000000..612863a42 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiSymbolRef-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-JsiSymbolRef +title: JsiSymbolRef +original_id: JsiSymbolRef +--- + +Kind: `struct` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Fields +### Data +Type: `uint64_t` + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiValueKind-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiValueKind-api-windows.md new file mode 100644 index 000000000..54b549113 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiValueKind-api-windows.md @@ -0,0 +1,27 @@ +--- +id: version-0.82-JsiValueKind +title: JsiValueKind +original_id: JsiValueKind +--- + +Kind: `enum` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +| Name | Value | Description | +|--|--|--| +|`Undefined` | 0x0 | | +|`Null` | 0x1 | | +|`Boolean` | 0x2 | | +|`Number` | 0x3 | | +|`Symbol` | 0x4 | | +|`BigInt` | 0x5 | | +|`String` | 0x6 | | +|`Object` | 0x7 | | + +## Referenced by +- [`JsiValueRef`](JsiValueRef) diff --git a/website/versioned_docs/version-0.82/native-api/JsiValueRef-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiValueRef-api-windows.md new file mode 100644 index 000000000..88c0d973e --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiValueRef-api-windows.md @@ -0,0 +1,26 @@ +--- +id: version-0.82-JsiValueRef +title: JsiValueRef +original_id: JsiValueRef +--- + +Kind: `struct` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Fields +### Data +Type: `uint64_t` + +### Kind +Type: [`JsiValueKind`](JsiValueKind) + +## Referenced by +- [`IJsiHostObject`](IJsiHostObject) +- [`JsiError`](JsiError) +- [`JsiHostFunction`](JsiHostFunction) +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/JsiWeakObjectRef-api-windows.md b/website/versioned_docs/version-0.82/native-api/JsiWeakObjectRef-api-windows.md new file mode 100644 index 000000000..1b345405a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/JsiWeakObjectRef-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-JsiWeakObjectRef +title: JsiWeakObjectRef +original_id: JsiWeakObjectRef +--- + +Kind: `struct` + +> **EXPERIMENTAL** + +An experimental API. Do not use it directly. It may be removed or changed in a future version. Instead, use the JSI API that uses this API internally. +See the `ExecuteJsi` method in `JsiApiContext.h` of the `Microsoft.ReactNative.Cxx` shared project, or the examples of the JSI-based TurboModules in the `Microsoft.ReactNative.IntegrationTests` project. +Note that the JSI is defined only for C++ code. We plan to add the .Net support in future. + +## Fields +### Data +Type: `uint64_t` + +## Referenced by +- [`JsiRuntime`](JsiRuntime) diff --git a/website/versioned_docs/version-0.82/native-api/KeyRoutedEventArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/KeyRoutedEventArgs-api-windows.md new file mode 100644 index 000000000..33853533b --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/KeyRoutedEventArgs-api-windows.md @@ -0,0 +1,31 @@ +--- +id: version-0.82-KeyRoutedEventArgs +title: KeyRoutedEventArgs +original_id: KeyRoutedEventArgs +--- + +Kind: `interface` + +Implements: [`RoutedEventArgs`](RoutedEventArgs) + +## Properties +### DeviceId +`readonly` string `DeviceId` + +### Handled + bool `Handled` + +### Key +`readonly` [`VirtualKey`](https://docs.microsoft.com/uwp/api/Windows.System.VirtualKey) `Key` + +### KeyStatus +`readonly` [`PhysicalKeyStatus`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Input.PhysicalKeyStatus) `KeyStatus` + +### KeyboardSource +`readonly` [`KeyboardSource`](KeyboardSource) `KeyboardSource` + +### OriginalKey +`readonly` [`VirtualKey`](https://docs.microsoft.com/uwp/api/Windows.System.VirtualKey) `OriginalKey` + +## Referenced by +- [`ComponentView`](ComponentView) diff --git a/website/versioned_docs/version-0.82/native-api/KeyboardSource-api-windows.md b/website/versioned_docs/version-0.82/native-api/KeyboardSource-api-windows.md new file mode 100644 index 000000000..459b91909 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/KeyboardSource-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-KeyboardSource +title: KeyboardSource +original_id: KeyboardSource +--- + +Kind: `interface` + +## Methods +### GetKeyState +[`VirtualKeyStates`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Input.VirtualKeyStates) **`GetKeyState`**([`VirtualKey`](https://docs.microsoft.com/uwp/api/Windows.System.VirtualKey) key) + +## Referenced by +- [`CharacterReceivedRoutedEventArgs`](CharacterReceivedRoutedEventArgs) +- [`KeyRoutedEventArgs`](KeyRoutedEventArgs) diff --git a/website/versioned_docs/version-0.82/native-api/LayoutConstraints-api-windows.md b/website/versioned_docs/version-0.82/native-api/LayoutConstraints-api-windows.md new file mode 100644 index 000000000..f217f5256 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/LayoutConstraints-api-windows.md @@ -0,0 +1,23 @@ +--- +id: version-0.82-LayoutConstraints +title: LayoutConstraints +original_id: LayoutConstraints +--- + +Kind: `struct` + +> **EXPERIMENTAL** + +## Fields +### LayoutDirection +Type: [`LayoutDirection`](LayoutDirection) + +### MaximumSize +Type: [`Size`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Size) + +### MinimumSize +Type: [`Size`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Size) + +## Referenced by +- [`MeasureContentHandler`](MeasureContentHandler) +- [`ReactNativeIsland`](ReactNativeIsland) diff --git a/website/versioned_docs/version-0.82/native-api/LayoutContext-api-windows.md b/website/versioned_docs/version-0.82/native-api/LayoutContext-api-windows.md new file mode 100644 index 000000000..dde98d1d6 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/LayoutContext-api-windows.md @@ -0,0 +1,35 @@ +--- +id: version-0.82-LayoutContext +title: LayoutContext +original_id: LayoutContext +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Properties +### FontSizeMultiplier + float `FontSizeMultiplier` + +> **EXPERIMENTAL** + +### PointScaleFactor + float `PointScaleFactor` + +> **EXPERIMENTAL** + +### SwapLeftAndRightInRTL + bool `SwapLeftAndRightInRTL` + +> **EXPERIMENTAL** + +### ViewportOffset + [`Point`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Point) `ViewportOffset` + +> **EXPERIMENTAL** + +## Referenced by +- [`LayoutHandler`](LayoutHandler) +- [`MeasureContentHandler`](MeasureContentHandler) +- [`YogaLayoutableShadowNode`](YogaLayoutableShadowNode) diff --git a/website/versioned_docs/version-0.82/native-api/LayoutDirection-api-windows.md b/website/versioned_docs/version-0.82/native-api/LayoutDirection-api-windows.md new file mode 100644 index 000000000..5a59065cd --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/LayoutDirection-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-LayoutDirection +title: LayoutDirection +original_id: LayoutDirection +--- + +Kind: `enum` + +> **EXPERIMENTAL** + +| Name | Value | Description | +|--|--|--| +|`Undefined` | 0x0 | | +|`LeftToRight` | 0x1 | | +|`RightToLeft` | 0x2 | | + +## Referenced by +- [`LayoutConstraints`](LayoutConstraints) diff --git a/website/versioned_docs/version-0.82/native-api/LayoutHandler-api-windows.md b/website/versioned_docs/version-0.82/native-api/LayoutHandler-api-windows.md new file mode 100644 index 000000000..c28d6fad4 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/LayoutHandler-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-LayoutHandler +title: LayoutHandler +original_id: LayoutHandler +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ShadowNode`](ShadowNode) shadowNode, [`LayoutContext`](LayoutContext) layoutContext) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/LayoutMetrics-api-windows.md b/website/versioned_docs/version-0.82/native-api/LayoutMetrics-api-windows.md new file mode 100644 index 000000000..bf313a608 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/LayoutMetrics-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-LayoutMetrics +title: LayoutMetrics +original_id: LayoutMetrics +--- + +Kind: `struct` + +> **EXPERIMENTAL** + +## Fields +### Frame +Type: [`Rect`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Rect) + +### PointScaleFactor +Type: `float` + +## Referenced by +- [`ComponentView`](ComponentView) +- [`LayoutMetricsChangedArgs`](LayoutMetricsChangedArgs) diff --git a/website/versioned_docs/version-0.82/native-api/LayoutMetricsChangedArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/LayoutMetricsChangedArgs-api-windows.md new file mode 100644 index 000000000..b234dbdd7 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/LayoutMetricsChangedArgs-api-windows.md @@ -0,0 +1,23 @@ +--- +id: version-0.82-LayoutMetricsChangedArgs +title: LayoutMetricsChangedArgs +original_id: LayoutMetricsChangedArgs +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Properties +### NewLayoutMetrics +`readonly` [`LayoutMetrics`](LayoutMetrics) `NewLayoutMetrics` + +> **EXPERIMENTAL** + +### OldLayoutMetrics +`readonly` [`LayoutMetrics`](LayoutMetrics) `OldLayoutMetrics` + +> **EXPERIMENTAL** + +## Referenced by +- [`ComponentView`](ComponentView) diff --git a/website/versioned_docs/version-0.82/native-api/LoadingState-api-windows.md b/website/versioned_docs/version-0.82/native-api/LoadingState-api-windows.md new file mode 100644 index 000000000..2c6bd13a0 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/LoadingState-api-windows.md @@ -0,0 +1,19 @@ +--- +id: version-0.82-LoadingState +title: LoadingState +original_id: LoadingState +--- + +Kind: `enum` + +Used to represent the state of the React Native JavaScript instance + +| Name | Value | Description | +|--|--|--| +|`Loading` | 0x0 | The instance is loading the JavaScript bundle and initial instance setup. Calls to run JavaScript functions will be queued to run once the instance is fully loaded.| +|`Loaded` | 0x1 | The instance is in a ready state. Calls to run JavaScript functions will be run as soon as they are posted to the JavaScript instance.| +|`HasError` | 0x2 | The instance has hit an error. Calls to run JavaScript functions will not be run.| +|`Unloaded` | 0x3 | The instance has successfully unloaded. Calls to run JavaScript functions will not be run.| + +## Referenced by +- [`IReactContext`](IReactContext) diff --git a/website/versioned_docs/version-0.82/native-api/LogHandler-api-windows.md b/website/versioned_docs/version-0.82/native-api/LogHandler-api-windows.md new file mode 100644 index 000000000..c8cde8508 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/LogHandler-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-LogHandler +title: LogHandler +original_id: LogHandler +--- + +Kind: `delegate` + +delegate to represent a logging function. + +## Invoke +void **`Invoke`**([`LogLevel`](LogLevel) level, string message) + +## Referenced by +- [`ReactInstanceSettings`](ReactInstanceSettings) diff --git a/website/versioned_docs/version-0.82/native-api/LogLevel-api-windows.md b/website/versioned_docs/version-0.82/native-api/LogLevel-api-windows.md new file mode 100644 index 000000000..5f1370782 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/LogLevel-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-LogLevel +title: LogLevel +original_id: LogLevel +--- + +Kind: `enum` + +Used in [`LogHandler`](LogHandler) to represent different LogLevels + +| Name | Value | Description | +|--|--|--| +|`Trace` | 0x0 | | +|`Info` | 0x1 | | +|`Warning` | 0x2 | | +|`Error` | 0x3 | | +|`Fatal` | 0x4 | | + +## Referenced by +- [`LogHandler`](LogHandler) diff --git a/website/versioned_docs/version-0.82/native-api/LosingFocusEventArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/LosingFocusEventArgs-api-windows.md new file mode 100644 index 000000000..cf28e5692 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/LosingFocusEventArgs-api-windows.md @@ -0,0 +1,44 @@ +--- +id: version-0.82-LosingFocusEventArgs +title: LosingFocusEventArgs +original_id: LosingFocusEventArgs +--- + +Kind: `class` + +Implements: [`RoutedEventArgs`](RoutedEventArgs) + +> **EXPERIMENTAL** + +## Properties +### Direction +`readonly` [`FocusNavigationDirection`](FocusNavigationDirection) `Direction` + +> **EXPERIMENTAL** + +### NewFocusedComponent +`readonly` [`ComponentView`](ComponentView) `NewFocusedComponent` + +> **EXPERIMENTAL** + +### OldFocusedComponent +`readonly` [`ComponentView`](ComponentView) `OldFocusedComponent` + +> **EXPERIMENTAL** + +### OriginalSource +`readonly` int `OriginalSource` + +## Methods +### TryCancel +void **`TryCancel`**() + +> **EXPERIMENTAL** + +### TrySetNewFocusedComponent +void **`TrySetNewFocusedComponent`**([`ComponentView`](ComponentView) component) + +> **EXPERIMENTAL** + +## Referenced by +- [`ComponentView`](ComponentView) diff --git a/website/versioned_docs/version-0.82/native-api/MeasureContentHandler-api-windows.md b/website/versioned_docs/version-0.82/native-api/MeasureContentHandler-api-windows.md new file mode 100644 index 000000000..7d6d1296c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/MeasureContentHandler-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-MeasureContentHandler +title: MeasureContentHandler +original_id: MeasureContentHandler +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +[`Size`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Size) **`Invoke`**([`ShadowNode`](ShadowNode) shadowNode, [`LayoutContext`](LayoutContext) layoutContext, [`LayoutConstraints`](LayoutConstraints) layoutConstraints) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/MethodDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/MethodDelegate-api-windows.md new file mode 100644 index 000000000..d3e34b3f4 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/MethodDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-MethodDelegate +title: MethodDelegate +original_id: MethodDelegate +--- + +Kind: `delegate` + +A delegate to call native asynchronous method. + +## Invoke +void **`Invoke`**([`IJSValueReader`](IJSValueReader) inputReader, [`IJSValueWriter`](IJSValueWriter) outputWriter, [`MethodResultCallback`](MethodResultCallback) resolve, [`MethodResultCallback`](MethodResultCallback) reject) + +## Referenced by +- [`IReactModuleBuilder`](IReactModuleBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/MethodResultCallback-api-windows.md b/website/versioned_docs/version-0.82/native-api/MethodResultCallback-api-windows.md new file mode 100644 index 000000000..50cdf19a6 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/MethodResultCallback-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-MethodResultCallback +title: MethodResultCallback +original_id: MethodResultCallback +--- + +Kind: `delegate` + +A callback to call JS code with results. + +## Invoke +void **`Invoke`**([`IJSValueWriter`](IJSValueWriter) outputWriter) + +## Referenced by +- [`MethodDelegate`](MethodDelegate) diff --git a/website/versioned_docs/version-0.82/native-api/MethodReturnType-api-windows.md b/website/versioned_docs/version-0.82/native-api/MethodReturnType-api-windows.md new file mode 100644 index 000000000..296a10e1f --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/MethodReturnType-api-windows.md @@ -0,0 +1,19 @@ +--- +id: version-0.82-MethodReturnType +title: MethodReturnType +original_id: MethodReturnType +--- + +Kind: `enum` + +Native method return type. + +| Name | Value | Description | +|--|--|--| +|`Void` | 0x0 | | +|`Callback` | 0x1 | | +|`TwoCallbacks` | 0x2 | | +|`Promise` | 0x3 | | + +## Referenced by +- [`IReactModuleBuilder`](IReactModuleBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/MicrosoftCompositionContextHelper-api-windows.md b/website/versioned_docs/version-0.82/native-api/MicrosoftCompositionContextHelper-api-windows.md new file mode 100644 index 000000000..cb650ec4e --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/MicrosoftCompositionContextHelper-api-windows.md @@ -0,0 +1,51 @@ +--- +id: version-0.82-MicrosoftCompositionContextHelper +title: MicrosoftCompositionContextHelper +original_id: MicrosoftCompositionContextHelper +--- + +Kind: `class` + +> **EXPERIMENTAL** + +A helper static class to create a [`ICompositionContext`](ICompositionContext) based on Microsoft.Composition Visuals. Generally it should not be required to call this directly. Instead you should call CompositionUIService.SetCompositor (unresolved reference). This is not for general consumption and is expected to be removed in a future release. + +## Methods +### CreateContext +`static` [`ICompositionContext`](ICompositionContext) **`CreateContext`**([`Compositor`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Compositor) compositor) + +> **EXPERIMENTAL** + +Creates a [`ICompositionContext`](ICompositionContext) from a Compositor + +### CreateVisual +`static` [`IVisual`](IVisual) **`CreateVisual`**([`Visual`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Visual) visual) + +> **EXPERIMENTAL** + +Creates a [`IVisual`](IVisual) from a Visual + +### InnerBrush +`static` [`CompositionBrush`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.CompositionBrush) **`InnerBrush`**([`IBrush`](IBrush) brush) + +> **EXPERIMENTAL** + +### InnerCompositor +`static` [`Compositor`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Compositor) **`InnerCompositor`**([`ICompositionContext`](ICompositionContext) context) + +> **EXPERIMENTAL** + +### InnerDropShadow +`static` [`DropShadow`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.DropShadow) **`InnerDropShadow`**([`IDropShadow`](IDropShadow) shadow) + +> **EXPERIMENTAL** + +### InnerSurface +`static` [`ICompositionSurface`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.ICompositionSurface) **`InnerSurface`**([`IDrawingSurfaceBrush`](IDrawingSurfaceBrush) surface) + +> **EXPERIMENTAL** + +### InnerVisual +`static` [`Visual`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Visual) **`InnerVisual`**([`IVisual`](IVisual) visual) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/MountChildComponentViewArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/MountChildComponentViewArgs-api-windows.md new file mode 100644 index 000000000..e07f818d7 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/MountChildComponentViewArgs-api-windows.md @@ -0,0 +1,23 @@ +--- +id: version-0.82-MountChildComponentViewArgs +title: MountChildComponentViewArgs +original_id: MountChildComponentViewArgs +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Properties +### Child +`readonly` [`ComponentView`](ComponentView) `Child` + +> **EXPERIMENTAL** + +### Index +`readonly` uint32_t `Index` + +> **EXPERIMENTAL** + +## Referenced by +- [`MountChildComponentViewDelegate`](MountChildComponentViewDelegate) diff --git a/website/versioned_docs/version-0.82/native-api/MountChildComponentViewDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/MountChildComponentViewDelegate-api-windows.md new file mode 100644 index 000000000..d3ca30016 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/MountChildComponentViewDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-MountChildComponentViewDelegate +title: MountChildComponentViewDelegate +original_id: MountChildComponentViewDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ComponentView`](ComponentView) source, [`MountChildComponentViewArgs`](MountChildComponentViewArgs) args) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/ParagraphComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/ParagraphComponentView-api-windows.md new file mode 100644 index 000000000..9fb391622 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ParagraphComponentView-api-windows.md @@ -0,0 +1,11 @@ +--- +id: version-0.82-ParagraphComponentView +title: ParagraphComponentView +original_id: ParagraphComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/Pointer-api-windows.md b/website/versioned_docs/version-0.82/native-api/Pointer-api-windows.md new file mode 100644 index 000000000..b244e301b --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/Pointer-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-Pointer +title: Pointer +original_id: Pointer +--- + +Kind: `class` + +## Properties +### PointerDeviceType +`readonly` [`PointerDeviceType`](PointerDeviceType) `PointerDeviceType` + +### PointerId +`readonly` uint32_t `PointerId` + +## Referenced by +- [`ComponentView`](ComponentView) +- [`PointerRoutedEventArgs`](PointerRoutedEventArgs) diff --git a/website/versioned_docs/version-0.82/native-api/PointerDeviceType-api-windows.md b/website/versioned_docs/version-0.82/native-api/PointerDeviceType-api-windows.md new file mode 100644 index 000000000..e54ecbd3f --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/PointerDeviceType-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-PointerDeviceType +title: PointerDeviceType +original_id: PointerDeviceType +--- + +Kind: `enum` + +| Name | Value | Description | +|--|--|--| +|`Touch` | 0x0 | | +|`Pen` | 0x1 | | +|`Mouse` | 0x2 | | +|`Touchpad` | 0x3 | | + +## Referenced by +- [`Pointer`](Pointer) +- [`PointerPoint`](PointerPoint) diff --git a/website/versioned_docs/version-0.82/native-api/PointerPoint-api-windows.md b/website/versioned_docs/version-0.82/native-api/PointerPoint-api-windows.md new file mode 100644 index 000000000..25e003150 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/PointerPoint-api-windows.md @@ -0,0 +1,39 @@ +--- +id: version-0.82-PointerPoint +title: PointerPoint +original_id: PointerPoint +--- + +Kind: `class` + +## Properties +### FrameId +`readonly` uint32_t `FrameId` + +### Inner +`readonly` [`PointerPoint`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Input.PointerPoint) `Inner` + +### IsInContact +`readonly` bool `IsInContact` + +### PointerDeviceType +`readonly` [`PointerDeviceType`](PointerDeviceType) `PointerDeviceType` + +### PointerId +`readonly` uint32_t `PointerId` + +### Position +`readonly` [`Point`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Point) `Position` + +### Properties +`readonly` [`PointerPointProperties`](PointerPointProperties) `Properties` + +### Timestamp +`readonly` uint64_t `Timestamp` + +## Methods +### GetOffsetPoint +[`PointerPoint`](PointerPoint) **`GetOffsetPoint`**([`Point`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Point) offset) + +## Referenced by +- [`PointerRoutedEventArgs`](PointerRoutedEventArgs) diff --git a/website/versioned_docs/version-0.82/native-api/PointerPointProperties-api-windows.md b/website/versioned_docs/version-0.82/native-api/PointerPointProperties-api-windows.md new file mode 100644 index 000000000..6fdd6d4cf --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/PointerPointProperties-api-windows.md @@ -0,0 +1,74 @@ +--- +id: version-0.82-PointerPointProperties +title: PointerPointProperties +original_id: PointerPointProperties +--- + +Kind: `class` + +## Properties +### ContactRect +`readonly` [`Rect`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Rect) `ContactRect` + +### IsBarrelButtonPressed +`readonly` bool `IsBarrelButtonPressed` + +### IsCanceled +`readonly` bool `IsCanceled` + +### IsEraser +`readonly` bool `IsEraser` + +### IsHorizontalMouseWheel +`readonly` bool `IsHorizontalMouseWheel` + +### IsInRange +`readonly` bool `IsInRange` + +### IsInverted +`readonly` bool `IsInverted` + +### IsLeftButtonPressed +`readonly` bool `IsLeftButtonPressed` + +### IsMiddleButtonPressed +`readonly` bool `IsMiddleButtonPressed` + +### IsPrimary +`readonly` bool `IsPrimary` + +### IsRightButtonPressed +`readonly` bool `IsRightButtonPressed` + +### IsXButton1Pressed +`readonly` bool `IsXButton1Pressed` + +### IsXButton2Pressed +`readonly` bool `IsXButton2Pressed` + +### MouseWheelDelta +`readonly` int `MouseWheelDelta` + +### Orientation +`readonly` float `Orientation` + +### PointerUpdateKind +`readonly` [`PointerUpdateKind`](PointerUpdateKind) `PointerUpdateKind` + +### Pressure +`readonly` float `Pressure` + +### TouchConfidence +`readonly` bool `TouchConfidence` + +### Twist +`readonly` float `Twist` + +### XTilt +`readonly` float `XTilt` + +### YTilt +`readonly` float `YTilt` + +## Referenced by +- [`PointerPoint`](PointerPoint) diff --git a/website/versioned_docs/version-0.82/native-api/PointerRoutedEventArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/PointerRoutedEventArgs-api-windows.md new file mode 100644 index 000000000..361d714aa --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/PointerRoutedEventArgs-api-windows.md @@ -0,0 +1,30 @@ +--- +id: version-0.82-PointerRoutedEventArgs +title: PointerRoutedEventArgs +original_id: PointerRoutedEventArgs +--- + +Kind: `class` + +Implements: [`RoutedEventArgs`](RoutedEventArgs) + +## Properties +### Handled + bool `Handled` + +### KeyModifiers +`readonly` [`VirtualKeyModifiers`](https://docs.microsoft.com/uwp/api/Windows.System.VirtualKeyModifiers) `KeyModifiers` + +### OriginalSource +`readonly` int `OriginalSource` + +### Pointer +`readonly` [`Pointer`](Pointer) `Pointer` + +## Methods +### GetCurrentPoint +[`PointerPoint`](PointerPoint) **`GetCurrentPoint`**(int tag) + +## Referenced by +- [`ComponentView`](ComponentView) +- [`IScrollVisual`](IScrollVisual) diff --git a/website/versioned_docs/version-0.82/native-api/PointerUpdateKind-api-windows.md b/website/versioned_docs/version-0.82/native-api/PointerUpdateKind-api-windows.md new file mode 100644 index 000000000..630dc22d4 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/PointerUpdateKind-api-windows.md @@ -0,0 +1,24 @@ +--- +id: version-0.82-PointerUpdateKind +title: PointerUpdateKind +original_id: PointerUpdateKind +--- + +Kind: `enum` + +| Name | Value | Description | +|--|--|--| +|`Other` | 0x0 | | +|`LeftButtonPressed` | 0x1 | | +|`LeftButtonReleased` | 0x2 | | +|`RightButtonPressed` | 0x3 | | +|`RightButtonReleased` | 0x4 | | +|`MiddleButtonPressed` | 0x5 | | +|`MiddleButtonReleased` | 0x6 | | +|`XButton1Pressed` | 0x7 | | +|`XButton1Released` | 0x8 | | +|`XButton2Pressed` | 0x9 | | +|`XButton2Released` | 0xa | | + +## Referenced by +- [`PointerPointProperties`](PointerPointProperties) diff --git a/website/versioned_docs/version-0.82/native-api/PortalComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/PortalComponentView-api-windows.md new file mode 100644 index 000000000..063825f0c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/PortalComponentView-api-windows.md @@ -0,0 +1,24 @@ +--- +id: version-0.82-PortalComponentView +title: PortalComponentView +original_id: PortalComponentView +--- + +Kind: `class` + +Extends: [`ComponentView`](ComponentView) + +> **EXPERIMENTAL** + +Used to implement UI that is hosted outside the main UI tree, such as modal. + +## Properties +### ContentRoot +`readonly` [`RootComponentView`](RootComponentView) `ContentRoot` + +> **EXPERIMENTAL** + +## Referenced by +- [`PortalComponentViewInitializer`](PortalComponentViewInitializer) +- [`ReactNativeIsland`](ReactNativeIsland) +- [`RootComponentView`](RootComponentView) diff --git a/website/versioned_docs/version-0.82/native-api/PortalComponentViewInitializer-api-windows.md b/website/versioned_docs/version-0.82/native-api/PortalComponentViewInitializer-api-windows.md new file mode 100644 index 000000000..ab72c8d3f --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/PortalComponentViewInitializer-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-PortalComponentViewInitializer +title: PortalComponentViewInitializer +original_id: PortalComponentViewInitializer +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`PortalComponentView`](PortalComponentView) view) + +## Referenced by +- [`IReactCompositionViewComponentBuilder`](IReactCompositionViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/QuirkSettings-api-windows.md b/website/versioned_docs/version-0.82/native-api/QuirkSettings-api-windows.md new file mode 100644 index 000000000..b6551a376 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/QuirkSettings-api-windows.md @@ -0,0 +1,68 @@ +--- +id: version-0.82-QuirkSettings +title: QuirkSettings +original_id: QuirkSettings +--- + +Kind: `class` + +> **EXPERIMENTAL** + +This can be used to add settings that allow react-native-windows behavior to be maintained across version updates to facilitate upgrades. Settings in this class are likely to be removed in future releases, so apps should try to update their code to not rely on these settings. + +## Methods +### SetAcceptSelfSigned +`static` void **`SetAcceptSelfSigned`**([`ReactInstanceSettings`](ReactInstanceSettings) settings, bool value) + +> **EXPERIMENTAL** + +Runtime setting allowing Networking (HTTP, WebSocket) connections to skip certificate validation. + +### SetBackHandlerKind +`static` void **`SetBackHandlerKind`**([`ReactInstanceSettings`](ReactInstanceSettings) settings, [`BackNavigationHandlerKind`](BackNavigationHandlerKind) kind) + +> **EXPERIMENTAL** + +By default `react-native-windows` will handle various back events and forward them to JavaScript. Setting this to [`BackNavigationHandlerKind.Native`](BackNavigationHandlerKind) prevents `react-native-windows` from handling these events, including forwarding to JavaScript. This will allow applications to handle back navigation in native code, but will prevent the `BackHandler` native module from receiving events. + +### SetMapWindowDeactivatedToAppStateInactive +`static` void **`SetMapWindowDeactivatedToAppStateInactive`**([`ReactInstanceSettings`](ReactInstanceSettings) settings, bool value) + +> **EXPERIMENTAL** + +**Default value**: `false` + +By default `react-native-windows` will only track `active` and `background` `AppState`. Setting this to true enables `react-native-windows` to also track `inactive` `AppState` which [maps closely to iOS.](https://reactnative.dev/docs/appstate)`inactive` tracks the [Window.Activated Event](https://docs.microsoft.com/uwp/api/windows.ui.core.corewindow.activated) when the window is deactivated. + +### SetMatchAndroidAndIOSStretchBehavior +`static` void **`SetMatchAndroidAndIOSStretchBehavior`**([`ReactInstanceSettings`](ReactInstanceSettings) settings, bool value) + +> **EXPERIMENTAL** + +**Default value**: `true` + +Older versions of react-native-windows did not use [Yoga](https://github.com/facebook/yoga)'s legacy stretch behavior. This meant that react-native-windows would layout views slightly differently that in iOS and Android. +Set this setting to false to maintain the behavior from react-native-windows <= 0.62. + +### SetSuppressWindowFocusOnViewFocus +`static` void **`SetSuppressWindowFocusOnViewFocus`**([`ReactInstanceSettings`](ReactInstanceSettings) settings, bool value) + +> **EXPERIMENTAL** + +When running multiple windows from a single UI thread, focusing a native view causes the parent window of that view to get focus as well. Set this setting to true to prevent focus of a blurred window when a view in that window is programmatically focused. + +### SetUseRuntimeScheduler +`static` void **`SetUseRuntimeScheduler`**([`ReactInstanceSettings`](ReactInstanceSettings) settings, bool value) + +> **EXPERIMENTAL** + +By default `react-native-windows` will use the new RuntimeScheduler.Setting this to false will revert the behavior to previous scheduling logic. + +### SetUseWebFlexBasisBehavior +`static` void **`SetUseWebFlexBasisBehavior`**([`ReactInstanceSettings`](ReactInstanceSettings) settings, bool value) + +> **EXPERIMENTAL** + +**Default value**: `false` + +There is a chance that cached flex basis values can cause text truncation in some re-layout scenarios. Enabling [Yoga](https://github.com/facebook/yoga)'s experimental web flex basis behavior fixes this issue, however using it may result in performance regressions due to additional layout passes. diff --git a/website/versioned_docs/version-0.82/native-api/ReactCoreInjection-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactCoreInjection-api-windows.md new file mode 100644 index 000000000..6bb323a18 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactCoreInjection-api-windows.md @@ -0,0 +1,61 @@ +--- +id: version-0.82-ReactCoreInjection +title: ReactCoreInjection +original_id: ReactCoreInjection +--- + +Kind: `class` + +> **EXPERIMENTAL** + +Used to inject platform specific implementations to create react-native targets targeting non-XAML platforms. + +## Methods +### GetTopLevelWindowId +`static` uint64_t **`GetTopLevelWindowId`**([`IReactPropertyBag`](IReactPropertyBag) properties) + +> **EXPERIMENTAL** + +Gets the window handle HWND (as an UInt64) for the active top level application window. + +### MakeViewHost +`static` [`IReactViewHost`](IReactViewHost) **`MakeViewHost`**([`ReactNativeHost`](ReactNativeHost) host, [`ReactViewOptions`](ReactViewOptions) viewOptions) + +> **EXPERIMENTAL** + +Custom ReactViewInstances use this to create a host to connect to. + +### PostToUIBatchingQueue +`static` void **`PostToUIBatchingQueue`**([`IReactContext`](IReactContext) context, [`ReactDispatcherCallback`](ReactDispatcherCallback) callback) + +> **EXPERIMENTAL** + +Post something to the main UI dispatcher using the batching queue + +### SetPlatformNameOverride +`static` void **`SetPlatformNameOverride`**([`IReactPropertyBag`](IReactPropertyBag) properties, string platformName) + +> **EXPERIMENTAL** + +Override platform name. This will change the platform used when requesting bundles from metro. Default: \"windows\" + +### SetTimerFactory +`static` void **`SetTimerFactory`**([`IReactPropertyBag`](IReactPropertyBag) properties, [`TimerFactory`](TimerFactory) timerFactory) + +> **EXPERIMENTAL** + +Sets a factory method for creating custom timers, in environments where system dispatch timers should not be used. + +### SetTopLevelWindowId +`static` void **`SetTopLevelWindowId`**([`IReactPropertyBag`](IReactPropertyBag) properties, uint64_t windowId) + +> **EXPERIMENTAL** + +Sets the window handle HWND (as an UInt64) for the active top level application window.This must be manually provided to the [`ReactInstanceSettings`](ReactInstanceSettings) object when using ReactNativeWindowswithout XAML for certain APIs work correctly. + +### SetUIBatchCompleteCallback +`static` void **`SetUIBatchCompleteCallback`**([`IReactPropertyBag`](IReactPropertyBag) properties, [`UIBatchCompleteCallback`](UIBatchCompleteCallback) xamlRoot) + +> **EXPERIMENTAL** + +Sets the Callback to call when a UI batch is completed. diff --git a/website/versioned_docs/version-0.82/native-api/ReactCreatePropertyValue-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactCreatePropertyValue-api-windows.md new file mode 100644 index 000000000..f66ab6e3b --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactCreatePropertyValue-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-ReactCreatePropertyValue +title: ReactCreatePropertyValue +original_id: ReactCreatePropertyValue +--- + +Kind: `delegate` + +This delegate is used to create a [`IReactPropertyBag`](IReactPropertyBag) property value on-demand. + +## Invoke +Object **`Invoke`**() + +## Referenced by +- [`IReactPropertyBag`](IReactPropertyBag) diff --git a/website/versioned_docs/version-0.82/native-api/ReactDispatcherCallback-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactDispatcherCallback-api-windows.md new file mode 100644 index 000000000..656425330 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactDispatcherCallback-api-windows.md @@ -0,0 +1,16 @@ +--- +id: version-0.82-ReactDispatcherCallback +title: ReactDispatcherCallback +original_id: ReactDispatcherCallback +--- + +Kind: `delegate` + +The delegate is used to create property value on-demand. + +## Invoke +void **`Invoke`**() + +## Referenced by +- [`IReactDispatcher`](IReactDispatcher) +- [`ReactCoreInjection`](ReactCoreInjection) diff --git a/website/versioned_docs/version-0.82/native-api/ReactDispatcherHelper-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactDispatcherHelper-api-windows.md new file mode 100644 index 000000000..3a6e52e4f --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactDispatcherHelper-api-windows.md @@ -0,0 +1,54 @@ +--- +id: version-0.82-ReactDispatcherHelper +title: ReactDispatcherHelper +original_id: ReactDispatcherHelper +--- + +Kind: `class` + +Helper methods for the [`IReactDispatcher`](IReactDispatcher) implementation. + +## Properties +### JSDispatcherIdleWaitCompletedEventName +`static` `readonly` [`IReactPropertyName`](IReactPropertyName) `JSDispatcherIdleWaitCompletedEventName` + +Gets the name of the `JSDispatcherIdleWaitCompletedEventName` property for the [`IReactNotificationService`](IReactNotificationService). +This notification name is to be used with IReactNotificationService. + +### JSDispatcherIdleWaitStartingEventName +`static` `readonly` [`IReactPropertyName`](IReactPropertyName) `JSDispatcherIdleWaitStartingEventName` + +Gets the name of the `JSDispatcherIdleWaitStartingEventName` property for the [`IReactNotificationService`](IReactNotificationService). +This notification name is to be used with IReactNotificationService. + +### JSDispatcherProperty +`static` `readonly` [`IReactPropertyName`](IReactPropertyName) `JSDispatcherProperty` + +> **Deprecated**: Use [`IReactContext.CallInvoker`](IReactContext#callinvoker) instead + +Gets name of the `JSDispatcher` property for the [`IReactPropertyBag`](IReactPropertyBag). +Generally you can use [`IReactContext.JSDispatcher`](IReactContext#jsdispatcher) to get the value of this property for a specific React instance. + +### JSDispatcherTaskStartingEventName +`static` `readonly` [`IReactPropertyName`](IReactPropertyName) `JSDispatcherTaskStartingEventName` + +Gets the name of the `JSDispatcherTaskStartingEventName` property for the [`IReactNotificationService`](IReactNotificationService). +This notification name is to be used with IReactNotificationService. + +### UIDispatcherProperty +`static` `readonly` [`IReactPropertyName`](IReactPropertyName) `UIDispatcherProperty` + +Gets name of the `UIDispatcher` property for the [`IReactPropertyBag`](IReactPropertyBag). +Generally you can use [`IReactContext.UIDispatcher`](IReactContext#uidispatcher) to get the value of this property for a specific React instance. + +### UIThreadDispatcher +`static` `readonly` [`IReactDispatcher`](IReactDispatcher) `UIThreadDispatcher` + +Gets or creates a [`IReactDispatcher`](IReactDispatcher) for the current UI thread. +This can be used with [`ReactInstanceSettings.UIDispatcher`](ReactInstanceSettings#uidispatcher) to launch a React instance from a non-UI thread. This API must be called from a UI thread. It will return null if called from a non-UI thread. + +## Methods +### CreateSerialDispatcher +`static` [`IReactDispatcher`](IReactDispatcher) **`CreateSerialDispatcher`**() + +Creates a new serial dispatcher that uses thread pool to run tasks. diff --git a/website/versioned_docs/version-0.82/native-api/ReactInstanceSettings-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactInstanceSettings-api-windows.md new file mode 100644 index 000000000..ee068e30f --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactInstanceSettings-api-windows.md @@ -0,0 +1,498 @@ +--- +id: version-0.82-ReactInstanceSettings +title: ReactInstanceSettings +original_id: ReactInstanceSettings +--- + +## New Architecture + +Kind: `class` + +Provides settings to create a React instance. + +### Properties +#### BundleAppId + string `BundleAppId` + +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 + string `BundleRootPath` + +**Default value**: `ms-appx:///Bundle/` + +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](https://docs.microsoft.com/windows/uwp/app-resources/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](https://docs.microsoft.com/windows/uwp/files/file-access-permissions). +- `resource://moduleName` - locates the bundle as an embedded RCDATA resource in moduleName. Specify the resource ID in [`JavaScriptBundleFile`](#javascriptbundlefile). +- `resource://` - locates the bundle as an embedded RCDATA resource in the running process's module. Specify the resource ID in [`JavaScriptBundleFile`](#javascriptbundlefile). + +#### ByteCodeFileUri + string `ByteCodeFileUri` + +Set this to a location the application has write access to in order for bytecode to be successfully cached. See [`EnableByteCodeCaching`](#enablebytecodecaching). +**Note that currently the byte code generation is not implemented for UWP applications.** + +#### DebugBundlePath + string `DebugBundlePath` + +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`](#javascriptbundlefile) is used. + +#### DebuggerBreakOnNextLine + bool `DebuggerBreakOnNextLine` + +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 + uint16_t `DebuggerPort` + +**Default value**: `9229` + +When [`UseDirectDebugger`](#usedirectdebugger) is enabled, this controls the port that the JavaScript engine debugger will run on. + +#### DebuggerRuntimeName + string `DebuggerRuntimeName` + +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 + bool `EnableByteCodeCaching` + +**Default value**: `false` + +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`](#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 + bool `EnableDefaultCrashHandler` + +**Default value**: `false` + +Enables the default unhandled exception handler that logs additional information into a text file for [Windows Error Reporting](https://docs.microsoft.com/windows/win32/wer/windows-error-reporting). + +#### EnableDeveloperMenu + bool `EnableDeveloperMenu` + +> **Deprecated**: This property has been replaced by [`UseDeveloperSupport`](#usedevelopersupport). In version 0.63 both properties will do the same thing. It will be removed in a future version. + +This controls whether various developer experience features are available for this instance. In particular the developer menu, and the default `RedBox` experience. + +#### EnableJITCompilation + bool `EnableJITCompilation` + +**Default value**: `true` + +Flag controlling whether the JavaScript engine uses JIT compilation. + +#### JSIEngineOverride + [`JSIEngine`](JSIEngine) `JSIEngineOverride` + +**Default value**: `JSIEngine.Chakra` + +The [`JSIEngine`](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`](#usewebdebugger) is set to true, since the browser must use its own engine to debug correctly. + +#### JavaScriptBundleFile + string `JavaScriptBundleFile` + +**Default value**: `index.windows` + +The name of the JavaScript bundle file to load. This should be a relative path from [`BundleRootPath`](#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`](#bundlerootpath). + +#### NativeLogger + [`LogHandler`](LogHandler) `NativeLogger` + +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. + +#### Notifications +`readonly` [`IReactNotificationService`](IReactNotificationService) `Notifications` + +Gets a [`IReactNotificationService`](IReactNotificationService) to send notifications between components and the application. +Use [`IReactContext.Notifications`](IReactContext#notifications) to access this [`IReactNotificationService`](IReactNotificationService) from native components or view managers. + +#### PackageProviders +`readonly` [`IVector`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Collections.IVector-1)<[`IReactPackageProvider`](IReactPackageProvider)> `PackageProviders` + +Gets a list of [`IReactPackageProvider`](IReactPackageProvider). +Add an implementation of [`IReactPackageProvider`](IReactPackageProvider) to this list to define additional native modules and custom view managers to be included in the React instance. +Auto-linking automatically adds [`IReactPackageProvider`](IReactPackageProvider) to the application's [`PackageProviders`](#packageproviders). + +#### Properties +`readonly` [`IReactPropertyBag`](IReactPropertyBag) `Properties` + +Gets a [`IReactPropertyBag`](IReactPropertyBag) to share values between components and the application. +Use [`IReactContext.Properties`](IReactContext#properties-1) to access this [`IReactPropertyBag`](IReactPropertyBag) from native components and view managers. + +#### RedBoxHandler + [`IRedBoxHandler`](IRedBoxHandler) `RedBoxHandler` + +Provides an extension point to allow custom error handling within the react instance. See [`IRedBoxHandler`](IRedBoxHandler) for more information. + +#### RequestDevBundle + bool `RequestDevBundle` + +When querying the bundle server for a bundle, should it request the dev bundle or release bundle. + +#### RequestInlineSourceMap + bool `RequestInlineSourceMap` + +**Default value**: `true` + +When using [`UseFastRefresh`](#usefastrefresh), [`UseLiveReload`](#uselivereload), or [`UseWebDebugger`](#usewebdebugger) this controls whether the bundler should include inline source maps.If set, the bundler will include the source maps inline (this will improve debugging experience, but for very large bundles it could have a significant performance hit) + +#### SourceBundleHost + string `SourceBundleHost` + +**Default value**: `localhost` + +When using [`UseFastRefresh`](#usefastrefresh), [`UseLiveReload`](#uselivereload), or [`UseWebDebugger`](#usewebdebugger) this is the server hostname that will be used to load the bundle from. + +#### SourceBundlePort + uint16_t `SourceBundlePort` + +**Default value**: `8081` + +When using [`UseFastRefresh`](#usefastrefresh), [`UseLiveReload`](#uselivereload), or [`UseWebDebugger`](#usewebdebugger) this is the server port that will be used to load the bundle from. + +#### UIDispatcher + [`IReactDispatcher`](IReactDispatcher) `UIDispatcher` + +Control the main UI dispatcher to be used by the React instance. If the [`ReactInstanceSettings`](ReactInstanceSettings) object is initially created on a UI thread, then this will default to that thread. The value provided here will be available to native modules and view managers using [`IReactContext.UIDispatcher`](IReactContext#uidispatcher) + +#### UseDeveloperSupport + bool `UseDeveloperSupport` + +This 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 + bool `UseDirectDebugger` + +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 + bool `UseFastRefresh` + +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](https://reactnative.dev/docs/fast-refresh) for more information on Fast Refresh. + +#### UseLiveReload + bool `UseLiveReload` + +> **Deprecated**: For general use this has been replaced by [`UseFastRefresh`](#usefastrefresh). + +Enables live reload to load the source bundle from the React Native packager. +When the file is saved, the packager will trigger reloading. + +#### UseWebDebugger + bool `UseWebDebugger` + +> **Deprecated**: Debugging should be done using DirectDebugging rather than WebDebugger. Web debugging changes the app behavior and will be removed in a future version. + +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 + **`ReactInstanceSettings`**() + +### Events +#### `InstanceCreated` +The InstanceCreated (unresolved reference) event is triggered right after the React Native instance is created. + +It is triggered on the JSDispatcher thread before any other JSDispatcher work items. +No JavaScript code is loaded in the JavaScript engine yet. +The [`InstanceCreatedEventArgs.Context`](InstanceCreatedEventArgs#context) property on the event arguments provides access to the instance context. + +Note that the InstanceCreated (unresolved reference) event is triggered in response to the 'InstanceCreated' notification raised in the 'ReactNative.InstanceSettings' namespace. Consider using Notifications (unresolved reference) to handle the notification in a dispatcher different from the JSDispatcher. + +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1)<[`InstanceCreatedEventArgs`](InstanceCreatedEventArgs)> +#### `InstanceDestroyed` +The InstanceDestroyed (unresolved reference) event is triggered when React Native instance is destroyed. + +It is triggered on the JSDispatcher thread as the last work item before it shuts down. +No new JSDispatcher work can be executed after that. +The [`InstanceDestroyedEventArgs.Context`](InstanceDestroyedEventArgs#context) property on the event arguments provides access to the instance context. + +Note that the InstanceDestroyed (unresolved reference) event is triggered in response to the 'InstanceDestroyed' notification raised in the 'ReactNative.InstanceSettings' namespace. Consider using Notifications (unresolved reference) to handle the notification in a dispatcher different from the JSDispatcher. + +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1)<[`InstanceDestroyedEventArgs`](InstanceDestroyedEventArgs)> +#### `InstanceLoaded` +The InstanceLoaded (unresolved reference) event is triggered when React Native instance has finished loading the JavaScript bundle. + +It is triggered on the JSDispatcher thread. +If there were errors, then the [`InstanceLoadedEventArgs.Failed`](InstanceLoadedEventArgs#failed) property on the event arguments will be true. +The error types include: + +* JavaScript syntax errors. +* Global JavaScript exceptions thrown. + +The [`InstanceLoadedEventArgs.Context`](InstanceLoadedEventArgs#context) property on the event arguments provides access to the instance context. + +Note that the InstanceLoaded (unresolved reference) event is triggered in response to the 'InstanceLoaded' notification raised in the 'ReactNative.InstanceSettings' namespace. Consider using Notifications (unresolved reference) to handle the notification in a dispatcher different from the JSDispatcher. + +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1)<[`InstanceLoadedEventArgs`](InstanceLoadedEventArgs)> + +### Referenced by +- [`HttpSettings`](HttpSettings) +- [`QuirkSettings`](QuirkSettings) +- [`ReactNativeHost`](ReactNativeHost) + +## Old Architecture + +Kind: `class` + +Provides settings to create a React instance. + +### Properties +#### BundleAppId + string `BundleAppId` + +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 + string `BundleRootPath` + +**Default value**: `ms-appx:///Bundle/` + +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](https://docs.microsoft.com/windows/uwp/app-resources/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](https://docs.microsoft.com/windows/uwp/files/file-access-permissions). +- `resource://moduleName` - locates the bundle as an embedded RCDATA resource in moduleName. Specify the resource ID in [`JavaScriptBundleFile`](#javascriptbundlefile). +- `resource://` - locates the bundle as an embedded RCDATA resource in the running process's module. Specify the resource ID in [`JavaScriptBundleFile`](#javascriptbundlefile). + +#### ByteCodeFileUri + string `ByteCodeFileUri` + +Set this to a location the application has write access to in order for bytecode to be successfully cached. See [`EnableByteCodeCaching`](#enablebytecodecaching). +**Note that currently the byte code generation is not implemented for UWP applications.** + +#### DebugBundlePath + string `DebugBundlePath` + +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`](#javascriptbundlefile) is used. + +#### DebuggerBreakOnNextLine + bool `DebuggerBreakOnNextLine` + +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 + uint16_t `DebuggerPort` + +**Default value**: `9229` + +When [`UseDirectDebugger`](#usedirectdebugger) is enabled, this controls the port that the JavaScript engine debugger will run on. + +#### DebuggerRuntimeName + string `DebuggerRuntimeName` + +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 + bool `EnableByteCodeCaching` + +**Default value**: `false` + +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`](#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 + bool `EnableDefaultCrashHandler` + +**Default value**: `false` + +Enables the default unhandled exception handler that logs additional information into a text file for [Windows Error Reporting](https://docs.microsoft.com/windows/win32/wer/windows-error-reporting). + +#### EnableDeveloperMenu + bool `EnableDeveloperMenu` + +> **Deprecated**: This property has been replaced by [`UseDeveloperSupport`](#usedevelopersupport). In version 0.63 both properties will do the same thing. It will be removed in a future version. + +This controls whether various developer experience features are available for this instance. In particular the developer menu, and the default `RedBox` experience. + +#### EnableJITCompilation + bool `EnableJITCompilation` + +**Default value**: `true` + +Flag controlling whether the JavaScript engine uses JIT compilation. + +#### JSIEngineOverride + [`JSIEngine`](JSIEngine) `JSIEngineOverride` + +**Default value**: `JSIEngine.Chakra` + +The [`JSIEngine`](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`](#usewebdebugger) is set to true, since the browser must use its own engine to debug correctly. + +#### JavaScriptBundleFile + string `JavaScriptBundleFile` + +**Default value**: `index.windows` + +The name of the JavaScript bundle file to load. This should be a relative path from [`BundleRootPath`](#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`](#bundlerootpath). + +#### NativeLogger + [`LogHandler`](LogHandler) `NativeLogger` + +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. + +#### Notifications +`readonly` [`IReactNotificationService`](IReactNotificationService) `Notifications` + +Gets a [`IReactNotificationService`](IReactNotificationService) to send notifications between components and the application. +Use [`IReactContext.Notifications`](IReactContext#notifications) to access this [`IReactNotificationService`](IReactNotificationService) from native components or view managers. + +#### PackageProviders +`readonly` [`IVector`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Collections.IVector-1)<[`IReactPackageProvider`](IReactPackageProvider)> `PackageProviders` + +Gets a list of [`IReactPackageProvider`](IReactPackageProvider). +Add an implementation of [`IReactPackageProvider`](IReactPackageProvider) to this list to define additional native modules and custom view managers to be included in the React instance. +Auto-linking automatically adds [`IReactPackageProvider`](IReactPackageProvider) to the application's [`PackageProviders`](#packageproviders). + +#### Properties +`readonly` [`IReactPropertyBag`](IReactPropertyBag) `Properties` + +Gets a [`IReactPropertyBag`](IReactPropertyBag) to share values between components and the application. +Use [`IReactContext.Properties`](IReactContext#properties-1) to access this [`IReactPropertyBag`](IReactPropertyBag) from native components and view managers. + +#### RedBoxHandler + [`IRedBoxHandler`](IRedBoxHandler) `RedBoxHandler` + +Provides an extension point to allow custom error handling within the react instance. See [`IRedBoxHandler`](IRedBoxHandler) for more information. + +#### RequestDevBundle + bool `RequestDevBundle` + +When querying the bundle server for a bundle, should it request the dev bundle or release bundle. + +#### RequestInlineSourceMap + bool `RequestInlineSourceMap` + +**Default value**: `true` + +When using [`UseFastRefresh`](#usefastrefresh), [`UseLiveReload`](#uselivereload), or [`UseWebDebugger`](#usewebdebugger) this controls whether the bundler should include inline source maps.If set, the bundler will include the source maps inline (this will improve debugging experience, but for very large bundles it could have a significant performance hit) + +#### SourceBundleHost + string `SourceBundleHost` + +**Default value**: `localhost` + +When using [`UseFastRefresh`](#usefastrefresh), [`UseLiveReload`](#uselivereload), or [`UseWebDebugger`](#usewebdebugger) this is the server hostname that will be used to load the bundle from. + +#### SourceBundlePort + uint16_t `SourceBundlePort` + +**Default value**: `8081` + +When using [`UseFastRefresh`](#usefastrefresh), [`UseLiveReload`](#uselivereload), or [`UseWebDebugger`](#usewebdebugger) this is the server port that will be used to load the bundle from. + +#### UIDispatcher + [`IReactDispatcher`](IReactDispatcher) `UIDispatcher` + +Control the main UI dispatcher to be used by the React instance. If the [`ReactInstanceSettings`](ReactInstanceSettings) object is initially created on a UI thread, then this will default to that thread. The value provided here will be available to native modules and view managers using [`IReactContext.UIDispatcher`](IReactContext#uidispatcher) + +#### UseDeveloperSupport + bool `UseDeveloperSupport` + +This 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 + bool `UseDirectDebugger` + +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 + bool `UseFastRefresh` + +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](https://reactnative.dev/docs/fast-refresh) for more information on Fast Refresh. + +#### UseLiveReload + bool `UseLiveReload` + +> **Deprecated**: For general use this has been replaced by [`UseFastRefresh`](#usefastrefresh). + +Enables live reload to load the source bundle from the React Native packager. +When the file is saved, the packager will trigger reloading. + +#### UseWebDebugger + bool `UseWebDebugger` + +> **Deprecated**: Debugging should be done using DirectDebugging rather than WebDebugger. Web debugging changes the app behavior and will be removed in a future version. + +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 + **`ReactInstanceSettings`**() + +### Events +#### `InstanceCreated` +The InstanceCreated (unresolved reference) event is triggered right after the React Native instance is created. + +It is triggered on the JSDispatcher thread before any other JSDispatcher work items. +No JavaScript code is loaded in the JavaScript engine yet. +The [`InstanceCreatedEventArgs.Context`](InstanceCreatedEventArgs#context) property on the event arguments provides access to the instance context. + +Note that the InstanceCreated (unresolved reference) event is triggered in response to the 'InstanceCreated' notification raised in the 'ReactNative.InstanceSettings' namespace. Consider using Notifications (unresolved reference) to handle the notification in a dispatcher different from the JSDispatcher. + +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1)<[`InstanceCreatedEventArgs`](InstanceCreatedEventArgs)> +#### `InstanceDestroyed` +The InstanceDestroyed (unresolved reference) event is triggered when React Native instance is destroyed. + +It is triggered on the JSDispatcher thread as the last work item before it shuts down. +No new JSDispatcher work can be executed after that. +The [`InstanceDestroyedEventArgs.Context`](InstanceDestroyedEventArgs#context) property on the event arguments provides access to the instance context. + +Note that the InstanceDestroyed (unresolved reference) event is triggered in response to the 'InstanceDestroyed' notification raised in the 'ReactNative.InstanceSettings' namespace. Consider using Notifications (unresolved reference) to handle the notification in a dispatcher different from the JSDispatcher. + +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1)<[`InstanceDestroyedEventArgs`](InstanceDestroyedEventArgs)> +#### `InstanceLoaded` +The InstanceLoaded (unresolved reference) event is triggered when React Native instance has finished loading the JavaScript bundle. + +It is triggered on the JSDispatcher thread. +If there were errors, then the [`InstanceLoadedEventArgs.Failed`](InstanceLoadedEventArgs#failed) property on the event arguments will be true. +The error types include: + +* JavaScript syntax errors. +* Global JavaScript exceptions thrown. + +The [`InstanceLoadedEventArgs.Context`](InstanceLoadedEventArgs#context) property on the event arguments provides access to the instance context. + +Note that the InstanceLoaded (unresolved reference) event is triggered in response to the 'InstanceLoaded' notification raised in the 'ReactNative.InstanceSettings' namespace. Consider using Notifications (unresolved reference) to handle the notification in a dispatcher different from the JSDispatcher. + +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1)<[`InstanceLoadedEventArgs`](InstanceLoadedEventArgs)> + +### Referenced by +- [`HttpSettings`](HttpSettings) +- [`QuirkSettings`](QuirkSettings) +- [`ReactApplication`](ReactApplication) +- [`ReactNativeHost`](ReactNativeHost) diff --git a/website/versioned_docs/version-0.82/native-api/ReactModuleProvider-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactModuleProvider-api-windows.md new file mode 100644 index 000000000..227aecad1 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactModuleProvider-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-ReactModuleProvider +title: ReactModuleProvider +original_id: ReactModuleProvider +--- + +Kind: `delegate` + +Provides information about a custom native module. See [`IReactModuleBuilder`](IReactModuleBuilder). + +## Invoke +Object **`Invoke`**([`IReactModuleBuilder`](IReactModuleBuilder) moduleBuilder) + +## Referenced by +- [`IReactPackageBuilder`](IReactPackageBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/ReactNativeAppBuilder-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactNativeAppBuilder-api-windows.md new file mode 100644 index 000000000..0bfd9b75f --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactNativeAppBuilder-api-windows.md @@ -0,0 +1,26 @@ +--- +id: version-0.82-ReactNativeAppBuilder +title: ReactNativeAppBuilder +original_id: ReactNativeAppBuilder +--- + +Kind: `class` + +> **EXPERIMENTAL** + +ReactNativeAppBuilder builds a ReactNativeWin32App with the base WinAppSDK infrastructure. + +## Constructors +### ReactNativeAppBuilder + **`ReactNativeAppBuilder`**() + +## Methods +### Build +[`ReactNativeWin32App`](ReactNativeWin32App) **`Build`**() + +> **EXPERIMENTAL** + +### SetAppWindow +[`ReactNativeAppBuilder`](ReactNativeAppBuilder) **`SetAppWindow`**([`AppWindow`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Windowing.AppWindow) appWindow) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/ReactNativeHost-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactNativeHost-api-windows.md new file mode 100644 index 000000000..7d4033576 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactNativeHost-api-windows.md @@ -0,0 +1,120 @@ +--- +id: version-0.82-ReactNativeHost +title: ReactNativeHost +original_id: ReactNativeHost +--- + +## New Architecture + +Kind: `class` + +This is the main entry-point to create a React instance. +The `ReactNativeHost` object exists to configure the instance using [`ReactInstanceSettings`](ReactInstanceSettings) before it is loaded, as well as enabling control of when to load the instance. +Use [`ReactInstanceSettings`](ReactInstanceSettings) events to observe instance creation, loading, and destruction. + +### Properties +#### InstanceSettings + [`ReactInstanceSettings`](ReactInstanceSettings) `InstanceSettings` + +Provides access to this host's [`ReactInstanceSettings`](ReactInstanceSettings) to configure the react instance. + +#### PackageProviders +`readonly` [`IVector`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Collections.IVector-1)<[`IReactPackageProvider`](IReactPackageProvider)> `PackageProviders` + +Provides access to the list of [`IReactPackageProvider`](IReactPackageProvider)'s that the React 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 or other shared libraries. + +### Constructors +#### ReactNativeHost + **`ReactNativeHost`**() + +### Methods +#### FromContext +`static` [`ReactNativeHost`](ReactNativeHost) **`FromContext`**([`IReactContext`](IReactContext) reactContext) + +Returns the [`ReactNativeHost`](ReactNativeHost) instance associated with the given [`IReactContext`](IReactContext). + +#### LoadInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`LoadInstance`**() + +Loads a new React instance. It is an alias for [`ReloadInstance`](#reloadinstance) method. + +#### ReloadInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`ReloadInstance`**() + +Unloads the current React instance and loads a new one. +The React instance loading creates an instance of the JavaScript engine, and launches the provided JavaScript code bundle. +If a React instance is already running in this host, then [`ReloadInstance`](#reloadinstance) shuts down the already the running React instance, and loads a new React instance. +The React instance lifecycle can be observed with the following events:- The [`ReactInstanceSettings.InstanceCreated`](ReactInstanceSettings#instancecreated) event is raised when the React instance is just created. +- The [`ReactInstanceSettings.InstanceLoaded`](ReactInstanceSettings#instanceloaded) event is raised when the React instance completed loading the JavaScript bundle. +- The [`ReactInstanceSettings.InstanceDestroyed`](ReactInstanceSettings#instancedestroyed) event is raised when the React instance is destroyed. + +#### UnloadInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`UnloadInstance`**() + +Unloads current React instance. +After the React instance is unloaded, all the React resources including the JavaScript engine environment are cleaned up. +The React instance destruction can be observed with the [`ReactInstanceSettings.InstanceDestroyed`](ReactInstanceSettings#instancedestroyed) event. + +### Referenced by +- [`IReactViewHost`](IReactViewHost) +- [`ReactCoreInjection`](ReactCoreInjection) +- [`ReactNativeWin32App`](ReactNativeWin32App) +- [`RedBoxHelper`](RedBoxHelper) + +## Old Architecture + +Kind: `class` + +This is the main entry-point to create a React instance. +The `ReactNativeHost` object exists to configure the instance using [`ReactInstanceSettings`](ReactInstanceSettings) before it is loaded, as well as enabling control of when to load the instance. +Use [`ReactInstanceSettings`](ReactInstanceSettings) events to observe instance creation, loading, and destruction. + +### Properties +#### InstanceSettings + [`ReactInstanceSettings`](ReactInstanceSettings) `InstanceSettings` + +Provides access to this host's [`ReactInstanceSettings`](ReactInstanceSettings) to configure the react instance. + +#### PackageProviders +`readonly` [`IVector`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Collections.IVector-1)<[`IReactPackageProvider`](IReactPackageProvider)> `PackageProviders` + +Provides access to the list of [`IReactPackageProvider`](IReactPackageProvider)'s that the React 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 or other shared libraries. + +### Constructors +#### ReactNativeHost + **`ReactNativeHost`**() + +### Methods +#### FromContext +`static` [`ReactNativeHost`](ReactNativeHost) **`FromContext`**([`IReactContext`](IReactContext) reactContext) + +Returns the [`ReactNativeHost`](ReactNativeHost) instance associated with the given [`IReactContext`](IReactContext). + +#### LoadInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`LoadInstance`**() + +Loads a new React instance. It is an alias for [`ReloadInstance`](#reloadinstance) method. + +#### ReloadInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`ReloadInstance`**() + +Unloads the current React instance and loads a new one. +The React instance loading creates an instance of the JavaScript engine, and launches the provided JavaScript code bundle. +If a React instance is already running in this host, then [`ReloadInstance`](#reloadinstance) shuts down the already the running React instance, and loads a new React instance. +The React instance lifecycle can be observed with the following events:- The [`ReactInstanceSettings.InstanceCreated`](ReactInstanceSettings#instancecreated) event is raised when the React instance is just created. +- The [`ReactInstanceSettings.InstanceLoaded`](ReactInstanceSettings#instanceloaded) event is raised when the React instance completed loading the JavaScript bundle. +- The [`ReactInstanceSettings.InstanceDestroyed`](ReactInstanceSettings#instancedestroyed) event is raised when the React instance is destroyed. + +#### UnloadInstance +[`IAsyncAction`](https://docs.microsoft.com/uwp/api/Windows.Foundation.IAsyncAction) **`UnloadInstance`**() + +Unloads current React instance. +After the React instance is unloaded, all the React resources including the JavaScript engine environment are cleaned up. +The React instance destruction can be observed with the [`ReactInstanceSettings.InstanceDestroyed`](ReactInstanceSettings#instancedestroyed) event. + +### Referenced by +- [`IReactViewHost`](IReactViewHost) +- [`ReactApplication`](ReactApplication) +- [`ReactCoreInjection`](ReactCoreInjection) +- [`ReactRootView`](ReactRootView) +- [`RedBoxHelper`](RedBoxHelper) diff --git a/website/versioned_docs/version-0.82/native-api/ReactNativeIsland-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactNativeIsland-api-windows.md new file mode 100644 index 000000000..5cfdb463b --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactNativeIsland-api-windows.md @@ -0,0 +1,117 @@ +--- +id: version-0.82-ReactNativeIsland +title: ReactNativeIsland +original_id: ReactNativeIsland +--- + +Kind: `class` + +> **EXPERIMENTAL** + +A windows composition component that hosts React Native UI elements. + +## Properties +### FontSizeMultiplier +`readonly` float `FontSizeMultiplier` + +> **EXPERIMENTAL** + +### Island +`readonly` [`ContentIsland`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Content.ContentIsland) `Island` + +> **EXPERIMENTAL** + +### ReactViewHost + [`IReactViewHost`](IReactViewHost) `ReactViewHost` + +> **EXPERIMENTAL** + +A ReactViewHost specifies the root UI component and initial properties to render in this RootViewIt must be set to show any React UI elements. + +### Resources + [`ICustomResourceLoader`](ICustomResourceLoader) `Resources` + +> **EXPERIMENTAL** + +Provides resources used for Platform colors within this RootView + +### RootTag +`readonly` int64_t `RootTag` + +> **EXPERIMENTAL** + +### RootVisual +`readonly` [`Visual`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Visual) `RootVisual` + +> **EXPERIMENTAL** + +The RootVisual associated with the [`ReactNativeIsland`](ReactNativeIsland). It must be set to show any React UI elements. + +### ScaleFactor + float `ScaleFactor` + +> **EXPERIMENTAL** + +ScaleFactor for this windows (DPI/96) + +### Size +`readonly` [`Size`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Size) `Size` + +> **EXPERIMENTAL** + +### Theme +`readonly` [`Theme`](Theme) `Theme` + +> **EXPERIMENTAL** + +## Constructors +### ReactNativeIsland + **`ReactNativeIsland`**([`Compositor`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Compositor) compositor) + +> **EXPERIMENTAL** + +### ReactNativeIsland + **`ReactNativeIsland`**() + +## Methods +### Arrange +void **`Arrange`**([`LayoutConstraints`](LayoutConstraints) layoutConstraints, [`Point`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Point) viewportOffset) + +> **EXPERIMENTAL** + +### CreatePortal +`static` [`ReactNativeIsland`](ReactNativeIsland) **`CreatePortal`**([`PortalComponentView`](PortalComponentView) portal) + +> **EXPERIMENTAL** + +Used to create react portals, such as a native modal component. + +### GetUiaProvider +Object **`GetUiaProvider`**() + +> **EXPERIMENTAL** + +### Measure +[`Size`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Size) **`Measure`**([`LayoutConstraints`](LayoutConstraints) layoutConstraints, [`Point`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Point) viewportOffset) + +> **EXPERIMENTAL** + +### NavigateFocus +[`FocusNavigationResult`](FocusNavigationResult) **`NavigateFocus`**([`FocusNavigationRequest`](FocusNavigationRequest) request) + +> **EXPERIMENTAL** + +Move focus to this [`ReactNativeIsland`](ReactNativeIsland) + +### SetProperties +void **`SetProperties`**([`JSValueArgWriter`](JSValueArgWriter) props) + +> **EXPERIMENTAL** + +Initial props should be set on ReactViewHost. This is used to update props after the initial props are set + +## Events +### `SizeChanged` +> **EXPERIMENTAL** + +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1)<[`RootViewSizeChangedEventArgs`](RootViewSizeChangedEventArgs)> diff --git a/website/versioned_docs/version-0.82/native-api/ReactNativeWin32App-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactNativeWin32App-api-windows.md new file mode 100644 index 000000000..441eba332 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactNativeWin32App-api-windows.md @@ -0,0 +1,36 @@ +--- +id: version-0.82-ReactNativeWin32App +title: ReactNativeWin32App +original_id: ReactNativeWin32App +--- + +Kind: `class` + +> **EXPERIMENTAL** + +ReactNativeWin32App sets up the infrastructure for the default experience of a ReactNative application filling a WinAppSDK window. + +## Properties +### AppWindow +`readonly` [`AppWindow`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Windowing.AppWindow) `AppWindow` + +> **EXPERIMENTAL** + +### ReactNativeHost +`readonly` [`ReactNativeHost`](ReactNativeHost) `ReactNativeHost` + +> **EXPERIMENTAL** + +### ReactViewOptions +`readonly` [`ReactViewOptions`](ReactViewOptions) `ReactViewOptions` + +> **EXPERIMENTAL** + +## Methods +### Start +void **`Start`**() + +> **EXPERIMENTAL** + +## Referenced by +- [`ReactNativeAppBuilder`](ReactNativeAppBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/ReactNotificationHandler-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactNotificationHandler-api-windows.md new file mode 100644 index 000000000..5ebb7a86a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactNotificationHandler-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-ReactNotificationHandler +title: ReactNotificationHandler +original_id: ReactNotificationHandler +--- + +Kind: `delegate` + +Delegate to handle notifications. +- The `sender` parameter is the object that sent the notification. It can be null. +- The `args` contain the notification-specific data and the notification subscription. + +## Invoke +void **`Invoke`**(Object sender, [`IReactNotificationArgs`](IReactNotificationArgs) args) + +## Referenced by +- [`IReactNotificationService`](IReactNotificationService) diff --git a/website/versioned_docs/version-0.82/native-api/ReactNotificationServiceHelper-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactNotificationServiceHelper-api-windows.md new file mode 100644 index 000000000..65ed1fd4a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactNotificationServiceHelper-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-ReactNotificationServiceHelper +title: ReactNotificationServiceHelper +original_id: ReactNotificationServiceHelper +--- + +Kind: `class` + +Helper methods for the [`IReactNotificationService`](IReactNotificationService) implementation. + +## Methods +### CreateNotificationService +`static` [`IReactNotificationService`](IReactNotificationService) **`CreateNotificationService`**() + +Creates a new instance of [`IReactNotificationService`](IReactNotificationService) diff --git a/website/versioned_docs/version-0.82/native-api/ReactPropertyBagHelper-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactPropertyBagHelper-api-windows.md new file mode 100644 index 000000000..1a9a9237a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactPropertyBagHelper-api-windows.md @@ -0,0 +1,35 @@ +--- +id: version-0.82-ReactPropertyBagHelper +title: ReactPropertyBagHelper +original_id: ReactPropertyBagHelper +--- + +Kind: `class` + +Helper methods for the property bag implementation. + +## Properties +### GlobalNamespace +`static` `readonly` [`IReactPropertyNamespace`](IReactPropertyNamespace) `GlobalNamespace` + +> **Deprecated**: Do not use. It will be removed in a future version. + +Deprecated. Do not use. It will be removed in a future version. + +## Methods +### CreatePropertyBag +`static` [`IReactPropertyBag`](IReactPropertyBag) **`CreatePropertyBag`**() + +Creates new instance of [`IReactPropertyBag`](IReactPropertyBag) + +### GetName +`static` [`IReactPropertyName`](IReactPropertyName) **`GetName`**([`IReactPropertyNamespace`](IReactPropertyNamespace) ns, string localName) + +Gets atomic [`IReactPropertyName`](IReactPropertyName) for the namespace `ns` and the `localName`. +**Note that passing `null` as `ns` is reserved for local values since 0.65. In previous versions it was the same as passing [`GlobalNamespace`](#globalnamespace).** + +### GetNamespace +`static` [`IReactPropertyNamespace`](IReactPropertyNamespace) **`GetNamespace`**(string namespaceName) + +Gets an atomic [`IReactPropertyNamespace`](IReactPropertyNamespace) for a provided `namespaceName`. +Consider using module name as the namespace for module-specific properties. diff --git a/website/versioned_docs/version-0.82/native-api/ReactViewComponentProvider-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactViewComponentProvider-api-windows.md new file mode 100644 index 000000000..2a804fac2 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactViewComponentProvider-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-ReactViewComponentProvider +title: ReactViewComponentProvider +original_id: ReactViewComponentProvider +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +Provides information about a custom view component. See [`IReactPackageBuilderFabric.AddViewComponent`](IReactPackageBuilderFabric#addviewcomponent) + +## Invoke +void **`Invoke`**([`IReactViewComponentBuilder`](IReactViewComponentBuilder) viewComponentBuilder) + +## Referenced by +- [`IReactPackageBuilderFabric`](IReactPackageBuilderFabric) diff --git a/website/versioned_docs/version-0.82/native-api/ReactViewOptions-api-windows.md b/website/versioned_docs/version-0.82/native-api/ReactViewOptions-api-windows.md new file mode 100644 index 000000000..8bd68d0a5 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ReactViewOptions-api-windows.md @@ -0,0 +1,70 @@ +--- +id: version-0.82-ReactViewOptions +title: ReactViewOptions +original_id: ReactViewOptions +--- + +## New Architecture + +Kind: `class` + +> **EXPERIMENTAL** + +Settings per each IReactViewHost associated with an IReactHost instance. + +### Properties +#### ComponentName + string `ComponentName` + +> **EXPERIMENTAL** + +Name of a component registered in JavaScript via AppRegistry.registerComponent('ModuleName', () => ModuleName); + +#### InitialProps + [`JSValueArgWriter`](JSValueArgWriter) `InitialProps` + +> **EXPERIMENTAL** + +Set of initial component properties. It is a JSON string. + +### Constructors +#### ReactViewOptions + **`ReactViewOptions`**() + +### Referenced by +- [`IReactViewHost`](IReactViewHost) +- [`IReactViewInstance`](IReactViewInstance) +- [`ReactCoreInjection`](ReactCoreInjection) +- [`ReactNativeWin32App`](ReactNativeWin32App) + +## Old Architecture + +Kind: `class` + +> **EXPERIMENTAL** + +Settings per each IReactViewHost associated with an IReactHost instance. + +### Properties +#### ComponentName + string `ComponentName` + +> **EXPERIMENTAL** + +Name of a component registered in JavaScript via AppRegistry.registerComponent('ModuleName', () => ModuleName); + +#### InitialProps + [`JSValueArgWriter`](JSValueArgWriter) `InitialProps` + +> **EXPERIMENTAL** + +Set of initial component properties. It is a JSON string. + +### Constructors +#### ReactViewOptions + **`ReactViewOptions`**() + +### Referenced by +- [`IReactViewHost`](IReactViewHost) +- [`IReactViewInstance`](IReactViewInstance) +- [`ReactCoreInjection`](ReactCoreInjection) diff --git a/website/versioned_docs/version-0.82/native-api/RedBoxErrorType-api-windows.md b/website/versioned_docs/version-0.82/native-api/RedBoxErrorType-api-windows.md new file mode 100644 index 000000000..745a667c5 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/RedBoxErrorType-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-RedBoxErrorType +title: RedBoxErrorType +original_id: RedBoxErrorType +--- + +Kind: `enum` + +The error type shown in the RedBox. + +| Name | Value | Description | +|--|--|--| +|`JavaScriptFatal` | 0x0 | A JS Exception was thrown and not caught, or otherwise fatal error.| +|`JavaScriptSoft` | 0x1 | An error coming from JS that isn't fatal, such as `console.error`.| +|`Native` | 0x2 | An error happened in native code.| + +## Referenced by +- [`IRedBoxHandler`](IRedBoxHandler) diff --git a/website/versioned_docs/version-0.82/native-api/RedBoxHelper-api-windows.md b/website/versioned_docs/version-0.82/native-api/RedBoxHelper-api-windows.md new file mode 100644 index 000000000..11d0f5d28 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/RedBoxHelper-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-RedBoxHelper +title: RedBoxHelper +original_id: RedBoxHelper +--- + +Kind: `class` + +A helper static class for [`IRedBoxHandler`](IRedBoxHandler). + +## Methods +### CreateDefaultHandler +`static` [`IRedBoxHandler`](IRedBoxHandler) **`CreateDefaultHandler`**([`ReactNativeHost`](ReactNativeHost) host) + +This provides access to the default [`IRedBoxHandler`](IRedBoxHandler). This can be used to display the default `RedBox` as part of a custom `RedBoxHandler` implementation. diff --git a/website/versioned_docs/version-0.82/native-api/ResourceType-api-windows.md b/website/versioned_docs/version-0.82/native-api/ResourceType-api-windows.md new file mode 100644 index 000000000..39404665f --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ResourceType-api-windows.md @@ -0,0 +1,16 @@ +--- +id: version-0.82-ResourceType +title: ResourceType +original_id: ResourceType +--- + +Kind: `enum` + +> **EXPERIMENTAL** + +| Name | Value | Description | +|--|--|--| +|`Color` | 0x0 | Resource type for a [`Color`](https://docs.microsoft.com/uwp/api/Windows.UI.Color)| + +## Referenced by +- [`ICustomResourceLoader`](ICustomResourceLoader) diff --git a/website/versioned_docs/version-0.82/native-api/RootComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/RootComponentView-api-windows.md new file mode 100644 index 000000000..1a2b78ff3 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/RootComponentView-api-windows.md @@ -0,0 +1,34 @@ +--- +id: version-0.82-RootComponentView +title: RootComponentView +original_id: RootComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** + +## Properties +### Portal +`readonly` [`PortalComponentView`](PortalComponentView) `Portal` + +> **EXPERIMENTAL** + +Is non-null if this RootComponentView is the content of a portal + +### ReactNativeIsland +`readonly` [`ReactNativeIsland`](ReactNativeIsland) `ReactNativeIsland` + +> **EXPERIMENTAL** + +## Methods +### GetFocusedComponent +[`ComponentView`](ComponentView) **`GetFocusedComponent`**() + +> **EXPERIMENTAL** + +## Referenced by +- [`ComponentView`](ComponentView) +- [`PortalComponentView`](PortalComponentView) diff --git a/website/versioned_docs/version-0.82/native-api/RootViewSizeChangedEventArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/RootViewSizeChangedEventArgs-api-windows.md new file mode 100644 index 000000000..afd7d512c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/RootViewSizeChangedEventArgs-api-windows.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-RootViewSizeChangedEventArgs +title: RootViewSizeChangedEventArgs +original_id: RootViewSizeChangedEventArgs +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Properties +### Size +`readonly` [`Size`](https://docs.microsoft.com/uwp/api/Windows.Foundation.Size) `Size` + +> **EXPERIMENTAL** + +## Referenced by +- [`ReactNativeIsland`](ReactNativeIsland) diff --git a/website/versioned_docs/version-0.82/native-api/RoutedEventArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/RoutedEventArgs-api-windows.md new file mode 100644 index 000000000..412027f23 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/RoutedEventArgs-api-windows.md @@ -0,0 +1,21 @@ +--- +id: version-0.82-RoutedEventArgs +title: RoutedEventArgs +original_id: RoutedEventArgs +--- + +Kind: `interface` + +Implemented by: +- [`GettingFocusEventArgs`](GettingFocusEventArgs) +- [`LosingFocusEventArgs`](LosingFocusEventArgs) +- [`PointerRoutedEventArgs`](PointerRoutedEventArgs) +- [`CharacterReceivedRoutedEventArgs`](CharacterReceivedRoutedEventArgs) +- [`KeyRoutedEventArgs`](KeyRoutedEventArgs) + +## Properties +### OriginalSource +`readonly` int `OriginalSource` + +## Referenced by +- [`ComponentView`](ComponentView) diff --git a/website/versioned_docs/version-0.82/native-api/ScrollViewComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/ScrollViewComponentView-api-windows.md new file mode 100644 index 000000000..ab6c695da --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ScrollViewComponentView-api-windows.md @@ -0,0 +1,11 @@ +--- +id: version-0.82-ScrollViewComponentView +title: ScrollViewComponentView +original_id: ScrollViewComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/ShadowNode-api-windows.md b/website/versioned_docs/version-0.82/native-api/ShadowNode-api-windows.md new file mode 100644 index 000000000..f236c7732 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ShadowNode-api-windows.md @@ -0,0 +1,37 @@ +--- +id: version-0.82-ShadowNode +title: ShadowNode +original_id: ShadowNode +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Properties +### EventEmitter +`readonly` [`EventEmitter`](EventEmitter) `EventEmitter` + +> **EXPERIMENTAL** + +### StateData + Object `StateData` + +> **EXPERIMENTAL** + +### Tag + Object `Tag` + +> **EXPERIMENTAL** + +## Methods +### EnsureUnsealed +void **`EnsureUnsealed`**() + +> **EXPERIMENTAL** + +## Referenced by +- [`LayoutHandler`](LayoutHandler) +- [`MeasureContentHandler`](MeasureContentHandler) +- [`ViewShadowNodeCloner`](ViewShadowNodeCloner) +- [`ViewShadowNodeFactory`](ViewShadowNodeFactory) diff --git a/website/versioned_docs/version-0.82/native-api/StateUpdateMutation-api-windows.md b/website/versioned_docs/version-0.82/native-api/StateUpdateMutation-api-windows.md new file mode 100644 index 000000000..988bb26f9 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/StateUpdateMutation-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-StateUpdateMutation +title: StateUpdateMutation +original_id: StateUpdateMutation +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +Object **`Invoke`**(Object props) + +## Referenced by +- [`IComponentState`](IComponentState) diff --git a/website/versioned_docs/version-0.82/native-api/StreamImageResponse-api-windows.md b/website/versioned_docs/version-0.82/native-api/StreamImageResponse-api-windows.md new file mode 100644 index 000000000..c250b39a1 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/StreamImageResponse-api-windows.md @@ -0,0 +1,19 @@ +--- +id: version-0.82-StreamImageResponse +title: StreamImageResponse +original_id: StreamImageResponse +--- + +Kind: `class` + +Extends: [`ImageResponse`](ImageResponse) + +> **EXPERIMENTAL** + +## Constructors +### StreamImageResponse + **`StreamImageResponse`**([`IRandomAccessStream`](https://docs.microsoft.com/uwp/api/Windows.Storage.Streams.IRandomAccessStream) stream) + +> **EXPERIMENTAL** + +Takes a stream of an image file that can be decoded by Windows Imaging Component - https://learn.microsoft.com/en-us/windows/win32/api/_wic/ diff --git a/website/versioned_docs/version-0.82/native-api/SwitchComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/SwitchComponentView-api-windows.md new file mode 100644 index 000000000..904201cc6 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/SwitchComponentView-api-windows.md @@ -0,0 +1,11 @@ +--- +id: version-0.82-SwitchComponentView +title: SwitchComponentView +original_id: SwitchComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/SyncMethodDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/SyncMethodDelegate-api-windows.md new file mode 100644 index 000000000..bc3e1b61a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/SyncMethodDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-SyncMethodDelegate +title: SyncMethodDelegate +original_id: SyncMethodDelegate +--- + +Kind: `delegate` + +A delegate to call native synchronous method. + +## Invoke +void **`Invoke`**([`IJSValueReader`](IJSValueReader) inputReader, [`IJSValueWriter`](IJSValueWriter) outputWriter) + +## Referenced by +- [`IReactModuleBuilder`](IReactModuleBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/SystemCompositionContextHelper-api-windows.md b/website/versioned_docs/version-0.82/native-api/SystemCompositionContextHelper-api-windows.md new file mode 100644 index 000000000..69e194c10 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/SystemCompositionContextHelper-api-windows.md @@ -0,0 +1,51 @@ +--- +id: version-0.82-SystemCompositionContextHelper +title: SystemCompositionContextHelper +original_id: SystemCompositionContextHelper +--- + +Kind: `class` + +> **EXPERIMENTAL** + +A helper static class to create a [`ICompositionContext`](ICompositionContext) based on Windows.Composition Visuals. This is not for general consumption and is expected to be removed in a future release. + +## Methods +### CreateContext +`static` [`ICompositionContext`](ICompositionContext) **`CreateContext`**([`Compositor`](https://docs.microsoft.com/uwp/api/Windows.UI.Composition.Compositor) compositor) + +> **EXPERIMENTAL** + +Creates a [`ICompositionContext`](ICompositionContext) from a Compositor + +### CreateVisual +`static` [`IVisual`](IVisual) **`CreateVisual`**([`Visual`](https://docs.microsoft.com/uwp/api/Windows.UI.Composition.Visual) visual) + +> **EXPERIMENTAL** + +Creates a [`IVisual`](IVisual) from a Visual + +### InnerBrush +`static` [`CompositionBrush`](https://docs.microsoft.com/uwp/api/Windows.UI.Composition.CompositionBrush) **`InnerBrush`**([`IBrush`](IBrush) brush) + +> **EXPERIMENTAL** + +### InnerCompositor +`static` [`Compositor`](https://docs.microsoft.com/uwp/api/Windows.UI.Composition.Compositor) **`InnerCompositor`**([`ICompositionContext`](ICompositionContext) context) + +> **EXPERIMENTAL** + +### InnerDropShadow +`static` [`DropShadow`](https://docs.microsoft.com/uwp/api/Windows.UI.Composition.DropShadow) **`InnerDropShadow`**([`IDropShadow`](IDropShadow) shadow) + +> **EXPERIMENTAL** + +### InnerSurface +`static` [`ICompositionSurface`](https://docs.microsoft.com/uwp/api/Windows.UI.Composition.ICompositionSurface) **`InnerSurface`**([`IDrawingSurfaceBrush`](IDrawingSurfaceBrush) surface) + +> **EXPERIMENTAL** + +### InnerVisual +`static` [`Visual`](https://docs.microsoft.com/uwp/api/Windows.UI.Composition.Visual) **`InnerVisual`**([`IVisual`](IVisual) visual) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/Theme-api-windows.md b/website/versioned_docs/version-0.82/native-api/Theme-api-windows.md new file mode 100644 index 000000000..35ec04ca2 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/Theme-api-windows.md @@ -0,0 +1,55 @@ +--- +id: version-0.82-Theme +title: Theme +original_id: Theme +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Properties +### IsEmpty +`readonly` bool `IsEmpty` + +> **EXPERIMENTAL** + +An empty theme is used when the final theme is not yet known. It will generally return transparent colors. + +## Constructors +### Theme + **`Theme`**([`IReactContext`](IReactContext) reactContext, [`ICustomResourceLoader`](ICustomResourceLoader) resourceLoader) + +> **EXPERIMENTAL** + +## Methods +### GetDefaultTheme +`static` [`Theme`](Theme) **`GetDefaultTheme`**([`IReactContext`](IReactContext) context) + +> **EXPERIMENTAL** + +### PlatformBrush +[`CompositionBrush`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.CompositionBrush) **`PlatformBrush`**(string platformColor) + +> **EXPERIMENTAL** + +### SetDefaultResources +`static` void **`SetDefaultResources`**([`ReactInstanceSettings`](ReactInstanceSettings) settings, [`ICustomResourceLoader`](ICustomResourceLoader) theme) + +> **EXPERIMENTAL** + +### TryGetPlatformColor +bool **`TryGetPlatformColor`**(string platformColor, **out** [`Color`](https://docs.microsoft.com/uwp/api/Windows.UI.Color) color) + +> **EXPERIMENTAL** + +## Events +### `ThemeChanged` +> **EXPERIMENTAL** + +Type: [`EventHandler`](https://docs.microsoft.com/uwp/api/Windows.Foundation.EventHandler-1) + +## Referenced by +- [`Color`](Color) +- [`ComponentView`](ComponentView) +- [`ReactNativeIsland`](ReactNativeIsland) diff --git a/website/versioned_docs/version-0.82/native-api/Timer-api-windows.md b/website/versioned_docs/version-0.82/native-api/Timer-api-windows.md new file mode 100644 index 000000000..e91b26936 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/Timer-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-Timer +title: Timer +original_id: Timer +--- + +Kind: `class` + +Used to create timers. + +## Methods +### Create +`static` [`ITimer`](ITimer) **`Create`**([`IReactPropertyBag`](IReactPropertyBag) properties) + +Creates a UI timer. Must be called on the UI thread. Using this rather than System/Windows.DispatcherQueue.CreateTimer works when applications have provided custom Timer implementations using [`ReactCoreInjection.SetTimerFactory`](ReactCoreInjection#settimerfactory) diff --git a/website/versioned_docs/version-0.82/native-api/TimerFactory-api-windows.md b/website/versioned_docs/version-0.82/native-api/TimerFactory-api-windows.md new file mode 100644 index 000000000..039abdf9a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/TimerFactory-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-TimerFactory +title: TimerFactory +original_id: TimerFactory +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +[`ITimer`](ITimer) **`Invoke`**() + +## Referenced by +- [`ReactCoreInjection`](ReactCoreInjection) diff --git a/website/versioned_docs/version-0.82/native-api/UIBatchCompleteCallback-api-windows.md b/website/versioned_docs/version-0.82/native-api/UIBatchCompleteCallback-api-windows.md new file mode 100644 index 000000000..8bce517d5 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UIBatchCompleteCallback-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-UIBatchCompleteCallback +title: UIBatchCompleteCallback +original_id: UIBatchCompleteCallback +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +The delegate is called when a UI batch is completed. + +## Invoke +void **`Invoke`**([`IReactPropertyBag`](IReactPropertyBag) properties) + +## Referenced by +- [`ReactCoreInjection`](ReactCoreInjection) diff --git a/website/versioned_docs/version-0.82/native-api/UnimplementedNativeViewComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/UnimplementedNativeViewComponentView-api-windows.md new file mode 100644 index 000000000..623bb9bd3 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UnimplementedNativeViewComponentView-api-windows.md @@ -0,0 +1,11 @@ +--- +id: version-0.82-UnimplementedNativeViewComponentView +title: UnimplementedNativeViewComponentView +original_id: UnimplementedNativeViewComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/UnmountChildComponentViewArgs-api-windows.md b/website/versioned_docs/version-0.82/native-api/UnmountChildComponentViewArgs-api-windows.md new file mode 100644 index 000000000..dd9d932e5 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UnmountChildComponentViewArgs-api-windows.md @@ -0,0 +1,23 @@ +--- +id: version-0.82-UnmountChildComponentViewArgs +title: UnmountChildComponentViewArgs +original_id: UnmountChildComponentViewArgs +--- + +Kind: `class` + +> **EXPERIMENTAL** + +## Properties +### Child +`readonly` [`ComponentView`](ComponentView) `Child` + +> **EXPERIMENTAL** + +### Index +`readonly` uint32_t `Index` + +> **EXPERIMENTAL** + +## Referenced by +- [`UnmountChildComponentViewDelegate`](UnmountChildComponentViewDelegate) diff --git a/website/versioned_docs/version-0.82/native-api/UnmountChildComponentViewDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/UnmountChildComponentViewDelegate-api-windows.md new file mode 100644 index 000000000..9d50bcebf --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UnmountChildComponentViewDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-UnmountChildComponentViewDelegate +title: UnmountChildComponentViewDelegate +original_id: UnmountChildComponentViewDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ComponentView`](ComponentView) source, [`UnmountChildComponentViewArgs`](UnmountChildComponentViewArgs) args) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/UpdateEventEmitterDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/UpdateEventEmitterDelegate-api-windows.md new file mode 100644 index 000000000..41c4ff053 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UpdateEventEmitterDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-UpdateEventEmitterDelegate +title: UpdateEventEmitterDelegate +original_id: UpdateEventEmitterDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ComponentView`](ComponentView) source, [`EventEmitter`](EventEmitter) eventEmitter) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/UpdateFinalizerDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/UpdateFinalizerDelegate-api-windows.md new file mode 100644 index 000000000..28df388b9 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UpdateFinalizerDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-UpdateFinalizerDelegate +title: UpdateFinalizerDelegate +original_id: UpdateFinalizerDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ComponentView`](ComponentView) source, [`ComponentViewUpdateMask`](ComponentViewUpdateMask) updateMask) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/UpdateLayoutMetricsDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/UpdateLayoutMetricsDelegate-api-windows.md new file mode 100644 index 000000000..96c1fa423 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UpdateLayoutMetricsDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-UpdateLayoutMetricsDelegate +title: UpdateLayoutMetricsDelegate +original_id: UpdateLayoutMetricsDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ComponentView`](ComponentView) source, [`LayoutMetrics`](LayoutMetrics) newLayoutMetrics, [`LayoutMetrics`](LayoutMetrics) oldLayoutMetrics) + +## Referenced by +- [`IReactCompositionViewComponentBuilder`](IReactCompositionViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/UpdatePropsDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/UpdatePropsDelegate-api-windows.md new file mode 100644 index 000000000..9e3682b7a --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UpdatePropsDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-UpdatePropsDelegate +title: UpdatePropsDelegate +original_id: UpdatePropsDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ComponentView`](ComponentView) source, [`IComponentProps`](IComponentProps) newProps, [`IComponentProps`](IComponentProps) oldProps) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/UpdateStateDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/UpdateStateDelegate-api-windows.md new file mode 100644 index 000000000..07c1c183e --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UpdateStateDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-UpdateStateDelegate +title: UpdateStateDelegate +original_id: UpdateStateDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ComponentView`](ComponentView) source, [`IComponentState`](IComponentState) newState) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/UriBrushFactory-api-windows.md b/website/versioned_docs/version-0.82/native-api/UriBrushFactory-api-windows.md new file mode 100644 index 000000000..ce1fd4711 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UriBrushFactory-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-UriBrushFactory +title: UriBrushFactory +original_id: UriBrushFactory +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +[`IBrush`](IBrush) **`Invoke`**([`IReactContext`](IReactContext) reactContext, [`ICompositionContext`](ICompositionContext) compositionContext) + +## Referenced by +- [`UriBrushFactoryImageResponse`](UriBrushFactoryImageResponse) diff --git a/website/versioned_docs/version-0.82/native-api/UriBrushFactoryImageResponse-api-windows.md b/website/versioned_docs/version-0.82/native-api/UriBrushFactoryImageResponse-api-windows.md new file mode 100644 index 000000000..9c63d805c --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/UriBrushFactoryImageResponse-api-windows.md @@ -0,0 +1,19 @@ +--- +id: version-0.82-UriBrushFactoryImageResponse +title: UriBrushFactoryImageResponse +original_id: UriBrushFactoryImageResponse +--- + +Kind: `class` + +Extends: [`ImageResponse`](ImageResponse) + +> **EXPERIMENTAL** + +This allows applications to provide their own image rendering pipeline. Or to generate graphics on the fly based on uri. + +## Constructors +### UriBrushFactoryImageResponse + **`UriBrushFactoryImageResponse`**([`UriBrushFactory`](UriBrushFactory) factory) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/ViewComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/ViewComponentView-api-windows.md new file mode 100644 index 000000000..0dbb934a6 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ViewComponentView-api-windows.md @@ -0,0 +1,20 @@ +--- +id: version-0.82-ViewComponentView +title: ViewComponentView +original_id: ViewComponentView +--- + +Kind: `class` + +Extends: [`ComponentView`](ComponentView) + +> **EXPERIMENTAL** + +## Properties +### ViewProps +`readonly` [`ViewProps`](ViewProps) `ViewProps` + +> **EXPERIMENTAL** + +## Referenced by +- [`ViewComponentViewInitializer`](ViewComponentViewInitializer) diff --git a/website/versioned_docs/version-0.82/native-api/ViewComponentViewInitializer-api-windows.md b/website/versioned_docs/version-0.82/native-api/ViewComponentViewInitializer-api-windows.md new file mode 100644 index 000000000..08734222f --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ViewComponentViewInitializer-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-ViewComponentViewInitializer +title: ViewComponentViewInitializer +original_id: ViewComponentViewInitializer +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ViewComponentView`](ViewComponentView) view) + +## Referenced by +- [`IReactCompositionViewComponentBuilder`](IReactCompositionViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/ViewProps-api-windows.md b/website/versioned_docs/version-0.82/native-api/ViewProps-api-windows.md new file mode 100644 index 000000000..10b54bac9 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ViewProps-api-windows.md @@ -0,0 +1,35 @@ +--- +id: version-0.82-ViewProps +title: ViewProps +original_id: ViewProps +--- + +Kind: `class` + +> **EXPERIMENTAL** + +Provides access to the properties on standard ViewProps. + +## Properties +### AccessibilityLabel +`readonly` string `AccessibilityLabel` + +> **EXPERIMENTAL** + +### BackgroundColor +`readonly` [`Color`](Color) `BackgroundColor` + +> **EXPERIMENTAL** + +### Opacity +`readonly` float `Opacity` + +> **EXPERIMENTAL** + +### TestId +`readonly` string `TestId` + +> **EXPERIMENTAL** + +## Referenced by +- [`ViewPropsFactory`](ViewPropsFactory) diff --git a/website/versioned_docs/version-0.82/native-api/ViewPropsFactory-api-windows.md b/website/versioned_docs/version-0.82/native-api/ViewPropsFactory-api-windows.md new file mode 100644 index 000000000..edb932089 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ViewPropsFactory-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-ViewPropsFactory +title: ViewPropsFactory +original_id: ViewPropsFactory +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +A delegate that creates a [`IComponentProps`](IComponentProps) object for an instance of [`ViewProps`](ViewProps). See [`IReactViewComponentBuilder.SetCreateProps`](IReactViewComponentBuilder#setcreateprops) + +## Invoke +[`IComponentProps`](IComponentProps) **`Invoke`**([`ViewProps`](ViewProps) props, [`IComponentProps`](IComponentProps) cloneFrom) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/ViewShadowNodeCloner-api-windows.md b/website/versioned_docs/version-0.82/native-api/ViewShadowNodeCloner-api-windows.md new file mode 100644 index 000000000..d08aa1758 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ViewShadowNodeCloner-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-ViewShadowNodeCloner +title: ViewShadowNodeCloner +original_id: ViewShadowNodeCloner +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ShadowNode`](ShadowNode) shadowNode, [`ShadowNode`](ShadowNode) sourceShadowNode) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/ViewShadowNodeFactory-api-windows.md b/website/versioned_docs/version-0.82/native-api/ViewShadowNodeFactory-api-windows.md new file mode 100644 index 000000000..34571dbd9 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/ViewShadowNodeFactory-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-ViewShadowNodeFactory +title: ViewShadowNodeFactory +original_id: ViewShadowNodeFactory +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +void **`Invoke`**([`ShadowNode`](ShadowNode) shadowNode) + +## Referenced by +- [`IReactViewComponentBuilder`](IReactViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/VisualToMountChildrenIntoDelegate-api-windows.md b/website/versioned_docs/version-0.82/native-api/VisualToMountChildrenIntoDelegate-api-windows.md new file mode 100644 index 000000000..dd925a982 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/VisualToMountChildrenIntoDelegate-api-windows.md @@ -0,0 +1,15 @@ +--- +id: version-0.82-VisualToMountChildrenIntoDelegate +title: VisualToMountChildrenIntoDelegate +original_id: VisualToMountChildrenIntoDelegate +--- + +Kind: `delegate` + +> **EXPERIMENTAL** + +## Invoke +[`Visual`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Composition.Visual) **`Invoke`**([`ComponentView`](ComponentView) view) + +## Referenced by +- [`IReactCompositionViewComponentBuilder`](IReactCompositionViewComponentBuilder) diff --git a/website/versioned_docs/version-0.82/native-api/WindowsModalHostComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/WindowsModalHostComponentView-api-windows.md new file mode 100644 index 000000000..77b56c1d6 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/WindowsModalHostComponentView-api-windows.md @@ -0,0 +1,11 @@ +--- +id: version-0.82-WindowsModalHostComponentView +title: WindowsModalHostComponentView +original_id: WindowsModalHostComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/WindowsTextInputComponentView-api-windows.md b/website/versioned_docs/version-0.82/native-api/WindowsTextInputComponentView-api-windows.md new file mode 100644 index 000000000..7817d0803 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/WindowsTextInputComponentView-api-windows.md @@ -0,0 +1,11 @@ +--- +id: version-0.82-WindowsTextInputComponentView +title: WindowsTextInputComponentView +original_id: WindowsTextInputComponentView +--- + +Kind: `class` + +Extends: [`ViewComponentView`](ViewComponentView) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/XamlUIService-api-windows.md b/website/versioned_docs/version-0.82/native-api/XamlUIService-api-windows.md new file mode 100644 index 000000000..6c243a79d --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/XamlUIService-api-windows.md @@ -0,0 +1,110 @@ +--- +id: version-0.82-XamlUIService +title: XamlUIService +original_id: XamlUIService +--- + +## New Architecture + +Kind: `class` + +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 +#### FromContext +`static` [`XamlUIService`](XamlUIService) **`FromContext`**([`IReactContext`](IReactContext) context) + +Use this method to get access to the [`XamlUIService`](XamlUIService) associated with the [`IReactContext`](IReactContext). + +#### GetAccessibleRoot +`static` [`FrameworkElement`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Xaml.FrameworkElement) **`GetAccessibleRoot`**([`IReactPropertyBag`](IReactPropertyBag) properties) + +Retrieves the default [`FrameworkElement`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.FrameworkElement) that will be used for the app for accessibility purposes (e.g. to announce). + +#### GetIslandWindowHandle +`static` uint64_t **`GetIslandWindowHandle`**([`IReactPropertyBag`](IReactPropertyBag) properties) + +Gets the window handle HWND (as an UInt64) used as the XAML Island window for the current React instance. + +#### GetXamlRoot +`static` [`XamlRoot`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Xaml.XamlRoot) **`GetXamlRoot`**([`IReactPropertyBag`](IReactPropertyBag) properties) + +Retrieves the default [`XamlRoot`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.XamlRoot) for the app. + +#### SetAccessibleRoot +`static` void **`SetAccessibleRoot`**([`IReactPropertyBag`](IReactPropertyBag) properties, [`FrameworkElement`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Xaml.FrameworkElement) accessibleRoot) + +Sets the [`FrameworkElement`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.FrameworkElement) that will act as the default accessible element for the app. The element must be able to create an automation peer (see [`FrameworkElementAutomationPeer`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Automation.Peers.FrameworkElementAutomationPeer)), or have the Landmark type property set (see [`AutomationProperties.LandmarkTypeProperty`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Automation.AutomationProperties.LandmarkTypeProperty)). +This must be manually provided to the [`ReactInstanceSettings`](ReactInstanceSettings) when using XAML Islands to have access to functionality related to accessibility. + +#### SetIslandWindowHandle +`static` void **`SetIslandWindowHandle`**([`IReactPropertyBag`](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`](IReactPropertyBag) properties, [`XamlRoot`](https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/Microsoft.UI.Xaml.XamlRoot) xamlRoot) + +Sets the [`XamlRoot`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.XamlRoot) element for the app. This must be manually provided to the [`ReactInstanceSettings`](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)](https://docs.microsoft.com/windows/apps/desktop/modernize/xaml-islands). + +## Old Architecture + +Kind: `class` + +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`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.FrameworkElement) view, string eventName, [`JSValueArgWriter`](JSValueArgWriter) eventDataArgWriter) + +Dispatches an event to a JS component. + +#### ElementFromReactTag +[`DependencyObject`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.DependencyObject) **`ElementFromReactTag`**(int64_t reactTag) + +Gets the backing XAML element from a react tag. + +#### FromContext +`static` [`XamlUIService`](XamlUIService) **`FromContext`**([`IReactContext`](IReactContext) context) + +Use this method to get access to the [`XamlUIService`](XamlUIService) associated with the [`IReactContext`](IReactContext). + +#### GetAccessibleRoot +`static` [`FrameworkElement`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.FrameworkElement) **`GetAccessibleRoot`**([`IReactPropertyBag`](IReactPropertyBag) properties) + +Retrieves the default [`FrameworkElement`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.FrameworkElement) that will be used for the app for accessibility purposes (e.g. to announce). + +#### GetIslandWindowHandle +`static` uint64_t **`GetIslandWindowHandle`**([`IReactPropertyBag`](IReactPropertyBag) properties) + +Gets the window handle HWND (as an UInt64) used as the XAML Island window for the current React instance. + +#### GetReactRootView +[`ReactRootView`](ReactRootView) **`GetReactRootView`**([`FrameworkElement`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.FrameworkElement) view) + +Gets the [`ReactRootView`](ReactRootView) view for a given element. + +#### GetXamlRoot +`static` [`XamlRoot`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.XamlRoot) **`GetXamlRoot`**([`IReactPropertyBag`](IReactPropertyBag) properties) + +Retrieves the default [`XamlRoot`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.XamlRoot) for the app. + +#### SetAccessibleRoot +`static` void **`SetAccessibleRoot`**([`IReactPropertyBag`](IReactPropertyBag) properties, [`FrameworkElement`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.FrameworkElement) accessibleRoot) + +Sets the [`FrameworkElement`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.FrameworkElement) that will act as the default accessible element for the app. The element must be able to create an automation peer (see [`FrameworkElementAutomationPeer`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Automation.Peers.FrameworkElementAutomationPeer)), or have the Landmark type property set (see [`AutomationProperties.LandmarkTypeProperty`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Automation.AutomationProperties.LandmarkTypeProperty)). +This must be manually provided to the [`ReactInstanceSettings`](ReactInstanceSettings) when using XAML Islands to have access to functionality related to accessibility. + +#### SetIslandWindowHandle +`static` void **`SetIslandWindowHandle`**([`IReactPropertyBag`](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`](IReactPropertyBag) properties, [`XamlRoot`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.XamlRoot) xamlRoot) + +Sets the [`XamlRoot`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.XamlRoot) element for the app. This must be manually provided to the [`ReactInstanceSettings`](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)](https://docs.microsoft.com/windows/apps/desktop/modernize/xaml-islands). diff --git a/website/versioned_docs/version-0.82/native-api/YogaLayoutableShadowNode-api-windows.md b/website/versioned_docs/version-0.82/native-api/YogaLayoutableShadowNode-api-windows.md new file mode 100644 index 000000000..250a3a571 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/YogaLayoutableShadowNode-api-windows.md @@ -0,0 +1,17 @@ +--- +id: version-0.82-YogaLayoutableShadowNode +title: YogaLayoutableShadowNode +original_id: YogaLayoutableShadowNode +--- + +Kind: `class` + +Extends: [`ShadowNode`](ShadowNode) + +> **EXPERIMENTAL** + +## Methods +### Layout +void **`Layout`**([`LayoutContext`](LayoutContext) layoutContext) + +> **EXPERIMENTAL** diff --git a/website/versioned_docs/version-0.82/native-api/index-api-windows.md b/website/versioned_docs/version-0.82/native-api/index-api-windows.md new file mode 100644 index 000000000..f1ad52dce --- /dev/null +++ b/website/versioned_docs/version-0.82/native-api/index-api-windows.md @@ -0,0 +1,212 @@ +--- +id: version-0.82-Native-API-Reference +title: Microsoft.ReactNative APIs +original_id: Native-API-Reference +--- + +## Classes +- [ActivityIndicatorComponentView](ActivityIndicatorComponentView) +- [CallInvoker](CallInvoker) +- [Color](Color) +- [ComponentView](ComponentView) +- [CompositionHwndHost](CompositionHwndHost) +- [CompositionUIService](CompositionUIService) +- [ContentIslandComponentView](ContentIslandComponentView) +- [CustomResourceResult](CustomResourceResult) +- [DebuggingOverlayComponentView](DebuggingOverlayComponentView) +- [EventEmitter](EventEmitter) +- [FocusManager](FocusManager) +- [FocusNavigationRequest](FocusNavigationRequest) +- [FocusNavigationResult](FocusNavigationResult) +- [GettingFocusEventArgs](GettingFocusEventArgs) +- [HandleCommandArgs](HandleCommandArgs) +- [HttpSettings](HttpSettings) +- [ImageComponentView](ImageComponentView) +- [ImageFailedResponse](ImageFailedResponse) +- [ImageProps](ImageProps) +- [ImageResponse](ImageResponse) +- [ImageSource](ImageSource) +- [InstanceCreatedEventArgs](InstanceCreatedEventArgs) +- [InstanceDestroyedEventArgs](InstanceDestroyedEventArgs) +- [InstanceLoadedEventArgs](InstanceLoadedEventArgs) +- [JsiError](JsiError) +- [JsiPreparedJavaScript](JsiPreparedJavaScript) +- [JsiRuntime](JsiRuntime) +- [LayoutContext](LayoutContext) +- [LayoutMetricsChangedArgs](LayoutMetricsChangedArgs) +- [LosingFocusEventArgs](LosingFocusEventArgs) +- [MicrosoftCompositionContextHelper](MicrosoftCompositionContextHelper) +- [MountChildComponentViewArgs](MountChildComponentViewArgs) +- [ParagraphComponentView](ParagraphComponentView) +- [Pointer](Pointer) +- [PointerPoint](PointerPoint) +- [PointerPointProperties](PointerPointProperties) +- [PointerRoutedEventArgs](PointerRoutedEventArgs) +- [PortalComponentView](PortalComponentView) +- [QuirkSettings](QuirkSettings) +- [ReactCoreInjection](ReactCoreInjection) +- [ReactDispatcherHelper](ReactDispatcherHelper) +- [ReactInstanceSettings](ReactInstanceSettings) +- [ReactNativeAppBuilder](ReactNativeAppBuilder) +- [ReactNativeHost](ReactNativeHost) +- [ReactNativeIsland](ReactNativeIsland) +- [ReactNativeWin32App](ReactNativeWin32App) +- [ReactNotificationServiceHelper](ReactNotificationServiceHelper) +- [ReactPropertyBagHelper](ReactPropertyBagHelper) +- [ReactViewOptions](ReactViewOptions) +- [RedBoxHelper](RedBoxHelper) +- [RootComponentView](RootComponentView) +- [RootViewSizeChangedEventArgs](RootViewSizeChangedEventArgs) +- [ScrollViewComponentView](ScrollViewComponentView) +- [ShadowNode](ShadowNode) +- [StreamImageResponse](StreamImageResponse) +- [SwitchComponentView](SwitchComponentView) +- [SystemCompositionContextHelper](SystemCompositionContextHelper) +- [Theme](Theme) +- [Timer](Timer) +- [UnimplementedNativeViewComponentView](UnimplementedNativeViewComponentView) +- [UnmountChildComponentViewArgs](UnmountChildComponentViewArgs) +- [UriBrushFactoryImageResponse](UriBrushFactoryImageResponse) +- [ViewComponentView](ViewComponentView) +- [ViewProps](ViewProps) +- [WindowsModalHostComponentView](WindowsModalHostComponentView) +- [WindowsTextInputComponentView](WindowsTextInputComponentView) +- [XamlUIService](XamlUIService) +- [YogaLayoutableShadowNode](YogaLayoutableShadowNode) + +## Delegates +- [CallFunc](CallFunc) +- [ComponentIslandComponentViewInitializer](ComponentIslandComponentViewInitializer) +- [ComponentViewInitializer](ComponentViewInitializer) +- [ConstantProviderDelegate](ConstantProviderDelegate) +- [CreateInternalVisualDelegate](CreateInternalVisualDelegate) +- [CreateVisualDelegate](CreateVisualDelegate) +- [EmitEventSetterDelegate](EmitEventSetterDelegate) +- [EventEmitterInitializerDelegate](EventEmitterInitializerDelegate) +- [HandleCommandDelegate](HandleCommandDelegate) +- [InitializerDelegate](InitializerDelegate) +- [InitialStateDataFactory](InitialStateDataFactory) +- [IVisualToMountChildrenIntoDelegate](IVisualToMountChildrenIntoDelegate) +- [JsiByteArrayUser](JsiByteArrayUser) +- [JsiHostFunction](JsiHostFunction) +- [JsiInitializerDelegate](JsiInitializerDelegate) +- [JSValueArgWriter](JSValueArgWriter) +- [LayoutHandler](LayoutHandler) +- [LogHandler](LogHandler) +- [MeasureContentHandler](MeasureContentHandler) +- [MethodDelegate](MethodDelegate) +- [MethodResultCallback](MethodResultCallback) +- [MountChildComponentViewDelegate](MountChildComponentViewDelegate) +- [PortalComponentViewInitializer](PortalComponentViewInitializer) +- [ReactCreatePropertyValue](ReactCreatePropertyValue) +- [ReactDispatcherCallback](ReactDispatcherCallback) +- [ReactModuleProvider](ReactModuleProvider) +- [ReactNotificationHandler](ReactNotificationHandler) +- [ReactViewComponentProvider](ReactViewComponentProvider) +- [StateUpdateMutation](StateUpdateMutation) +- [SyncMethodDelegate](SyncMethodDelegate) +- [TimerFactory](TimerFactory) +- [UIBatchCompleteCallback](UIBatchCompleteCallback) +- [UnmountChildComponentViewDelegate](UnmountChildComponentViewDelegate) +- [UpdateEventEmitterDelegate](UpdateEventEmitterDelegate) +- [UpdateFinalizerDelegate](UpdateFinalizerDelegate) +- [UpdateLayoutMetricsDelegate](UpdateLayoutMetricsDelegate) +- [UpdatePropsDelegate](UpdatePropsDelegate) +- [UpdateStateDelegate](UpdateStateDelegate) +- [UriBrushFactory](UriBrushFactory) +- [ViewComponentViewInitializer](ViewComponentViewInitializer) +- [ViewPropsFactory](ViewPropsFactory) +- [ViewShadowNodeCloner](ViewShadowNodeCloner) +- [ViewShadowNodeFactory](ViewShadowNodeFactory) +- [VisualToMountChildrenIntoDelegate](VisualToMountChildrenIntoDelegate) + +## Enums +- [AnimationClass](AnimationClass) +- [BackfaceVisibility](BackfaceVisibility) +- [BackNavigationHandlerKind](BackNavigationHandlerKind) +- [ComponentViewFeatures](ComponentViewFeatures) +- [ComponentViewUpdateMask](ComponentViewUpdateMask) +- [CompositionStretch](CompositionStretch) +- [FocusNavigationDirection](FocusNavigationDirection) +- [FocusNavigationReason](FocusNavigationReason) +- [ImageSourceType](ImageSourceType) +- [JSIEngine](JSIEngine) +- [JsiErrorType](JsiErrorType) +- [JsiValueKind](JsiValueKind) +- [JSValueType](JSValueType) +- [LayoutDirection](LayoutDirection) +- [LoadingState](LoadingState) +- [LogLevel](LogLevel) +- [MethodReturnType](MethodReturnType) +- [PointerDeviceType](PointerDeviceType) +- [PointerUpdateKind](PointerUpdateKind) +- [RedBoxErrorType](RedBoxErrorType) +- [ResourceType](ResourceType) +## Interfaces +- [CharacterReceivedRoutedEventArgs](CharacterReceivedRoutedEventArgs) +- [IActivityVisual](IActivityVisual) +- [IBrush](IBrush) +- [ICaretVisual](ICaretVisual) +- [IComponentProps](IComponentProps) +- [IComponentState](IComponentState) +- [ICompositionContext](ICompositionContext) +- [ICustomResourceLoader](ICustomResourceLoader) +- [IDrawingSurfaceBrush](IDrawingSurfaceBrush) +- [IDropShadow](IDropShadow) +- [IFocusVisual](IFocusVisual) +- [IInternalColor](IInternalColor) +- [IInternalComponentView](IInternalComponentView) +- [IInternalCompositionRootView](IInternalCompositionRootView) +- [IInternalCreateVisual](IInternalCreateVisual) +- [IInternalTheme](IInternalTheme) +- [IJsiByteBuffer](IJsiByteBuffer) +- [IJsiHostObject](IJsiHostObject) +- [IJSValueReader](IJSValueReader) +- [IJSValueWriter](IJSValueWriter) +- [IPointerPointTransform](IPointerPointTransform) +- [IPortalStateData](IPortalStateData) +- [IReactCompositionViewComponentBuilder](IReactCompositionViewComponentBuilder) +- [IReactCompositionViewComponentInternalBuilder](IReactCompositionViewComponentInternalBuilder) +- [IReactContext](IReactContext) +- [IReactDispatcher](IReactDispatcher) +- [IReactModuleBuilder](IReactModuleBuilder) +- [IReactNonAbiValue](IReactNonAbiValue) +- [IReactNotificationArgs](IReactNotificationArgs) +- [IReactNotificationService](IReactNotificationService) +- [IReactNotificationSubscription](IReactNotificationSubscription) +- [IReactPackageBuilder](IReactPackageBuilder) +- [IReactPackageBuilderFabric](IReactPackageBuilderFabric) +- [IReactPackageProvider](IReactPackageProvider) +- [IReactPropertyBag](IReactPropertyBag) +- [IReactPropertyName](IReactPropertyName) +- [IReactPropertyNamespace](IReactPropertyNamespace) +- [IReactSettingsSnapshot](IReactSettingsSnapshot) +- [IReactViewComponentBuilder](IReactViewComponentBuilder) +- [IReactViewHost](IReactViewHost) +- [IReactViewInstance](IReactViewInstance) +- [IRedBoxErrorFrameInfo](IRedBoxErrorFrameInfo) +- [IRedBoxErrorInfo](IRedBoxErrorInfo) +- [IRedBoxHandler](IRedBoxHandler) +- [IRoundedRectangleVisual](IRoundedRectangleVisual) +- [IScrollPositionChangedArgs](IScrollPositionChangedArgs) +- [IScrollVisual](IScrollVisual) +- [ISpriteVisual](ISpriteVisual) +- [ITimer](ITimer) +- [IUriImageProvider](IUriImageProvider) +- [IVisual](IVisual) +- [KeyboardSource](KeyboardSource) +- [KeyRoutedEventArgs](KeyRoutedEventArgs) +- [RoutedEventArgs](RoutedEventArgs) + +## Structs +- [DesktopWindowMessage](DesktopWindowMessage) +- [JsiBigIntRef](JsiBigIntRef) +- [JsiObjectRef](JsiObjectRef) +- [JsiPropertyIdRef](JsiPropertyIdRef) +- [JsiScopeState](JsiScopeState) +- [JsiStringRef](JsiStringRef) +- [JsiSymbolRef](JsiSymbolRef) +- [JsiValueRef](JsiValueRef) +- [JsiWeakObjectRef](JsiWeakObjectRef) +- [LayoutConstraints](LayoutConstraints) +- [LayoutMetrics](LayoutMetrics) diff --git a/website/versioned_docs/version-0.82/native-platform-components.md b/website/versioned_docs/version-0.82/native-platform-components.md new file mode 100644 index 000000000..a008310da --- /dev/null +++ b/website/versioned_docs/version-0.82/native-platform-components.md @@ -0,0 +1,415 @@ +--- +id: version-0.82-native-platform-components +title: "Native Platform: Native Components" +sidebar_label: Native Components +original_id: native-platform-components +--- + +This guide covers exposing native Windows UI to React Native by implementing a *Native Component* for the Windows platform. For a higher-level overview of native development on Windows, see [Native Platform: Overview](native-platform.md) before reading this guide. + +> **Note:** See the [reactnative.dev Native Components guide](https://reactnative.dev/docs/fabric-native-components-introduction) for steps for implementing new Native Components for both the Android and iOS platforms. + +## High-Level Overview + +In order to implement Windows support for a Native Component, you'll need to: + +1. Define the API surface for your Native Component in a TypeScript spec files +2. Use React Native for Windows' Native Codegen to take the TypeScript spec files and create the C++ headers for the Windows code +3. Write the Windows C++ code to implement the *Component View* specified by the generated headers +4. Use the Native Component in your JavaScript + +## Step by Step Guide + +### 0. Setup + +You'll need a React Native library project initialized with Windows support. + +> **Note:** The rest of this guide assumes you've followed the [Native Platform: Getting Started](native-platform-getting-started.md) guide to set up a new library project named `testlib`. + +### 1. Define the API surface in TypeScript + +The default template for a new library does not contain an example of a Native Component, so we'll need to make one. For this guide, we're going to implement a component that uses native UI code to force its child component to render within the bounds of a circle, masking out the corners. This `CircleMask` could be used to say, render a user's square account or profile image as a circle. + +First, we need to create the component's interface in a new TypeScript spec file `src\CircleMaskNativeComponent.ts`: + +```tsx +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps } from 'react-native'; + +export interface CircleMaskProps extends ViewProps {} + +export default codegenNativeComponent('CircleMask'); +``` + +This spec file declares that React Native expects every platform to implement a Native Component named `CircleMask` which supports the properties of `CircleMaskProps`. + +> **Note:** Every Native Component spec file must be named in the format ` + NativeComponent.ts` in order to be correctly identified as a spec file and not just a regular TypeScript file in your library. + +### 2. Use React Native for Windows' Native Library Codegen + +Now, before we can implement the native C++ code for our Fabric Native Component(s), we need to run React Native for Windows' Native Library Codegen, i.e. the [codegen-windows command](codegen-windows-cli.md), which will take the TypeScript spec files and generate some C++ headers with the API surface we need to implement. + +First, we need to make sure that the `codegenConfig` object is properly defined in our library's `package.json` file: + +```json +"codegenConfig": { + "name": "RNTestlibSpec", + "type": "all", + "jsSrcsDir": "src", + "outputDir": { + "ios": "ios/generated", + "android": "android/generated" + }, + "android": { + "javaPackageName": "com.testlib" + }, + "includesGeneratedCode": true, + "windows": { + "namespace": "testlibCodegen", + "generators": [ + "modulesWindows", + "componentsWindows" + ], + "outputDirectory": "windows/testlib/codegen", + "separateDataTypes": true + } + } +``` + +Configuration is partially shared with other platforms, but for Windows the relevant fields are `type`, `jsSrcsDirs`, and the `windows` object. While the default configuration was correctly set up to support the library's Native Modules, we've needed to modify it to support our need for Native Components. + +Specifically, to enable Native Component codegen, we've changed `"type: "modules"` to `"type": "all"` and we've added the `"generators": [ "modulesWindows", "componentsWindows" ]` array. + +> **Note:** For more information on configuring `codegenConfig`, see [codegen-windows Codegen Config](codegen-windows-cli.md#codegen-config). + +The only thing we need to do now is run the codegen-windows command with: + +```bat +yarn react-native codegen-windows +``` + +> **Note:** By default the `codegen-windows` command is run automatically at the start of every native build. In this way, changes to the API surface in the TypeScript spec files will be reflected in the generated headers, thereby enforcing that the native code stays up to date with the required API surface of the component. + +Now we should see some files in the project's codegen output directory, i.e. the `windows\testlib\codegen` folder we specified in our config. Codegen files for Native Components are further put under the `react\components\RNTestlibSpec` folder. Specifically, for our `CircleMask` component, we should see a rather large `CircleMask.g.h` (truncated below): + +```cpp +/* + * This file is auto-generated from CircleMaskNativeComponent spec file in flow / TypeScript. + */ +// clang-format off +#pragma once + +#include + +#ifdef RNW_NEW_ARCH +#include + +#include +#include +#endif // #ifdef It will not work with Old Architecture apps. + +#ifdef RNW_NEW_ARCH + +namespace testlibCodegen { + +REACT_STRUCT(CircleMaskProps) +struct CircleMaskProps : winrt::implements { + // Implementation truncated +}; + +struct CircleMaskEventEmitter { + // Implementation truncated +}; + +template +struct BaseCircleMask { + // Implementation truncated +}; + +template +void RegisterCircleMaskNativeComponent( + winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder, + std::function builderCallback) noexcept { + packageBuilder.as().AddViewComponent( + L"CircleMask", [builderCallback](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept { + // Implementation truncated + }); +} + +} // namespace testlibCodegen + +#endif // #ifdef RNW_NEW_ARCH +``` + +The generated code contains three native types of note: + +1. A `CircleMaskProps` struct capturing the specified props of the TypeScript `CircleMaskProps` interface +2. A `CircleMaskEventEmitter` struct so the component can fire any specified JavaScript events +3. A `BaseCircleMask` struct to be used as the base type for a `CircleMask` Fabric Component View +4. A `RegisterCircleMaskNativeComponent` function to register the `CircleMask` Fabric Component View + +Also note the use of `#ifdef RNW_NEW_ARCH` to ensure these types are only included when the library is used by New Architecture apps. + +> **Note:** For a non-truncated version of this file, see the [Native Module Sample's `CircleMask.g.h`](https://github.com/microsoft/react-native-windows-samples/blob/main/samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/codegen/react/components/NativeModuleSampleSpec/CircleMask.g.h). + +### 3. Implement the Windows C++ code + +Now with the codegen complete, it's time to implement a `CircleMaskComponentView` in Windows code. React Native for Windows Fabric Component Views are implemented in C++ and render UI using the `Microsoft::UI::Composition` APIs, also known as the [Windows App SDK/WinUI 3 Visual layer](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/composition). + +#### 3.1 Implementing the Fabric Component View + +To create our new Fabric Component View we're going to need to create two new files (for our example, `CircleMask.h` and `CircleMask.cpp` in the `windows\testlib` folder): + + + + + +```cpp +#pragma once + +#include "pch.h" + +#ifdef RNW_NEW_ARCH + +#include "codegen/react/components/RNTestlibSpec/CircleMask.g.h" + +#include + +#endif + +namespace winrt::testlib::implementation { + +void RegisterCircleMaskNativeComponent( + winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept; + +#ifdef RNW_NEW_ARCH + +struct CircleMaskComponentView : winrt::implements, + testlibCodegen::BaseCircleMask { + winrt::Microsoft::UI::Composition::Visual CreateVisual( + const winrt::Microsoft::ReactNative::ComponentView &view) noexcept override; + void Initialize(const winrt::Microsoft::ReactNative::ComponentView & /*view*/) noexcept override; + + private: + winrt::Microsoft::ReactNative::ComponentView::LayoutMetricsChanged_revoker m_layoutMetricChangedRevoker; + winrt::Microsoft::UI::Composition::SpriteVisual m_visual{nullptr}; +}; + +#endif // #ifdef RNW_NEW_ARCH + +} // namespace winrt::testlib::implementation +``` + + + +```cpp +#include "pch.h" + +#include "CircleMask.h" + +namespace winrt::testlib::implementation { + +void RegisterCircleMaskNativeComponent( + winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept { +#ifdef RNW_NEW_ARCH + testlibCodegen::RegisterCircleMaskNativeComponent( + packageBuilder, + [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) { + // Turn off default border handling, as it overrides the Clip property of the visual and doesn't render + // correctly anyway This means we would have to implement drawing our own borders (which we don't do in this + // example) + builder.SetViewFeatures( + winrt::Microsoft::ReactNative::Composition::ComponentViewFeatures::Default & + ~winrt::Microsoft::ReactNative::Composition::ComponentViewFeatures::NativeBorder); + }); +#endif +} + +#ifdef RNW_NEW_ARCH + +winrt::Microsoft::UI::Composition::Visual CircleMaskComponentView::CreateVisual( + const winrt::Microsoft::ReactNative::ComponentView &view) noexcept { + auto compositor = view.as().Compositor(); + + m_visual = compositor.CreateSpriteVisual(); + + auto ellipseGeometry = compositor.CreateEllipseGeometry(); + auto clip = compositor.CreateGeometricClip(); + clip.Geometry(ellipseGeometry); + m_visual.Clip(clip); + + return m_visual; +} + +void CircleMaskComponentView::Initialize(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept { + m_layoutMetricChangedRevoker = view.LayoutMetricsChanged( + winrt::auto_revoke, + [wkThis = get_weak()]( + const winrt::IInspectable & /*sender*/, const winrt::Microsoft::ReactNative::LayoutMetricsChangedArgs &args) { + if (auto strongThis = wkThis.get()) { + auto visual = strongThis->m_visual; + + // Turning off default border handling has the side-effect of also stopping the visual from being positioned, + // so unless that changes we have to position the visual ourselves + // See https://github.com/microsoft/react-native-windows/issues/14706 + visual.Size( + {args.NewLayoutMetrics().Frame.Width * args.NewLayoutMetrics().PointScaleFactor, + args.NewLayoutMetrics().Frame.Height * args.NewLayoutMetrics().PointScaleFactor}); + visual.Offset({ + args.NewLayoutMetrics().Frame.X * args.NewLayoutMetrics().PointScaleFactor, + args.NewLayoutMetrics().Frame.Y * args.NewLayoutMetrics().PointScaleFactor, + 0.0f, + }); + + auto ellipseGeometry = strongThis->m_visual.Clip() + .as() + .Geometry() + .as(); + winrt::Windows::Foundation::Numerics::float2 radius = { + args.NewLayoutMetrics().Frame.Width * args.NewLayoutMetrics().PointScaleFactor / 2, + args.NewLayoutMetrics().Frame.Height * args.NewLayoutMetrics().PointScaleFactor / 2}; + ellipseGeometry.Center(radius); + ellipseGeometry.Radius(radius); + } + }); +} + +#endif // #ifdef RNW_NEW_ARCH + +} // namespace winrt::testlib::implementation +``` + + + +As you can see, the `CircleMask.h` file defines two things: + +1. A `RegisterCircleMaskNativeComponent` function to register the `CircleMask` Fabric Component View with React Native +2. A `CircleMaskComponentView` struct containing the `CircleMask` Fabric Component View + +Both of these depend on the types provided in the `CircleMask.g.h` file we generated earlier. Then within `CircleMask.cpp` we have the implementation specifics for our new Native Component. Again, note the use of `#ifdef RNW_NEW_ARCH` to ensure the Fabric Component View code is only included when the library is used by New Architecture apps. + +> **Note:** For a more complete example of how to implement a `CircleMask` component for both Fabric and Paper simultaneously, see the implementation in the [Native Module Sample](https://github.com/microsoft/react-native-windows-samples/tree/main/samples/NativeModuleSample/cpp-lib) project. + +#### 3.2 Adding the Native Component's files to the native project + +Since we've created some new native files (`CircleMask.h` and `CircleMask.cpp` above), we need to make sure they are included in the native Windows project (`windows\testlib\testlib.vcxproj` and `windows\testlib\testlib.vcxproj.filters` in our example) so that they are included in the native build: + + + + + +```diff + + ++ + + ReactPackageProvider.idl + + + + + + + ++ + + Create + + + ReactPackageProvider.idl + + + +``` + + + +```diff + + + Header Files + + + Header Files + + + Header Files + ++ ++ Header Files ++ + + Header Files + + + + + Source Files + ++ ++ Source Files ++ + + Source Files + + +``` + + + +> **Note:** All of the the headers created by codegen in the `windows/testlib/codegen` folder are already included and do not need to be added manually here. + +#### 3.3 Registering the Fabric Component View with the React Package Provider + +Every React Native for Windows library contains an [`IReactPackageProvider`](native-api/IReactPackageProvider-api-windows.md) which contains all of the library's Native Modules (and/or Components) so React Native can use them at runtime. The final bit of native work we need is to update `ReactPackageProvider::CreatePackage` in `windows\testlib\ReactPackageProvider.cpp`: + +```cpp +#include "pch.h" + +#include "ReactPackageProvider.h" +#if __has_include("ReactPackageProvider.g.cpp") +#include "ReactPackageProvider.g.cpp" +#endif + +#include "testlib.h" + +#include "CircleMask.h" + +using namespace winrt::Microsoft::ReactNative; + +namespace winrt::testlib::implementation { + +void ReactPackageProvider::CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept { + AddAttributedModules(packageBuilder, true); + RegisterCircleMaskNativeComponent(packageBuilder); +} + +} // namespace winrt::testlib::implementation +``` + +The key bit here is adding the `#include "CircleMask.h"` include and adding the call to the `RegisterCircleMaskNativeComponent` function we created earlier. This makes sure the new Native Component is included in the library's package. + +### 4. Use the Native Component in your JavaScript + +Now, if we go back to the `CircleMaskNativeComponent.ts` TypeScript spec file, we'll see that exports the `CircleMaskProps` interface as well as the Native Component. The next step is to use those exported items in our JavaScript code. + +Since the purpose of the library is to expose the native functionality to code outside of the library (aka our React Native for Windows app code), the default is to export the functionality in the project's index, in this case, in `src\index.tsx`: + +```tsx +import Testlib from './NativeTestlib'; + +export function multiply(a: number, b: number): number { + return Testlib.multiply(a, b); +} + +export {default as CircleMask} from './CircleMaskNativeComponent'; +export * from './CircleMaskNativeComponent'; +``` + +We can see then, that `testlib` JavaScript module simply exports our new Native Component as `CircleMask` and everything else as-is from the `CircleMaskNativeComponent` module. + +> **Note:** Libraries are not required to expose any of their Native Components *directly* to their consumers. This sample just illustrates the simplest case of exporting the `CircleMask` Native Component as-is. Libraries can and often do wrap their Native Components within JavaScript ones, and therefore may provide a wholly different API surface to their customers. + +## Next Steps + +After you've implemented your native library, the final step is to consume it in your React Native for Windows app. Continue with [Native Platform: Using Native Libraries](native-platform-using.md). diff --git a/website/versioned_docs/version-0.82/native-platform-getting-started.md b/website/versioned_docs/version-0.82/native-platform-getting-started.md new file mode 100644 index 000000000..f320703ee --- /dev/null +++ b/website/versioned_docs/version-0.82/native-platform-getting-started.md @@ -0,0 +1,90 @@ +--- +id: version-0.82-native-platform-getting-started +title: Native Platform: Getting Started +sidebar_label: Getting Started +original_id: native-platform-getting-started +--- + +Similar to how the [Getting Started for Windows](getting-started.md) guide takes you through the process of creating a base React Native *app* (which supports iOS and Android), and then adding Windows support, this guide will take you through the steps of creating a base React Native *library*, and then adding Windows support. + +Before you get started, make sure you have installed all of the [development dependencies](rnw-dependencies.md). + +> **Note:** There have always been multiple ways to create base React Native libraries, each creating a slightly different setup. This guide uses the `create-react-native-library` tool (with specific options) to start a brand new library, because that is the specific setup tested by the React Native for Windows team. Your experience may differ when attempting to add Windows support to (existing) libraries created by other tools. + +## Create a new React Native library project + +Call the following from the place where you want your project directory to live: + + + + + + + + +```bat +npx --yes create-react-native-library@0.48.9 --react-native-version "^0.82.0" +``` + +> **Note:** Replace `` with the name of your library. The rest of this guide will assume you named your project `testlib`. + +You'll then be prompted for more information about the library you're trying to create (though you can also specify the answers at the command-line). Most are self-explanatory, but for this guide, you'll want to choose: + +| Option | Value | CLI Argument | +|:-------|:-------|:-------------| +| Package Name | testlib | `--slug testlib` | +| Library Type | Turbo module | `--type turbo-module` | +| Languages | Kotlin & Objective-C | `--languages kotlin-objc` | + +> **Note:** For more information on all of the available options, see [create-react-native-library's documentation](https://callstack.github.io/react-native-builder-bob). + +### Navigate into this newly created directory + +The command will create your project in a new sub-directory, which you must enter before continuing: + +```bat +cd +``` + +### Add React Native for Windows to your project's node dependencies + + + + + + +Next you'll want to add `react-native-windows` as a dependency: + +```bat +yarn add react-native-windows@^0.82.0 --dev +yarn add react-native-windows@* --peer +yarn install +``` + +### Initialize the React Native for Windows native code and projects + +Lastly, initialize the React Native for Windows library with the [init-windows command](init-windows-cli.md) and the `cpp-lib` template: + +```bat +npx react-native init-windows --template cpp-lib --overwrite +``` + +> **Note:** The command will not only initialize the Windows code for the library project itself, but it will also initialize the Windows code for the example app created by `create-react-native-library` in the `example` folder. + +## Running the React Native for Windows example app + +If you followed this guide and added Windows support to the base project created by `create-react-native-library`, you should be able to launch the provided `example` app with the [run-windows command](run-windows-cli.md): + +```bat +yarn react-native run-windows +``` + +> **Note:** For our `example` app, you can either run the given command from within the `example` folder, or run `yarn example react-native run-windows` directly from the library's root folder. + +## Next Steps + +After you've initialized a new project to support Windows, your next step is to implement that Windows support in native code. + +If you're implementing a Native Module (i.e. exposing non-UI native code), continue with [Native Platform: Native Modules](native-platform-modules.md). + +If you're implementing a Native Component (i.e. exposing native Windows UI), continue with [Native Platform: Native Components](native-platform-components.md). diff --git a/website/versioned_docs/version-0.82/native-platform-modules.md b/website/versioned_docs/version-0.82/native-platform-modules.md new file mode 100644 index 000000000..f3cb6d533 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-platform-modules.md @@ -0,0 +1,337 @@ +--- +id: version-0.82-native-platform-modules +title: "Native Platform: Native Modules" +sidebar_label: Native Modules +original_id: native-platform-modules +--- + +This guide covers exposing non-UI native functionality from Windows to React Native by implementing a *Native Module* for the Windows platform. For a higher-level overview of native development on Windows, see [Native Platform: Overview](native-platform.md) before reading this guide. + +> **Architecture Note:** This guide follows the recommendation to create a *Turbo Native Module* to support React Native's New Architecture. However, unlike other platforms, React Native for Windows directly supports Turbo Native Modules for the Old Architecture as well. In short, the Turbo Native Module we create here can be consumed by React Native for Windows apps targeting either architecture. For more information on React Native architectures in React Native for Windows, see [New vs. Old Architecture](new-architecture.md). + +> **Note:** See the [reactnative.dev Native Modules guide](https://reactnative.dev/docs/turbo-native-modules-introduction) for steps for implementing new Native Modules for both the Android and iOS platforms. + +## High-Level Overview + +In order to implement Windows support for a Native Module, you'll need to: + +1. Define the API surface for your Native Module in a TypeScript spec file +2. Use React Native for Windows' Native Library Codegen to take the TypeScript spec files and create the C++ headers for the Windows code +3. Write the Windows C++ code to implement the functions specified in the generated headers +4. Use the Native Module in your JavaScript + +## Step by Step Guide + +### 0. Setup + +You'll need a React Native library project initialized with Windows support. + +> **Note:** The rest of this guide assumes you've followed the [Native Platform: Getting Started](native-platform-getting-started.md) guide to set up a new library project named `testlib`. + +### 1. Define the API surface in TypeScript + +The default template for a new library starts with a simple Turbo Native Module based on the name of the project, i.e. our `testlib` project contains a `TestLib` module, whose API surface is defined in `src\NativeTestlib.ts`: + +```ts +import type { TurboModule } from 'react-native'; +import { TurboModuleRegistry } from 'react-native'; + +export interface Spec extends TurboModule { + multiply(a: number, b: number): number; +} + +export default TurboModuleRegistry.getEnforcing('Testlib'); +``` + +This spec file declares that React Native expects every platform to implement a Turbo Native Module named `Testlib` which implements a single function named `multiply` with the given arguments and return type. + +> **Note:** Every Native Module spec file must be named in the format `Native + .ts` in order to be correctly identified as a spec file and not just a regular TypeScript file in your library. + + + +### 2. Use React Native for Windows' Native Library Codegen + +Now, before we can implement the native C++ code for our Turbo Native Module(s), we need to run React Native for Windows' Native Library Codegen, i.e. the [codegen-windows command](codegen-windows-cli.md), which will take the TypeScript spec files and generate some C++ headers with the API surface we need to implement. + +First, we need to make sure that the `codegenConfig` object is properly defined in our library's `package.json` file: + +```json +"codegenConfig": { + "name": "RNTestlibSpec", + "type": "modules", + "jsSrcsDir": "src", + "outputDir": { + "ios": "ios/generated", + "android": "android/generated" + }, + "android": { + "javaPackageName": "com.testlib" + }, + "includesGeneratedCode": true, + "windows": { + "namespace": "testlibCodegen", + "outputDirectory": "windows/testlib/codegen", + "separateDataTypes": true + } + } +``` + +Configuration is partially shared with other platforms, but for Windows the relevant fields are `type`, `jsSrcsDirs`, and the `windows` object. For now we're going to leave the configuration as-is, as it is already set up to support our `Testlib` module. + +> **Note:** For more information on configuring `codegenConfig`, see [codegen-windows Codegen Config](codegen-windows-cli.md#codegen-config). + +The only thing we need to do now is run the codegen-windows command with: + +```bat +yarn react-native codegen-windows +``` + +> **Note:** By default the `codegen-windows` command is run automatically at the start of every native build. In this way, changes to the API surface in the TypeScript spec files will be reflected in the generated headers, thereby enforcing that the native code stays up to date with the required API surface of the module. + +Now we should see some files in the project's codegen output directory, i.e. the `windows\testlib\codegen` folder we specified in our config. Specifically, for our `Testlib` module, we should see a `NativeTestlibSpec.g.h` with: + +```cpp +/* + * This file is auto-generated from a NativeModule spec file in js. + * + * This is a C++ Spec class that should be used with MakeTurboModuleProvider to register native modules + * in a way that also verifies at compile time that the native module matches the interface required + * by the TurboModule JS spec. + */ +#pragma once +// clang-format off + + +#include +#include + +namespace testlibCodegen { + +struct TestlibSpec : winrt::Microsoft::ReactNative::TurboModuleSpec { + static constexpr auto methods = std::tuple{ + SyncMethod{0, L"multiply"}, + }; + + template + static constexpr void ValidateModule() noexcept { + constexpr auto methodCheckResults = CheckMethods(); + + REACT_SHOW_METHOD_SPEC_ERRORS( + 0, + "multiply", + " REACT_SYNC_METHOD(multiply) double multiply(double a, double b) noexcept { /* implementation */ }\n" + " REACT_SYNC_METHOD(multiply) static double multiply(double a, double b) noexcept { /* implementation */ }\n"); + } +}; + +} // namespace testlibCodegen +``` + +The purpose of the `TestlibSpec` type in this file, when included in our native C++ project, is to throw errors if our native C++ implementation does not match the required API surface of the module. + + + +### 3. Implement the Windows C++ code + +Now with the codegen complete, it's finally time to implement the `Testlib` module and its `multiply()` function. + +#### 3.1 Implementing the Turbo Native Module + +Conveniently our new project already includes implementations we can look at (for our example, the `testlib.h` and `testlib.cpp` in the `windows\testlib` folder): + + + + + +```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 +``` + + + +As you can see, the `testlib.h` file defines a `Testlib` struct, attributed with `REACT_MODULE` to signify to React Native for Windows that this struct contains the implementation of the Turbo Native Module named `Testlib`. + +The `using ModuleSpec = testlibCodegen::TestlibSpec;` line is what makes sure that the `Testlib` struct will fail to compile if it doesn't meet the required API surface of the module. + +> **Note:** When adding Windows support to native modules with out-of-date (or missing) spec files, removing this line will allow your native code to compile even if it doesn't match what the JavaScript side of the library expects. While possible, this is not recommended as it risks the Windows implementation of the module getting out of sync with the other platforms. + +The `Initialize()` function is attributed with `REACT_INIT`, indicating it should be run when the module is first created. Looking at the implementation in `testlib.cpp` we see it saves off a [`ReactContext`](native-api/IReactContext-api-windows.md), which your module can later use to interact back with the JavaScript side of your code (i.e. firing JavaScript events during a native operation). + +Finally, we also see the `multiply()` function is attributed with `REACT_SYNC_METHOD`, indicating both that the function is part of the module's API surface,and that the function is synchronous. Looking at the implementation in `testlib.cpp` we see it does what we'd expect, multiplying the input parameters and returning the result. + + + +#### 3.2 Adding the Turbo Native Modules's files to the native project + +By default the native Windows project (`windows\testlib\testlib.vcxproj` and `windows\testlib\testlib.vcxproj.filters` in our example) already includes the `testlib.h` and `testlib.cpp` files. But if you create new files for your module, you'll need to add those to the native Windows project manually: + + + + + +```diff + + ++ + + ReactPackageProvider.idl + + + + + + + ++ + + Create + + + ReactPackageProvider.idl + + + +``` + + + +```diff + + + Header Files + + + Header Files + + + Header Files + ++ ++ Header Files ++ + + Header Files + + + + + Source Files + ++ ++ Source Files ++ + + Source Files + + +``` + + + +> **Note:** All of the the headers created by codegen in the `windows/testlib/codegen` folder are already included and do not need to be added manually here. + +#### 3.3 Registering the Turbo Native Module with the React Package Provider + +Every React Native for Windows library contains an [`IReactPackageProvider`](native-api/IReactPackageProvider-api-windows.md) which contains all of the library's Native Modules (and/or Components) so React Native can use them at runtime. + +The final bit of native work we need is to make sure `ReactPackageProvider::CreatePackage` adds all of the attributed modules in `windows\testlib\ReactPackageProvider.cpp`: + +```cpp +#include "pch.h" + +#include "ReactPackageProvider.h" +#if __has_include("ReactPackageProvider.g.cpp") +#include "ReactPackageProvider.g.cpp" +#endif + +#include "testlib.h" + +using namespace winrt::Microsoft::ReactNative; + +namespace winrt::testlib::implementation { + +void ReactPackageProvider::CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept { + AddAttributedModules(packageBuilder, true); +} + +} // namespace winrt::testlib::implementation +``` + +Conveniently our new project already includes the code to include our `Testlib` Turbo Native Module. + +The key bit here is the `#include "testlib.h"` include and the call to the `AddAttributedModules` function. This call makes sure that every Turbo Native Module (i.e. every struct attributed with `REACT_MODULE`), from every included header file, gets included in the library's package. + +### 4. Use the Native Module in your JavaScript + +Now, if we go back to the `NativeTestlib.ts` TypeScript spec file, we'll see that exports a type that is the Turbo Native Module named `Testlib` with an interface matching `Spec`. The next step is to use that exported object in our JavaScript code. + +Since the purpose of the library is to expose the native functionality to code outside of the library (aka our React Native for Windows app code), the default is to export the functionality in the project's index, in this case, in `src\index.tsx`: + +```tsx +import Testlib from './NativeTestlib'; + +export function multiply(a: number, b: number): number { + return Testlib.multiply(a, b); +} +``` + +We can see then, that the `testlib` JavaScript module exports a `multiply()` function which internally calls the `Testlib.multiply()` function. + +> **Note:** Libraries are not required to expose any of their Native Module functions directly to their consumers. This sample just illustrates the simplest case of a pass-through call to the Native Module function. Libraries can and often do wrap their Native Modules within JavaScript ones, and therefore may provide a wholly different API surface to their customers. + +## Next Steps + +After you've implemented your native library, the final step is to consume it in your React Native for Windows app. Continue with [Native Platform: Using Native Libraries](native-platform-using.md). diff --git a/website/versioned_docs/version-0.82/native-platform-using.md b/website/versioned_docs/version-0.82/native-platform-using.md new file mode 100644 index 000000000..ec70ec726 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-platform-using.md @@ -0,0 +1,210 @@ +--- +id: version-0.82-native-platform-using +title: "Native Platform: Using Native Libraries" +sidebar_label: Using Native Libraries +original_id: native-platform-using +--- + +This guide covers how to consume Native Modules (and/or Components) from a native library in a React Native for Windows app. For a higher-level overview of developing native, see [Native Platform: Overview](native-platform.md) before reading this guide. + +> **Note:** The instructions below are generalized and should work with most native libraries, however specific libraries may have their own instructions and/or additional installation steps. + +## High-Level Overview + +In order to use a native library in a React Native for Windows app, you'll need to: + +1. Add the native library package as a Node.js dependency to the app +2. Use React Native for Windows' Native Module Autolinking to connect the library's Windows project to the app's Windows project +3. Call the native library's API surface from within the app's JavaScript code + +## Step by Step Guide + +### 0. Setup + +You'll need a React Native library project with Windows support initialized and implemented. + +> **Note:** The rest of this guide assumes you've at least followed the [Native Platform: Native Modules](native-platform-modules.md) guide to create and implement a new library project named `testlib`, and you're going to consume it via the provided app in its `example` folder. + +### 1. Add the native library package as a Node.js dependency to the app + +The first thing you'll need to do is add the native library's Node.js package as a dependency of your React Native app if it isn't already: + +```bat +yarn add testlib +``` + +> **Note:** While this is the standard way of adding the library package as a dependency of your app (especially if you publish the library to, and are consuming it from, a NPM feed) this is *not* how the provided `example` app consumes the library. The `example` app instead uses a custom entry in the `dependencies` object of its `react-native.config.js` configuration. + +### 2. Use React Native for Windows' Native Module Autolinking + +Now, before we can successfully consume the native library in our React Native for Windows app we need to run React Native for Windows' autolinking, i.e. the [autolink-windows command](autolink-windows-cli.md), at least once, to properly connect the library's native Windows projects to our app's native Windows project: + +```bat +yarn react-native autolink-windows +``` + +> **Note:** For our `example` app, you can either run the given command from within the `example` folder, or run `yarn example react-native autolink-windows` directly from the library's root folder. + +The command will (re-)generate several native files under the app's `windows` folder, (for the `example` app, under `example\windows\testLibExample`), including: + + + + + +```xml + + + + + + + {4AA0750A-2B4A-4DE1-BD39-B65A83AADE6B} + + + +``` + + + +```cpp +// AutolinkedNativeModules.g.cpp contents generated by "npx @react-native-community/cli autolink-windows" +// clang-format off +#include "pch.h" +#include "AutolinkedNativeModules.g.h" + +// Includes from testlib +#include + +namespace winrt::Microsoft::ReactNative +{ + +void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector const& packageProviders) +{ + // IReactPackageProviders from testlib + packageProviders.Append(winrt::testlib::ReactPackageProvider()); +} + +} +``` + + + +```xml + + + + + + +``` + + + +```cpp +// AutolinkedNativeModules.g.h contents generated by "npx @react-native-community/cli autolink-windows" +// clang-format off +#pragma once + +namespace winrt::Microsoft::ReactNative +{ + +void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector const& packageProviders); + +} +``` + + + +> **Note:** The generated files include the necessary setup to connect *all* of the native libraries to the React Native for Windows app. + +The `AutolinkedNativeModules.g.targets` (and `AutolinkedNativeModules.g.props`) files contain the build configuration such that the native Windows app project depends on each native Windows library project. + +The `AutolinkedNativeModules.g.cpp` (and `AutolinkedNativeModules.g.h`) files define a function which returns the list containing each library's [`IReactPackageProvider`](native-api/IReactPackageProvider-api-windows.md) (which in turn contains each library's Native Modules and/or Components), so that these libraries can be added to React Native's list of registered packages at runtime. + +> **Note:** By default, the usual [run-windows command](run-windows-cli.md) will also automatically run autolinking before building a React Native for Windows app. + +### 3. Call the native library's API surface + +With the native library properly connected to the React Native for Windows app, the app's JavaScript should now be able to call the library's JavaScript APIs at runtime and expect the native functionality to be available. That is, each time the library's JavaScript needs to access its Native Modules (and/or Components), they will already be ready and registered on the native side. + +#### 3.1 Use a Native Module's API + +If your library implements and exports any APIs which use Native Modules, you can import and call them from your JavaScript. + +For our `example` app, we can see the library's `multiply` function being imported and used in `example\src\App.tsx`: + +```tsx +import { Text, View, StyleSheet } from 'react-native'; +import { multiply } from 'testlib'; + +const result = multiply(3, 7); + +export default function App() { + return ( + + Result: {result} + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, +}); +``` + +#### 3.2 Use a Native Component + +If your library implements and exports any components which use Native Components, you can also import and use them from your JavaScript. + +For our `example` app, if you followed the [Native Platform: Native Components](native-platform-components.md) guide, we can see the library's `CircleMask` component being imported and used in this `example\src\App.tsx`: + +```tsx +import { Text, View, StyleSheet } from 'react-native'; +import { multiply, CircleMask } from 'testlib'; + +const result = multiply(3, 7); + +export default function App() { + return ( + + + + Result: {result} + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, +}); +``` + +> **Note:** The default `example` app provided is a New Architecture app and cannot be used to test Paper Native Components. + +#### 3.3 Verifying the functionality + +To verify the functionality works end-to-end, you should be able to launch the provided `example` app with the [run-windows command](run-windows-cli.md): + +```bat +yarn react-native run-windows +``` + +> **Note:** For our `example` app, you can either run the given command from within the `example` folder, or run `yarn example react-native run-windows` directly from the library's root folder. diff --git a/website/versioned_docs/version-0.82/native-platform.md b/website/versioned_docs/version-0.82/native-platform.md new file mode 100644 index 000000000..f435c1320 --- /dev/null +++ b/website/versioned_docs/version-0.82/native-platform.md @@ -0,0 +1,36 @@ +--- +id: version-0.82-native-platform +title: "Native Platform: Overview" +sidebar_label: Overview +original_id: native-platform +--- + +Sometimes a React Native app needs to access native functionality that isn't already exposed via `react-native` or an existing community library. Whether it's to access a platform API or some other custom native code, React Native was designed to be extensible, making it possible for anyone to write native code and expose that functionality to their app's JavaScript. + +The [reactnative.dev Native Platform guide](https://reactnative.dev/docs/native-platform) defines *Native Modules* as native libraries for accessing non-UI native code, and *Native Components* for accessing native platform views. That guide includes steps for implementing new Native Modules (and/or Components) for both the Android and iOS platforms. This guide will cover how to implement new Native Modules (and/or Components) for the Windows platform. + +> **Architecture Note:** The React Native guide recommends creating *Turbo Native Modules* and/or *Fabric Native Components* to support React Native's New Architecture, rather than using the legacy APIs made for the Old Architecture. This guide will detail how to create a single library which supports both architectures on Windows. For more information on React Native architectures in React Native for Windows, see [New vs. Old Architecture](new-architecture.md). + +## Getting Started + +Your first step to implement a new Native Module (and/or Component) is to create a new base native library and initialize React Native for Windows support. See [Native Platform: Getting Started](native-platform-getting-started.md). + +## Implementing Windows Support + +After you've initialized a new project to support Windows, your next step is to implement that Windows support in native code. + +If you're implementing a Native Module (i.e. exposing non-UI native code), continue with [Native Platform: Native Modules](native-platform-modules.md). + +If you're implementing a Native Component (i.e. exposing native Windows UI), continue with [Native Platform: Native Components](native-platform-components.md). + +## Using Native Libraries on Windows + +After you've implemented your native library, the final step is to consume it in your React Native for Windows app. Continue with [Native Platform: Using Native Libraries](native-platform-using.md). + +## Native Module Sample + +The [Native Module Sample](https://github.com/microsoft/react-native-windows-samples/tree/main/samples/NativeModuleSample/cpp-lib) project is a complete React Native for Windows library that contains: + +* Several Native Modules examples +* A Native Component example with implementations for both Paper and Fabric +* Both New and Old Architecture example apps diff --git a/website/versioned_docs/version-0.82/new-arch-missingProps.md b/website/versioned_docs/version-0.82/new-arch-missingProps.md new file mode 100644 index 000000000..43b08d3b1 --- /dev/null +++ b/website/versioned_docs/version-0.82/new-arch-missingProps.md @@ -0,0 +1,23 @@ +--- +id: version-0.82-new-arch-missingProps +title: Missing Properties +original_id: new-arch-missingProps +--- + +> **New Architecture Only:** This page lists properties that are not yet implemented in the New Architecture. If you depend on one of these properties and would like to prioritize its implementation, please open an issue here: [RNW GitHub link](https://github.com/microsoft/react-native-windows/issues). + +## Missing Props List + +### `overflow` + +| type | default | +|:--|:--| +| enum('visible', 'hidden') | 'visible' | + +### `keyboardType` + +Determines which keyboard to open, e.g.numeric + +| type | required | +|:--|:--| +| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') | No | diff --git a/website/versioned_docs/version-0.82/new-architecture.md b/website/versioned_docs/version-0.82/new-architecture.md new file mode 100644 index 000000000..4590529f8 --- /dev/null +++ b/website/versioned_docs/version-0.82/new-architecture.md @@ -0,0 +1,183 @@ +--- +id: version-0.82-new-architecture +title: New vs. Old Architecture +original_id: new-architecture +--- + +React Native's [New Architecture](https://reactnative.dev/architecture/landing-page) brings many framework improvements including the advanced [Fabric](https://reactnative.dev/architecture/fabric-renderer) rendering system. It greatly improves the speed and responsiveness of React Native apps over the previous *Legacy* or *Old Architecture* and its *Paper* renderer. The New Architecture was enabled by default for the *iOS* and *Android* platforms in [react-native@0.76.0](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here). + +React Native for Windows also supports the New Architecture for the *Windows* platform. It was first available as an opt-in preview in [react-native-windows@0.76.0](https://devblogs.microsoft.com/react-native/2025-01-29-new-architecture-on-0-76-0-77/) and became the default for *new* app projects in `react-native-windows@0.80.0`. For more information on the differences between the architectures on Windows, see [New vs. Old Architecture Differences](#new-vs-old-architecture-differences). + +> **Important:** Nearly all future investments to React Native (and React Native for Windows) will be toward the New Architecture, and we highly recommend that all projects migrate as soon as possible. React Native (and therefore React Native for Windows) deprecated the Old Architecture as of [react-native@0.82.0](https://reactnative.dev/blog/2025/10/08/react-native-0.82#new-architecture-only). + +Unfortunately, React Native for Windows does not support simply "enabling" the New Architecture for existing projects, nor easily switching between the two architectures with a simple setting. Developers must choose their target architecture by selecting the appropriate template (New or Old) when initializing their native Windows app project. For more details, see [Choosing the React Native Architecture on Windows](#choosing-the-react-native-architecture-on-windows) below. + +Furthermore, we also acknowledge that the React Native for Windows New Architecture experience is not yet at 100% feature parity with its Old Architecture experience, nor at 100% parity with the upstream platforms. While we encourage all developers to try the New Architecture (and help us find the gaps), it remains possible to keep existing apps (and/or create new ones) on the Old Architecture for the time being. + +For more information on the feature parity and known issues, see [New Architecture Feature Parity](#new-architecture-feature-parity). + +For answers to common questions, see the [FAQ](#faq). + +## New vs. Old Architecture Differences + +### Better Cross-Platform Alignment + +In moving to the New Architecture, React Native consolidated several responsibilities away from the individual platforms into a shared core of cross-platform native code, particularly with the Fabric render. React Native for Windows also uses this shared code in the New Architecture. + +This change means that React Native for Windows New Architecture applications should behave more like the other React Native platforms at runtime. + +### Better Developer Experience + +React Native for Windows publishes both source packages to [NPM](https://www.npmjs.com/package/react-native-windows) and as pre-built native binary packages on [NuGet](https://www.nuget.org/packages/Microsoft.ReactNative/). While consuming the pre-built binaries was an experimental feature for the Old Architecture, it is the default supported option for all New Architecture projects. + +This change means reduced dev machine requirements, including drastically improved build times (up to 5x faster) and reduced disk usage (up to 75% less space needed). + +### From UWP to Windows App SDK + +On Windows, the implementation of the (Old Architecture) Paper renderer used the [Universal Windows Platform](https://learn.microsoft.com/en-us/windows/uwp/) (or UWP). To meet the requirements of the new Fabric renderer, the Windows implementation now uses the modern [Windows App SDK](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/). This evolution allowed us to utilize the upstream React Native cross-platform rendering logic while also enabling us to better implement the Windows-specific platform code. + +This change means that React Native for Windows New Architecture applications are now Win32, Windows App SDK applications. This aligns with the current recommendations for Windows application development, providing React Native for Windows developers with greater access to the latest Windows' frameworks. All React Native for Windows Old Architecture applications will continue to target UWP. + +### From UWP XAML to the Window App SDK Visual Layer + +On Windows, React Native host components (that is, React Native components that are directly backed by native UI) were implemented with [UWP XAML](https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/xaml-overview) controls in the Old Architecture. + +For the New Architecture, rather than moving to [Windows App SDK's WinUI 3](https://learn.microsoft.com/en-us/windows/apps/winui/winui3/) (the direct successor to UWP XAML), we instead implemented host components using [Windows App SDK's Visual Layer](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/composition) (commonly known as "Composition" or the "Windows App SDK Scene Graph"). + +This change makes it easier for React Native for Windows to implement expected behavior of React Native UI without having to work around how XAML behaves. + +## Choosing the React Native Architecture on Windows + +Developers choose the React Native Architecture (New or Old) for their Windows application when (re-)initializing Windows platform support for their project. This choice is determined by the `--template` argument when running the [init-windows command](init-windows-cli.md). + +Starting with `react-native-windows@0.80.0`, calling `init-windows` for the *first time* in an application project (as seen in the [Getting Started](getting-started.md) guide) will default to using the New Architecture template if none is specified. If you re-run `init-windows` on a project without specifying a template, the command will default to the previously used template. See [Default Options and Re-initializing Projects](init-windows-cli.md#default-options-and-re-initializing-projects) for more details. + +> **Note:** The choice described here only applies for your project's Windows build and is independent of the choice you make for other React Native platforms, i.e. your Android and iOS builds can target a different architecture than your Windows build. + +### Choosing the New Architecture for applications + +To (re-)initialize Windows with the New Architecture, you'll want to specify `--template cpp-app` when calling the [init-windows command](init-windows-cli.md) in your application project: + +```bat +yarn react-native init-windows --template cpp-app +``` + +> **Note**: + +### Choosing the Old Architecture for applications + +To (re-)initialize Windows with the Old Architecture, you'll want to specify `--template old/uwp-cpp-app` when calling the [init-windows command](init-windows-cli.md) in your application project: + +```bat +yarn react-native init-windows --template old/uwp-cpp-app +``` + +> **Note:** If you want to use the old C# template, specify `old/uwp-cs-app` instead, but be sure to check out [.NET and C# Support](#net-and-c-support) in the FAQ below. + +### Switching or migrating your application project to a different architecture + +At a high-level, switching your application project means re-initializing Windows support with the correct template. + +> **Important:** Now's a good time to make sure you're using version control so you're able to abort the attempt and/or revert the changes. + +If you've made zero manual changes to the `windows` folder since you first added Windows support, this switch can be as "easy" as: + +1. Deleting the `windows` folder in your project +2. Re-running `init-windows` and specifying the correct template +3. Running `run-windows` to build and launch the new native app + +However, if you've made any changes to the `windows` folder (anything from changing native code to creating app icons, store assets, etc.) then you'll need to re-apply those changes. + +Even if you fix up your `windows` folder, the native libraries you depend on may or may not support the architecture you're switching to. This can produce build and/or runtime failures, which may require more troubleshooting on your part to successfully migrate. + +## New Architecture Feature Parity + +Developers should expect that the vast majority of core components, APIs, and functionality in React Native (i.e. from the `react-native` package) are already available in React Native for Windows in the New Architecture. However there are some gaps and we're not at 100% feature parity with the other platforms. + +### Library Support + +Unfortunately, the level of parity can be even lower when taking into consideration native library support, whether via local or community modules. If you're using a native library which supported Windows on the Old Architecture, and it does not provide any new native UI components, chances are the library can easily support Windows on the New Architecture, if it doesn't already. + +However if a library exposed new native UI, then chances are the library will need to re-implement that native UI for Windows. + +### Windows-Only Core Components + +The following core components were created for and included in React Native for Windows Old Architecture and are not currently supported in the New Architecture: + +- [Flyout](flyout-component-windows.md) +- [Popup](popup-component-windows.md) +- [Glyph](glyph-component-windows.md) + +> **Note:** Flyout and Popup were designed to workaround the inability to properly implement the [Modal](https://reactnative.dev/docs/modal) core component in UWP XAML. Modal is now supported in the New Architecture on Windows, and developers are encouraged to migrate to it where possible. + +## Send us your Feedback + +You're sure to encounter some bumps, challenges and rough edges with trying out the New Architecture. We've already logged many issues tracking properties and features that are on our to-do list, but if you come across significant concerns that aren't yet covered, please [open an issue](https://github.com/microsoft/react-native-windows/issues/new/choose) in the `react-native-windows` repo. You can also leave comments on [existing issues](https://github.com/microsoft/react-native-windows/issues) to help us prioritize what to tackle first! + +## FAQ + +### Migrating from Old to New + +#### Can I keep using the Old Architecture? + +Yes, for now. The React Native for Windows Old Architecture templates are still available for both creating new and upgrading existing application projects. + +React Native for Windows won't automatically migrate Old Architecture Windows projects to use the New Architecture. Developers continuing to use the Old Architecture on Windows will eventually need to migrate manually by re-initializing their Windows native project. + +#### Can I still publish New Architecture applications to the Windows Store? + +Yes, the new `cpp-app` template uses a Windows Packaging project so you can still publish your application to the Windows Store. + +#### How do I migrate a library project to support the New Architecture? + +React Native for Windows library projects can support both New and Old Architecture applications with the latest supported template. See [Native Platform: Getting Started](native-platform-getting-started.md) for details. + +#### I've found something that doesn't work as expected in the New Architecture, what can I do? + +First, search [React Native for Windows Open Issues](https://github.com/microsoft/react-native-windows/issues) to see if the issue you're seeing has already been reported, and if has, give it a comment or up-vote, especially if it's blocking you migration. + +If you don't find an existing issue, please [Open a new issue](https://github.com/microsoft/react-native-windows/issues/new/choose) and let us know what you're seeing. + +### Migrating from UWP to Windows App SDK + +#### Why the change from UWP to Windows App SDK? + +For years, React Native for Windows has built Windows apps using the [Universal Windows Platform](https://learn.microsoft.com/en-us/windows/uwp/) and its [XAML](https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/xaml-overview) technologies. + +However, this implementation has never been perfect. UWP XAML has its own expectations and limitations with rendering UI, which has often come into conflict with React Native's expectations. This has always generated a certain class of issues that simply couldn't be solved by React Native for Windows. + +Furthermore, many requirements of the New Architecture, particularly the faster, more polished UI enabled by the Fabric renderer, would not be possible without extensive, fundamental changes to UWP XAML. + +Now, the current recommendation for new Windows apps is to build using the [Windows App SDK](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/). There are many benefits for Windows developers to migrate their apps off UWP and onto the Windows App SDK. Most importantly for React Native for Windows, the Windows App SDK gives us the tools to implement the New Architecture properly. + +#### Why the change from XAML to Composition? + +It is not always possible to adapt the XAML framework, let alone specific controls, to meet the API requirements, behaviors and expectations of React Native. However, thanks to the Windows App SDK, we're now able to "drop down" and use the layer of UI primitives under XAML, the [Windows App SDK Visual Layer](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/composition) aka Composition. + +So now, instead of trying to implement React Native components with fully-featured XAML controls (and perhaps fight their default behavior) we're now able to implement those components more directly in Composition, giving us the power to align with React Native's expectations rather than XAML's. + +#### What if I still need/want XAML controls? + +We understand that customers may still want to use XAML controls (whether it's any of the rich controls included with Windows App SDK's WinUI 3, third-party libraries, or any of their own existing custom controls) within their React Native for Windows application's UI. + +We are actively working on enabling this, but it's not quite production ready yet. We fully expect to support that developers, especially community module developers, will be able to implement New Architecture `ComponentView`s by loading XAML controls, rather than requiring them to implement the controls "from scratch" using the base Composition APIs. + +#### Will the New Architecture ever target UWP? Will the Old Architecture ever target Windows App SDK? + +No. The New Architecture only targets Windows App SDK and the Old Architecture only targets UWP. Previous experimental features that enabled different scenarios are not supported. + +### .NET and C# Support + +#### Does React Native for Windows support C# in the New Architecture? + +While Windows App SDK does support writing applications and libraries using C# and modern .NET, React Native for Windows doesn't yet. Most React Native for Windows applications and libraries, not to mention React Native for Windows itself, are written in C++ so the team prioritized C++ support first. + +While there are plans and some basic infrastructure set up to support C#, what exists is not nearly robust enough to support the React Native ecosystem. + +To see give feedback on our progress toward C# support, see [Issues tagged "Workstream: New Arch C# Support"](https://github.com/microsoft/react-native-windows/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Workstream%3A%20New%20Arch%20C%23%20Support%22). + +#### Can I migrate my Old Architecture C# application to New Architecture C++? + +Yes, in some cases. It depends on how much your application project depends upon actual C# code, either directly or indirectly. Without native C# support in the New Architecture, any functionality your project uses which is written in C# will need to be re-written (if possible) in C++ or removed / replaced. This includes any native libraries (local or community) your application uses. + +If you made no changes to your native Windows code (i.e. the code in your projects `windows` folder) and rely on no native libraries (local or community) that were written in C#, then there's a good chance you can simply re-initialize your project as a New Architecture project. diff --git a/website/versioned_docs/version-0.82/nuget.md b/website/versioned_docs/version-0.82/nuget.md new file mode 100644 index 000000000..4fafa86dc --- /dev/null +++ b/website/versioned_docs/version-0.82/nuget.md @@ -0,0 +1,21 @@ +--- +id: version-0.82-NuGet +title: Using Microsoft.ReactNative NuGet packages +original_id: NuGet +--- + +> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md). + +>**This documentation and the underlying platform code is a work in progress.** + +Traditionally, the default for React Native Windows has been to build all code from source. This includes building all the code shipped by the team in the npm package from source. The amount of code is quite large and takes both a long time to build as well as requiring a high-performance computer. Some configurations have problems building this code with only 8 GB of memory. Especially if you are used to working only with managed code, this can be a big surprise. + +Starting with the (currently experimental) New Architecture (i.e. Fabric) app and module projects, React Native Windows will default to consuming pre-built binary NuGet packages instead of requiring you to compile everything yourself. + +The benefit of using NuGet packages is that you get improved compilation times for your Windows project and can develop on a less powerful computer. This will also translate into a smoother update experience for newer versions of `react-native-windows`. + +When creating a new project in [Get Started with Windows](getting-started.md), the type of template selected for the [init-windows command](init-windows-cli.md) will determine whether or not the project will built against the `react-native-windows` source or the pre-built NuGet packages. + +> **Note on new projects:** Building from source will remain the default for new Old Architecture projects. This is because there are known compatibility issues with [community modules](supported-community-modules.md), as they often still rely on building the shared code from source, making the parallel use of NuGets problematic. + +> **Note on existing projects:** Previously exposed methods for building Old Architecture projects against NuGets were experimental and are being deprecated, and therefore should not be used. If you're in the process of upgrading an existing Old Architecture project that *did* use those experimental methods, the [init-windows command](init-windows-cli.md) will try to respect that setting until the methods are formally deprecated and removed. diff --git a/website/versioned_docs/version-0.82/parity-status.md b/website/versioned_docs/version-0.82/parity-status.md new file mode 100644 index 000000000..85cabe528 --- /dev/null +++ b/website/versioned_docs/version-0.82/parity-status.md @@ -0,0 +1,25 @@ +--- +id: version-0.82-parity-status +title: React Native Windows Components and APIs +original_id: parity-status +--- + +## Core APIs and Components + +[React Native Components and APIs](https://reactnative.dev/docs/components-and-apis) that are a part of the [React Native Lean Core](https://github.com/facebook/react-native/issues/23313) effort are now all supported in React Native for Windows. + +For a more closely monitored look at our work in progress, check out the [API Completion](https://github.com/microsoft/react-native-windows/labels/API:%20Completion) label on issues in our repo. + +> Please feel free to leave comments or give us a 👍 on issues to help us prioritize better! + +A few methods or props may be missing on some types and we are actively working to add support for those in our [upcoming milestones](https://github.com/microsoft/react-native-windows/milestones). + +If you encounter an unsupported API that should be tracked, please [submit an issue](https://github.com/microsoft/react-native-windows/issues/new/choose) to let us know. + +## Windows APIs and Components + +In addition to the React Native core APIs, there are a handful of APIs that are either new in React Native for Windows to support desktop (like keyboarding, mouse, pop-ups, windowing, multi-instance, etc.,) scenarios as well as signature scenarios on Windows 10 and higher (like Themes, brushes etc.,). You can find documentation on these under the [APIs](https://microsoft.github.io/react-native-windows/docs/flyout-component) tab. + +## More APIs and Components + +In addition to the above, there are several community modules that are supported in Windows. Please see [Supported Community Modules](https://microsoft.github.io/react-native-windows/docs/supported-community-modules) for details. diff --git a/website/versioned_docs/version-0.82/platform.md b/website/versioned_docs/version-0.82/platform.md new file mode 100644 index 000000000..60287ff06 --- /dev/null +++ b/website/versioned_docs/version-0.82/platform.md @@ -0,0 +1,28 @@ +--- +id: version-0.82-platform +title: Platform Detection +original_id: platform +--- + +When building cross-platform applications, you will sometimes need to dynamically detect the platform your code is running on. React Native for Windows supports the same [platform detection mechanisms](https://reactnative.dev/docs/platform-specific-code.html) as Android and iOS. React Native for Windows reports a `Platform.OS` of `windows`, and uses the `.windows` platform-specific extension. + +```js +import { Platform } from 'react-native'; + +if (Platform.OS === 'windows') { + // Windows-specific code +} +``` + +### Detecting OS Version +Like Android and iOS, React Native for Windows allows detecting OS version through `Platform.Version`. Similar to Android, Windows represents this version as a number corresponding to API version. This more specifically maps to the platform's version of `Windows.Foundation.UniversalApiContract`. This number can be used to test the availability of native APIs ([see UWP documentation here](https://docs.microsoft.com/en-au/uwp/extension-sdks/device-families-overview)). + +```js +import { Platform } from 'react-native'; + +if (Platform.Version >= 4) { + // We can use an API from UniversalApiContract 4 +} else { + // Fallback +} +``` \ No newline at end of file diff --git a/website/versioned_docs/version-0.82/react-native-windows-cli.md b/website/versioned_docs/version-0.82/react-native-windows-cli.md new file mode 100644 index 000000000..73fa75bee --- /dev/null +++ b/website/versioned_docs/version-0.82/react-native-windows-cli.md @@ -0,0 +1,33 @@ +--- +id: version-0.82-react-native-windows-cli +title: React Native Windows CLI +original_id: react-native-windows-cli +--- + +When React Native for Windows is added to a React Native project, a variety of Windows-specific developer commands are added to the `react-native` CLI. + +> The following commands are provided by the the `@react-native-windows/cli` NPM package. + +## `react-native autolink-windows` + +Runs Windows-specific autolinking for your RNW project. + +See the [react-native autolink-windows docs](autolink-windows-cli.md) for detailed usage information. + +## `react-native codegen-windows` + +Runs Windows-specific codegen for native modules. + +See the [react-native codegen-windows docs](codegen-windows-cli.md) for detailed usage information. + +## `react-native init-windows` + +Initializes a new RNW project from a given template. + +See the [react-native init-windows docs](init-windows-cli.md) for detailed usage information. + +## `react-native run-windows` + +Builds your RNW app and starts it on a connected Windows desktop, emulator, or device. + +See the [react-native run-windows docs](run-windows-cli.md) for detailed usage information. diff --git a/website/versioned_docs/version-0.82/releases.md b/website/versioned_docs/version-0.82/releases.md new file mode 100644 index 000000000..9036565fe --- /dev/null +++ b/website/versioned_docs/version-0.82/releases.md @@ -0,0 +1,16 @@ +--- +id: version-0.82-releases +title: Release Strategy +original_id: releases +--- + +For every major version update of `react-native`, React Native for Windows releases a matching version. In addition, there are three release distributions with corresponding npm package distribution tags: +1. Canary (@canary) +2. Preview (@preview) +3. Latest (@latest) + +`canary` builds are built directly from our main branch. These builds provide no guarantees around upstream React version, breaking changes, or overall stability. These builds should be used for development or to test bleeding edge functionality but should not be relied upon for production use. Master builds are versioned as `0.0.0-canary.x`. + +`preview` builds are the first released by stable branches. These builds aim to become increasingly polished over time and have fewer breaking changes than in canary. Preview builds are versioned as `0.x.0-preview.y`, where x matches the minor release of React Native. + +`latest` builds corresponding to our "released" version. Breaking changes should not be made to stable branches after promotion to latest. Caution must be taken to not compromise the stability of our non-prerelease branches. Only low risk changes critical to customer scenarios should be back-ported. Released builds are versioned as `0.x.y` where x matches the minor release of React Native. diff --git a/website/versioned_docs/version-0.82/rnw-dependencies.md b/website/versioned_docs/version-0.82/rnw-dependencies.md new file mode 100644 index 000000000..d5b2c4044 --- /dev/null +++ b/website/versioned_docs/version-0.82/rnw-dependencies.md @@ -0,0 +1,73 @@ +--- +id: version-0.82-rnw-dependencies +title: System Requirements +original_id: rnw-dependencies +--- + +You can only develop React Native for Windows app on Windows. You can run React Native for Windows apps only on: + +- All Windows 11 devices +- Up-to-date Windows 10 devices (see [Windows OS Compatibility](win10-compat.md) for details) + +To develop React-Native for Windows apps, you need to install several dependencies. + +## Install the development dependencies +To check or install dependencies, run the script [`rnw-dependencies.ps1`](https://aka.ms/rnw-vs2022-deps.ps1) in an elevated PowerShell window. + +**Run this command:** +Start an **elevated** PowerShell window and run: + +```powershell +Set-ExecutionPolicy Unrestricted -Scope Process -Force; +iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-vs2022-deps.ps1'); + +``` + +
+Manual setup instructions + +> The recommended way is to use the script above as the information in this manual section is likely to get out of date + +Alternatively, you can setup your environment manually: +- Ensure [Developer Mode](https://learn.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development) is turned ON in Windows Settings App. +- It is _highly_ recommended to update the Windows system. +- Install the latest version of [Visual Studio 2022](https://www.visualstudio.com/downloads) **with the following options checked**: + - **Workloads** + - `Node.js development`, or one of the following alternatives: + - Install from **Individual Components**: + - Development activities + - Node.js development support + - Install Node.js separately, see below for some options + - `.NET Desktop development` + - `Desktop development with C++` + - Include `MSVC v143 - VS 2022 C++ x64/x86 build tools (Latest)` (check under 'Optional') + - `Universal Windows Platform development` + - Include `C++ (v143) Universal Windows Platform tools` (check under 'Optional') + - **Individual Components** + - Include `Windows 10 SDK (10.0.22621.0)` (target OS version from [this table](win10-compat.md#supported-os-versions)) + - Include `MSVC v143 - VS 2022 C++ ARM64 build tools (Latest)` (to target ARM64 devices) +- [Enable Long Paths in Windows 10, Version 1607, and Later](https://learn.microsoft.com/en-us/windows/win32/fileio/maximum-file-path-limitation?tabs=registry#enable-long-paths-in-windows-10-version-1607-and-later). +- Install the latest version of the [.NET 6.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/6.0). + +Options to install [Node.js](https://nodejs.org) separately: + - Using [WinGet](https://aka.ms/winget) (_React Native recommended_). To use WinGet, from an elevated Command Prompt, run: + ```bat + winget install OpenJS.NodeJS.LTS --version 18.18.0 + ``` + - Using [another package manager](https://nodejs.org/en/download/package-manager/) such as [Scoop](https://scoop.sh/) or [Node Version Switcher (nvs)](https://github.com/jasongin/nvs) + - Directly from [Node.js](https://nodejs.org/en/download) + +Optional steps that are _highly recommended_: + +- Install [Yarn](https://yarnpkg.com/en/docs/install) (**required** to contribute to react-native-windows) +- Install `git` using a method such as: + - Using a package manager such as [WinGet](https://aka.ms/winget), [Chocolatey](https://chocolatey.org/) or [Scoop](https://scoop.sh/) + - Install [git for Windows](https://gitforwindows.org/) + - Install [GitHub Desktop](https://desktop.github.com/) + +
+ +### Troubleshooting + +- If after running the app, the packager does not update (or) app does not show React Native content - close the packager command prompt window and the app, make sure browser is open, run `yarn start` and run the app from Visual Studio again. +- If you get a red error box in your UWP app window with the error message : `ERROR: Instance failed to start. A connection with the server cannot be established`, make sure you have the packager running using `yarn start` and run the app again. diff --git a/website/versioned_docs/version-0.82/run-windows-cli.md b/website/versioned_docs/version-0.82/run-windows-cli.md new file mode 100644 index 000000000..589e2bfef --- /dev/null +++ b/website/versioned_docs/version-0.82/run-windows-cli.md @@ -0,0 +1,58 @@ +--- +id: version-0.82-run-windows-cli +title: react-native run-windows +original_id: run-windows-cli +--- + +This guide will give you more information on the `run-windows` command of the React Native Windows CLI. + +## `run-windows` + +The `run-windows` CLI command is used to build and run React Native for Windows apps. + +### Usage +Builds your RNW app and starts it on a connected Windows desktop, emulator, or device. + +```bat +npx react-native run-windows +``` +### Options + +> **Note:** Remote Debugging was officially marked as [deprecated](https://github.com/react-native-community/discussions-and-proposals/discussions/734) in RN 0.73 and will be removed in a later release. + +Here are the options that `react-native run-windows` takes: +| Option | Input Type | Description | +|-----------------------|------------|--------------------------------------------------| +| `--release` | boolean | Specifies a Release build | +| `--root` | string | Override the root directory for the project which contains the `windows` folder | +| `--arch` | string | The build architecture, i.e. `ARM64`, `x86`, `x64`. Defaults to system architecture | +| `--singleproc` | boolean | Disables multi-proc build | +| `--emulator` | boolean | Deploys the app to an emulator | +| `--device` | boolean | Deploys the app to a connected device | +| `--target` | string | Deploys the app to the specified `GUID` for a device | +| `--remote-debugging` | boolean | **(Deprecated)** Deploys the app in remote debugging mode | +| `--logging` | boolean | Verbose output logging | +| `--no-packager` | boolean | Do not launch the packager while building | +| `--bundle` | boolean | Enable Bundle configuration, i.e. `ReleaseBundle`/`DebugBundle` rather than `Release`/`Debug` | +| `--no-launch` | boolean | Do not launch the app after deployment | +| `--no-autolink` | boolean | Do not run autolinking | +| `--no-build` | boolean | Do not build the solution | +| `--no-deploy` | boolean | Do not deploy the app | +| `--deploy-from-layout`| boolean | Force deploy from layout even in Release builds | +| `--sln` | string | Override the app solution file determined by 'react-native config', i.e. `windows\myApp.sln` | +| `--proj` | string | Override the app project file determined by 'react-native config', i.e. `windows\myApp\myApp.vcxproj` | +| `--msbuildprops` | string | Comma separated props to pass to MSBuild, i.e. `prop1=value1,prop2=value2` | +| `--buildLogDirectory` | string | Optional directory where MSBuild log files should be stored | +| `--info` | boolean | Dump environment information | +| `--direct-debugging` | number | Enable direct debugging on specified port | +| `--no-telemetry` | boolean | Disables sending telemetry that allows analysis of usage and failures of the react-native-windows CLI | +| `-h`, `--help` | boolean | Display help for command | + +## Telemetry Notice + +This command sends telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the `--no-telemetry` command line option. See below for more details. + +The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications. If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft's privacy statement. Our privacy statement is located at https://go.microsoft.com/fwlink/?LinkID=824704. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices. + +This data collection notice only applies to the process of running the react-native-windows CLI commands. + \ No newline at end of file diff --git a/website/versioned_docs/version-0.82/setup-ci.md b/website/versioned_docs/version-0.82/setup-ci.md new file mode 100644 index 000000000..9f78098ab --- /dev/null +++ b/website/versioned_docs/version-0.82/setup-ci.md @@ -0,0 +1,117 @@ +--- +id: version-0.82-setup-ci +title: Setup Continuous Integration Pipeline for an RNW App +original_id: setup-ci +--- + +This guide will help you get started on setting up your very first continuous integration pipeline for a React Native for Windows app. + +## Setting Up a Continuous Integration Pipeline using GitHub Actions + +When done developing your app, it's good practice to setup a CI pipeline with automated builds and tests to avoid any future regressions. There are many services available for setting up a CI pipeline. We'll use [GitHub Actions](https://docs.github.com/actions) as an example here since it doesn't require any extra account setup if you are already hosting your code on GitHub, also the default VM image has all the tools we needed pre-installed. + +The VM images supported by GitHub Actions CI/CD can be found [here](https://github.com/actions/virtual-environments#github-actions-virtual-environments), check the pre-installed tools and compare them with [React Native Windows development dependencies](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies), find the image that meets the requirements. + +Next you need to create a YAML file for GitHub Actions, the basic steps are: +- Checkout code and setup the environment +```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 +``` +- Build and run the project +```yaml + - name: Run Windows x64 release + run: npx react-native run-windows --arch x64 --release --logging +``` +Check out the full [`react-native-webview` example](https://github.com/react-native-webview/react-native-webview/blob/master/.github/workflows/windows-ci.yml) as well as their [official example](https://github.blog/2019-08-08-github-actions-now-supports-ci-cd/) for more info. + +Save the YAML file to `.github\workflows\` and then commit. To learn more about YAML syntax, see [Workflow syntax for GitHub Actions](https://docs.github.com/actions/using-workflows/workflow-syntax-for-github-actions). + +> GitHub Actions should be enabled by default, if it's not enabled for some reason you can go to Settings->Actions tab of the repo to enable it (requires owner access). + +Now push your changes and the CI pipeline should be up and running. + +## Setting Up Pipeline for Signed Package Builds +[Certificates](https://docs.microsoft.com/windows/msix/package/create-certificate-package-signing) are used to sign RNW apps so that they can be installed locally or published to the Microsoft Store. This data should not be publicly published, so we need to do extra steps if we wish to build/run signed RNW app packages through GitHub Actions. + +### Storing Certificates Securely +There are a several options where you can securely store your certificate information: + +- [GitHub Secrets](https://docs.github.com/actions/security-guides/encrypted-secrets) +- [Azure Secure Files](https://docs.microsoft.com/azure/devops/pipelines/library/secure-files?view=azure-devops) +- [Azure Key Vault Secrets](https://docs.microsoft.com/azure/key-vault/secrets/about-secrets) + +GitHub Secrets works well, when you are using GitHub Actions to run your pipeline. The latter two work well, if you are using Azure DevOps to run your pipeline. + +For Azure Secure Files, you will upload the `.pfx` itself. The remaining two methods expect data in the form of a string. Thus, you must `Base64` encode your `.pfx` and upload the resulting string as your secret by running +```powershell +$fileContentBytes = get-content '' -Encoding Byte +[System.Convert]::ToBase64String($fileContentBytes) | Out-File pfx-encoded-bytes.txt +``` +in PowerShell. Then upload the contents of `pfx-encoded-bytes.txt` as your secret. + +### Accessing Certificate Data from Pipeline +For Azure Secure Files, retrieving the secret will download the `.pfx` itself. The remaining two methods will give you the encoded string. Thus, you'll have to decode the secret, and save it to a `.pfx` file before it can be used to sign. +In a YAML file the basic steps to generate your certificate from an encoded string stored in GitHub Actions are: +```yaml +- name: Decode the pfx + run: | + $PfxBytes = [System.Convert]::FromBase64String("${{ secrets.Base64_Encoded_Pfx }}") + $PfxPath = [System.IO.Path]::GetFullPath( (Join-Path -Path ProjectDirectoryPath -ChildPath GitHubActionsWorkflow.pfx) ) + [System.IO.File]::WriteAllBytes("$PfxPath", $PfxBytes) +``` +where your encoded string is a GitHub secret named `Base64_Encoded_Pfx`. + +In a YAML file the basic steps to use your certificate for a signed RNW app build are: +```yaml +steps: +- name: run-windows (Release) - CI + run: yarn windows --no-launch --arch x64 --logging --release --msbuildprops PackageCertificateKeyFile=ProjectDirectoryPath\GitHubActionsWorkflow.pfx +``` + +Make sure to delete your `.pfx` from the pipeline once you've finished using it. +In a YAML file the basic steps for removing your certificate are: +```yaml +- name: Remove the pfx + run: | + $certificatePath = Join-Path -Path ProjectDirectoryPath -ChildPath GitHubActionsWorkflow.pfx + Write-Host $certificatePath + Remove-Item -path $certificatePath +``` + +See the [`Xaml-Islands-Samples`](https://github.com/microsoft/Xaml-Islands-Samples/blob/1a112338455aacdde51cb13214bb9b57ba174a2c/.github/workflows/CPP-CI.yml) repository for an example of a pipeline which uses GitHub Secrets. +See the [`react-native-gallery`](https://github.com/microsoft/react-native-gallery/blob/bb9d933b33ee5f5bcb69903afe8bee351990719c/ci.yml) repository for an example of a pipeline which uses Azure DevOps Secure Files. +See the react-native-windows repository for an example of a pipeline which uses Azure Key Vault: +[Setup of Certificate](https://github.com/microsoft/react-native-windows/blob/d3c720b909b3c8de50cac5665c849288eabcf5da/.ado/templates/write-certificate.yml) +[Removal of Certificate](https://github.com/microsoft/react-native-windows/blob/d3c720b909b3c8de50cac5665c849288eabcf5da/.ado/templates/cleanup-certificate.yml) +[Signed RNW App Build](https://github.com/microsoft/react-native-windows/blob/d3c720b909b3c8de50cac5665c849288eabcf5da/.ado/templates/run-windows-with-certificates.yml) + +## FAQ's +### I'm ready to do a signed app build. How do I tell MSBuild to use my certificate? +You can tell MSBuild what `.pfx` you want to use to sign your app using the `PackageCertificateKeyFile` MSBuild property. This property expects the file path to the `.pfx` you want to use. See [here](https://github.com/microsoft/react-native-windows/blob/353321ee40391f6f302e7cc80f96285e12780cbe/.ado/jobs/playground.yml#L114) for an example of this using `VSBuild`. See [here](https://github.com/microsoft/react-native-windows/blob/353321ee40391f6f302e7cc80f96285e12780cbe/.ado/templates/run-windows-with-certificates.yml#L48) for an example of this using the RNW CLI. + +### I have a pipeline that runs on forks of my repository (i.e. when a PR is being made). Can I access my certificate data from this pipeline? +No. When data is securely stored through GitHub Secrets, Azure DevOps Secure Files, or Azure Key Vault, it can only be run from pipelines that are executing on branches of the original repository. The data cannot be accessed from pipelines running code from repository forks, because if the data was able to be accessed, someone could manipulate the pipeline source code within their fork to retrieve the data, leaving it unsecured. + +### I want to build a deployable package for my app from a pipeline that doesn't have access to my certificate data. What can I do? +This case may apply to you if you want to do some End To End testing within a PR pipeline to make sure incoming changes don't break your project. You do have a couple of options here to make do without a certificate. You can successfully build and deploy a non-signed RNW app via deploying from layout. The RNW CLI will by default deploys from layout as long as the MSBuild argument `AppxPackageSigningEnabled` or `PackageCertificateFile` is not set in the project file. If this is not the case for your app, you can force deploy from layout by using the `--deploy-from-layout` CLI option. diff --git a/website/versioned_docs/version-0.82/supported-community-modules.md b/website/versioned_docs/version-0.82/supported-community-modules.md new file mode 100644 index 000000000..52cd3c7b4 --- /dev/null +++ b/website/versioned_docs/version-0.82/supported-community-modules.md @@ -0,0 +1,18 @@ +--- +id: version-0.82-supported-community-modules +title: Supported Community Modules +original_id: supported-community-modules +--- + +## `ReactNative.Directory` + +The [React Native Directory](https://reactnative.directory/) lists libraries and native modules that are available across all of the React Native platforms including iOS, Android, Windows, macOS, and more. + +To view which modules are available for a specific platform, you can use the Filters function on the website, or visit these pre-filtered URLs: + +- [Modules that support Windows](https://reactnative.directory/?windows=true) +- [Modules that support macOS](https://reactnative.directory/?macos=true) + +## Help! A module I need doesn't work with Windows and/or macOS! + +If you need a module that doesn't currently have a native Windows and/or macOS implementation, please file an issue on the module repository to let them know that you need Windows and/or macOS support. diff --git a/website/versioned_docs/version-0.82/textinput-component-windows.md b/website/versioned_docs/version-0.82/textinput-component-windows.md new file mode 100644 index 000000000..8399a4e79 --- /dev/null +++ b/website/versioned_docs/version-0.82/textinput-component-windows.md @@ -0,0 +1,35 @@ +--- +id: version-0.82-textinput-component +title: TextInput +original_id: textinput-component +--- + +> **Architecture Review Needed:** This documentation was written to support development against React Native's "Old" or "Legacy" Architecture. It *may or may not* be directly applicable to New Architecture development and needs to be reviewed and potentially updated. For information on React Native architectures in React Native Windows, see [New vs. Old Architecture](new-architecture.md). + +# Reference + +## Props + +Inherits [TextInput Props](https://reactnative.dev/docs/textinput). + +## Windows-Specific Properties + +### `submitKeyEvent` + +A property that registers a set of KeyEvents that may trigger `onSubmitEditing` in a multiline scenario. + +| type | required | +|:--|:--| +| { code: 'Enter', shiftKey: bool } | No | + +### `clearTextOnSubmit` + +If `true`, the text field will clear when submitted. The default value is false. + +| type | required | +|:--|:--| +| bool | No | + +## Examples + +Examples can be found in the [React Native Gallery App](https://github.com/microsoft/react-native-gallery/blob/main/src/examples/TextInputExamplePage.tsx) available in the [Microsoft Store](https://apps.microsoft.com/detail/9NPG0B292H4R) diff --git a/website/versioned_docs/version-0.82/upgrade-app.md b/website/versioned_docs/version-0.82/upgrade-app.md new file mode 100644 index 000000000..41966d469 --- /dev/null +++ b/website/versioned_docs/version-0.82/upgrade-app.md @@ -0,0 +1,26 @@ +--- +id: version-0.82-upgrade-app +title: Upgrading App to Latest Version of React Native Windows +original_id: upgrade-app +--- + +## Upgrading A React Native Windows App +Upgrading your app to new React Native Windows versions requires a small amount of effort, but we will try to streamline this process for you as much as possible in this guide. You have two main options for how to upgrade your React Native Windows app. You can use the [init-windows command](init-windows-cli.md) or manually upgrade using [Upgrade Helper](https://reactnative.dev/docs/upgrading#upgrade-helper). + +### Steps to Upgrade An App to New React Native Windows Version via CLI +1. In the root of your project, run the [init-windows command](init-windows-cli.md) (make sure you're using the correct template). +2. In the root of your project, run the [autolink-windows command](autolink-windows-cli.md) to link any native modules used by your app. +3. Step 1 will overwrite any changes you previously made to the native Windows code of your project and generate a new GUID. If you made changes to this code or wish to keep your previous GUID, you have two options: + + 1. Add those changes manually. + 2. If your project is a Git repository, open the project in Visual Studio Code and navigate to the Source Control tab. There, you can undo the specific overwrite edits that erased your changes. +3. The upgrade script will not remove any files that were removed from the new template. To check if there are any files that require manual deletion, use [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/). See the section below for the steps on how to use this tool. +4. Your app is now ready to build! + +### Steps to Manually Upgrade An App to New React Native Windows Version via Upgrade Helper +1. Open [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) in your preferred browser. +2. Select the React Native Windows version your app is currently on and the version you wish to upgrade to. By default, the latest major versions are selected. +3. Select the "Show me how to upgrade" button. +4. Manually edit your app source to match the changes displayed in Upgrade Helper. +5. Run `yarn` at the root of your project to update your dependencies. +6. Your app is now ready to build! diff --git a/website/versioned_docs/version-0.82/win10-compat.md b/website/versioned_docs/version-0.82/win10-compat.md new file mode 100644 index 000000000..62d9cd59b --- /dev/null +++ b/website/versioned_docs/version-0.82/win10-compat.md @@ -0,0 +1,35 @@ +--- +id: version-0.82-win10-compat +title: Windows OS Compatibility +original_id: win10-compat +--- + +React Native for Windows apps require the **Windows 10 May 2019 Update** (i.e. version 1903, build 10.18362.0) or higher to run. + +> **Note:** Old Architecture apps only require the **Windows 10 October 2018 Update** (i.e. version 1809, Build 10.0.17763.0) or higher to run. For more information on React Native architectures in React Native for Windows, see [New vs. Old Architecture](new-architecture.md). + +## Supported OS Versions + +The following table captures the default versions of Windows that a React Native for Windows app supports. The "Target OS" is the version of the SDK that the app is compiled against, and the "Minimum OS" is the lowest version of Windows that the app will run on. + +| React Native Windows | Target OS Version | Minimum OS Version | +| :--: | :-: | :-: | +| 0.76+ | **Windows 11 2022 Update**
Version 22H2 ; Build 10.0.22621.0 | New Arch: **Windows 10 May 2019 Update**
Version 1903 ; Build 10.0.18362.0

Old Arch: **Windows 10 October 2018 Update**
Version 1809 ; Build 10.0.17763.0 | +| 0.75 | **Windows 11 2022 Update**
Version 22H2 ; Build 10.0.22621.0 | **Windows 10 October 2018 Update**
Version 1809 ; Build 10.0.17763.0 | +| 0.72 - 0.74 | **Windows 10 May 2020 Update**
Version 2004 ; Build 10.0.19041.0 | **Windows 10 October 2018 Update**
Version 1809 ; Build 10.0.17763.0 | + +> **Note:** To override the default SDK versions, see [Customizing SDK versions](customizing-SDK-versions.md). + +## Backwards Compatibility + +React Native for Windows uses native Windows APIs that necessitate the minimum requirement of the **Windows 10 May 2019 Update** in order to run with all APIs and scenarios supported. Older versions of the Windows OS, when supported at all, may by missing certain functionality due to the lack of certain Windows APIs. The following table captures this missing functionality: + +> **Note:** If you are using any of the APIs below, they should gracefully fail (no-op) when the app is running on Windows devices of the corresponding OS versions. + +| [Windows SDK](https://developer.microsoft.com/en-us/windows/downloads/sdk-archive) | React Native for Windows support | +| :-----------------------------------------------------------------------------------: | :----- | +| **Windows 10
May 2019 Update**
Version 1903
Build 10.0.18362.1 | **All APIs, scenarios supported** | +| **Windows 10
October 2018 Update**
Version 1809
Build 10.0.17763.0 | **Unsupported:**
  1. `useNativeDriver` for animations
  2. `View.transform` property
  3. React Native for Windows in XAML islands for hosting inside WPF/Win32 scenarios
  4. When using Hermes engine, the default locale will always be `en_US` and the default time zone will always be `Etc/UTC`, irrespective of the system settings
| +| **Windows 10
April 2018 Update**
Version 1803
Build 10.0.17134.12 | **Unsupported:** (Same as above plus):
  1. Flyout: edge alignments, `ShowAt` capability
  2. `Picker.editable`, `Picker.text`
| +| **Windows 10
Fall Creators Update**
Version 1709
Build 10.0.16299.91 | **Unsupported:** (Same as above) | +| **Windows 10
Creators Update**
Version 1703
Build 10.0.15063.468 | **Unsupported:** (Same as above plus):
  1. Keyboard events
  2. `TextInput.placeholderTextColor`
  3. `TextInput.secureTextEntry` may have some fast typing issues
| diff --git a/website/versioned_docs/version-0.82/win10-vm.md b/website/versioned_docs/version-0.82/win10-vm.md new file mode 100644 index 000000000..c8ee51680 --- /dev/null +++ b/website/versioned_docs/version-0.82/win10-vm.md @@ -0,0 +1,21 @@ +--- +id: version-0.82-win10-vm +title: Developing Windows apps on a non-Windows PC +original_id: win10-vm +--- + +It is possible to develop Windows apps on a non-Windows PC by using a virtual machine. The virtual machine can run either locally or on Azure. + +### Local VM + +1. Go to [Windows 11 development environment](https://developer.microsoft.com/windows/downloads/virtual-machines/) for a link to download a Windows 11 virtual machine image. These are usually available for 90 days and are provided in different formats (VMWare, Hyper-V, VirtualBox, and Parallels). +2. Once you have created your VM, open an elevated PowerShell session: press the start menu button, type `powershell`, right click on it and select Run as administrator. You will be prompted for permissions, click "Yes". + +![](assets/powershell-start-menu.png) + +3. At this point you are ready to set up your development dependencies. Follow the instructions on [dependencies](rnw-dependencies.md). + +### Azure VM + +1. Go to https://docs.microsoft.com/en-us/azure/virtual-machines/windows/using-visual-studio-vm and follow the instructions to create a **Visual Studio 2019 Latest** virtual machine on "Windows 10 Enterprise N" in Azure. +2. Follow the instructions on [dependencies](rnw-dependencies.md). diff --git a/website/versioned_docs/version-0.82/windowsbrush-and-theme.md b/website/versioned_docs/version-0.82/windowsbrush-and-theme.md new file mode 100644 index 000000000..962b01088 --- /dev/null +++ b/website/versioned_docs/version-0.82/windowsbrush-and-theme.md @@ -0,0 +1,141 @@ +--- +id: version-0.82-windowsbrush-and-theme +title: Using PlatformColor and Responding to Themes +original_id: windowsbrush-and-theme +--- + +## Overview + +Windows supports two unique native styling/theming behaviors: one being the dark and light theme changes and the other being adaptive brushes and system colors. This article will show you how to set up your app to listen to theme changes and use the Windows brushes when and where you want. + +### Setting up and handling theme changed events + +In this example, we'll look at three things: + +- How to set up your React Native app to be style and event sensitive to the system themes +- How to switch styles when a theme change has occurred +- Handling a theme changed event + +#### Using hooks to be sensitive to theme changes + +First import the `useColorScheme` hook into your React Native app. + +```JSX +import { useColorScheme } from 'react-native' +``` + +```JSX + const MyAppComponent = () => { + const colorScheme = useColorScheme(); + return ( +