diff --git a/website/versioned_docs/version-0.86/_canary-channel-api-warning.mdx b/website/versioned_docs/version-0.86/_canary-channel-api-warning.mdx
new file mode 100644
index 00000000000..2c1ae5cf423
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_canary-channel-api-warning.mdx
@@ -0,0 +1,7 @@
+:::tip[Canary 🧪]
+
+**This API is currently only available in React Native’s Canary and Experimental channels.**
+
+If you want to try it out, please [enable the Canary Channel](releases/release-levels) in your app.
+
+:::
diff --git a/website/versioned_docs/version-0.86/_experimental-api-warning.mdx b/website/versioned_docs/version-0.86/_experimental-api-warning.mdx
new file mode 100644
index 00000000000..6829b79a4f0
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_experimental-api-warning.mdx
@@ -0,0 +1,5 @@
+:::important[Experimental 🧪]
+
+**This API is experimental.** Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production.
+
+:::
diff --git a/website/versioned_docs/version-0.86/_experimental-channel-api-warning.mdx b/website/versioned_docs/version-0.86/_experimental-channel-api-warning.mdx
new file mode 100644
index 00000000000..92a7b2c8c2f
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_experimental-channel-api-warning.mdx
@@ -0,0 +1,9 @@
+:::important[Experimental Feature 🧪]
+
+**This API is currently only available in React Native’s Experimental channels.**
+
+Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production.
+
+If you want to try it out, please [enable the Experimental Channel](releases/release-levels) in your app.
+
+:::
diff --git a/website/versioned_docs/version-0.86/_fabric-native-components.jsx b/website/versioned_docs/version-0.86/_fabric-native-components.jsx
new file mode 100644
index 00000000000..fc6a3171a4f
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_fabric-native-components.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import IOSContent from './fabric-native-components-ios.md';
+import AndroidContent from './fabric-native-components-android.md';
+
+export function FabricNativeComponentsIOS() {
+ return ;
+}
+
+export function FabricNativeComponentsAndroid() {
+ return ;
+}
diff --git a/website/versioned_docs/version-0.86/_getting-started-linux-android.md b/website/versioned_docs/version-0.86/_getting-started-linux-android.md
new file mode 100644
index 00000000000..bc953397bcc
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_getting-started-linux-android.md
@@ -0,0 +1,117 @@
+## Installing dependencies
+
+You will need Node, the React Native command line interface, a JDK, and Android Studio.
+
+While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.
+
+
Node
+
+Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 22.11.0 or newer.
+
+
Java Development Kit
+
+React Native currently recommends version 17 of the Java SE Development Kit (JDK). You may encounter problems using higher JDK versions. You may download and install [OpenJDK](https://openjdk.java.net) from [AdoptOpenJDK](https://adoptopenjdk.net/) or your system packager.
+
+
Android development environment
+
+Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
+
+
1. Install Android Studio
+
+[Download and install Android Studio](https://developer.android.com/studio). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
+
+- `Android SDK`
+- `Android SDK Platform`
+- `Android Virtual Device`
+
+Then, click "Next" to install all of these components.
+
+:::note
+If the checkboxes are grayed out, you will have a chance to install these components later on.
+:::
+
+Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
+
+
2. Install the Android SDK
+
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 15 (VanillaIceCream)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+
+To do that, open Android Studio, click on "Configure" button and select "SDK Manager".
+
+:::tip
+The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.
+:::
+
+Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 15 (VanillaIceCream)` entry, then make sure the following items are checked:
+
+- `Android SDK Platform 35`
+- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image`
+
+Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `36.0.0` and `Android SDK Command-line Tools (latest)` are selected.
+
+Finally, click "Apply" to download and install the Android SDK and related build tools.
+
+
3. Configure the ANDROID_HOME environment variable
+
+The React Native tools require some environment variables to be set up in order to build apps with native code.
+
+Add the following lines to your `$HOME/.bash_profile` or `$HOME/.bashrc` (if you are using `zsh` then `~/.zprofile` or `~/.zshrc`) config file:
+
+```shell
+export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
+export PATH=$PATH:$ANDROID_HOME/platform-tools
+```
+
+:::note
+`.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file.
+:::
+
+Type `source $HOME/.bash_profile` for `bash` or `source $HOME/.zprofile` to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`.
+
+:::note
+Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.
+:::
+
+
Watchman
+
+Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install#buildinstall) to compile and install Watchman from source.
+
+:::info
+[Watchman](https://facebook.github.io/watchman/docs/install) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).
+:::
+
+
Preparing the Android device
+
+You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.
+
+Either way, you will need to prepare the device to run Android apps for development.
+
+
Using a physical device
+
+If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](running-on-device.md).
+
+
Using a virtual device
+
+If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:
+
+
+
+If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **VanillaIceCream** API Level 35 image.
+
+:::tip
+We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.
+:::
+
+Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it.
+
+
That's it!
+
+Congratulations! You successfully set up your development environment.
+
+
+
+
Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
diff --git a/website/versioned_docs/version-0.86/_getting-started-macos-android.md b/website/versioned_docs/version-0.86/_getting-started-macos-android.md
new file mode 100644
index 00000000000..031dd7655a4
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_getting-started-macos-android.md
@@ -0,0 +1,142 @@
+## Installing dependencies
+
+You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.
+
+While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.
+
+
Node & Watchman
+
+We recommend installing Node and Watchman using [Homebrew](https://brew.sh/). Run the following commands in a Terminal after installing Homebrew:
+
+```shell
+brew install node
+brew install watchman
+```
+
+If you have already installed Node on your system, make sure it is Node 22.11.0 or newer.
+
+[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.
+
+
Java Development Kit
+
+We recommend installing the OpenJDK distribution called Azul **Zulu** using [Homebrew](https://brew.sh/). Run the following commands in a Terminal after installing Homebrew:
+
+```shell
+brew install --cask zulu@17
+
+# Get path to where cask was installed to find the JDK installer
+brew info --cask zulu@17
+
+# ==> zulu@17:
+# https://www.azul.com/downloads/
+# Installed
+# /opt/homebrew/Caskroom/zulu@17/ (185.8MB) (note that the path is /usr/local/Caskroom on non-Apple Silicon Macs)
+# Installed using the formulae.brew.sh API on 2024-06-06 at 10:00:00
+
+# Navigate to the folder
+open /opt/homebrew/Caskroom/zulu@17/ # or /usr/local/Caskroom/zulu@17/
+```
+
+After opening Finder, double click the `Double-Click to Install Azul Zulu JDK 17.pkg` package to install the JDK.
+
+After the JDK installation, add or update your `JAVA_HOME` environment variable in `~/.zshrc` (or in `~/.bash_profile`).
+
+If you used above steps, JDK will likely be located at `/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home`:
+
+```shell
+export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home
+```
+
+The Zulu OpenJDK distribution offers JDKs for **both Intel and M1 Macs**. This will make sure your builds are faster on M1 Macs compared to using an Intel-based JDK.
+
+If you have already installed JDK on your system, we recommend JDK 17. You may encounter problems using higher JDK versions.
+
+
Android development environment
+
+Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
+
+
1. Install Android Studio
+
+[Download and install Android Studio](https://developer.android.com/studio). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
+
+- `Android SDK`
+- `Android SDK Platform`
+- `Android Virtual Device`
+
+Then, click "Next" to install all of these components.
+
+:::note
+If the checkboxes are grayed out, you will have a chance to install these components later on.
+:::
+
+Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
+
+
2. Install the Android SDK
+
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 15 (VanillaIceCream)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+
+To do that, open Android Studio, click on "More Actions" button and select "SDK Manager".
+
+
+
+:::tip
+The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.
+:::
+
+Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 15 (VanillaIceCream)` entry, then make sure the following items are checked:
+
+- `Android SDK Platform 35`
+- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image` or (for Apple M1 Silicon) `Google APIs ARM 64 v8a System Image`
+
+Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that `36.0.0` and `Android SDK Command-line Tools (latest)` are selected.
+
+Finally, click "Apply" to download and install the Android SDK and related build tools.
+
+
3. Configure the ANDROID_HOME environment variable
+
+The React Native tools require some environment variables to be set up in order to build apps with native code.
+
+Add the following lines to your `~/.zprofile` or `~/.zshrc` (if you are using `bash`, then `~/.bash_profile` or `~/.bashrc`) config file:
+
+```shell
+export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/emulator
+export PATH=$PATH:$ANDROID_HOME/platform-tools
+```
+
+Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the config into your current shell. Verify that ANDROID_HOME has been set by running `echo $ANDROID_HOME` and the appropriate directories have been added to your path by running `echo $PATH`.
+
+:::note
+Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.
+:::
+
+
Preparing the Android device
+
+You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.
+
+Either way, you will need to prepare the device to run Android apps for development.
+
+
Using a physical device
+
+If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](running-on-device.md).
+
+
Using a virtual device
+
+If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:
+
+
+
+If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **VanillaIceCream** API Level 35 image.
+
+Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it.
+
+
That's it!
+
+Congratulations! You successfully set up your development environment.
+
+
+
+
Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
diff --git a/website/versioned_docs/version-0.86/_getting-started-macos-ios.md b/website/versioned_docs/version-0.86/_getting-started-macos-ios.md
new file mode 100644
index 00000000000..84204758fb3
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_getting-started-macos-ios.md
@@ -0,0 +1,73 @@
+## Installing dependencies
+
+You will need Node, Watchman, the React Native command line interface, Xcode and CocoaPods.
+
+While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS.
+
+### Node & Watchman
+
+We recommend installing Node and Watchman using [Homebrew](https://brew.sh/). Run the following commands in a Terminal after installing Homebrew:
+
+```shell
+brew install node
+brew install watchman
+```
+
+If you have already installed Node on your system, make sure it is Node 22.11.0 or newer.
+
+[Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.
+
+### Xcode
+
+Please use the **latest version** of Xcode.
+
+The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.
+
+#### Command Line Tools
+
+You will also need to install the Xcode Command Line Tools. Open Xcode, then choose **Settings... (or Preferences...)** from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+
+
+#### Installing an iOS Simulator in Xcode
+
+To install a simulator, open **Xcode > Settings... (or Preferences...)** and select the **Platforms (or Components)** tab. Select a simulator with the corresponding version of iOS you wish to use.
+
+If you are using Xcode version 14.0 or greater to install a simulator, open **Xcode > Settings > Platforms** tab, then click "+" icon and select **iOS…** option.
+
+#### CocoaPods
+
+[CocoaPods](https://cocoapods.org/) is one of the dependency management system available for iOS. CocoaPods is a Ruby [gem](https://en.wikipedia.org/wiki/RubyGems). You can install CocoaPods using the version of Ruby that ships with the latest version of macOS.
+
+For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
+
+### [Optional] Configuring your environment
+
+Starting from React Native version 0.69, it is possible to configure the Xcode environment using the `.xcode.env` file provided by the template.
+
+The `.xcode.env` file contains an environment variable to export the path to the `node` executable in the `NODE_BINARY` variable.
+This is the **suggested approach** to decouple the build infrastructure from the system version of `node`. You should customize this variable with your own path or your own `node` version manager, if it differs from the default.
+
+On top of this, it's possible to add any other environment variable and to source the `.xcode.env` file in your build script phases. If you need to run script that requires some specific environment, this is the **suggested approach**: it allows to decouple the build phases from a specific environment.
+
+:::info
+If you are already using [NVM](https://nvm.sh/) (a command which helps you install and switch between versions of Node.js) and [zsh](https://ohmyz.sh/), you might want to move the code that initialize NVM from your `~/.zshrc` into a `~/.zshenv` file to help Xcode find your Node executable:
+
+```zsh
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
+```
+
+You might also want to ensure that all "shell script build phase" of your Xcode project, is using `/bin/zsh` as its shell.
+:::
+
+
That's it!
+
+Congratulations! You successfully set up your development environment.
+
+
+
+
Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
diff --git a/website/versioned_docs/version-0.86/_getting-started-windows-android.md b/website/versioned_docs/version-0.86/_getting-started-windows-android.md
new file mode 100644
index 00000000000..c04c9b74c35
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_getting-started-windows-android.md
@@ -0,0 +1,146 @@
+
Installing dependencies
+
+You will need Node, the React Native command line interface, a JDK, and Android Studio.
+
+While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.
+
+
Node, JDK
+
+We recommend installing Node via [Chocolatey](https://chocolatey.org/install), a popular package manager for Windows.
+
+It is recommended to use an LTS version of Node. If you want to be able to switch between different versions, you might want to install Node via [nvm-windows](https://github.com/coreybutler/nvm-windows), a Node version manager for Windows.
+
+React Native also requires [Java SE Development Kit (JDK)](https://openjdk.java.net/projects/jdk/17/), which can be installed using Chocolatey as well.
+
+Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command:
+
+```powershell
+choco install -y nodejs-lts microsoft-openjdk17
+```
+
+If you have already installed Node on your system, make sure it is Node 22.11.0 or newer. If you already have a JDK on your system, we recommend JDK17. You may encounter problems using higher JDK versions.
+
+:::note
+You can find additional installation options on [Node's Downloads page](https://nodejs.org/en/download/).
+:::
+
+:::info
+If you're using the latest version of Java Development Kit, you'll need to change the Gradle version of your project so it can recognize the JDK. You can do that by going to `{project root folder}\android\gradle\wrapper\gradle-wrapper.properties` and changing the `distributionUrl` value to upgrade the Gradle version. You can check out [here the latest releases of Gradle](https://gradle.org/releases/).
+:::
+
+
Android development environment
+
+Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
+
+
1. Install Android Studio
+
+[Download and install Android Studio](https://developer.android.com/studio). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
+
+- `Android SDK`
+- `Android SDK Platform`
+- `Android Virtual Device`
+- If you are not already using Hyper-V: `Performance (Intel ® HAXM)` ([See here for AMD or Hyper-V](https://android-developers.googleblog.com/2018/07/android-emulator-amd-processor-hyper-v.html))
+
+Then, click "Next" to install all of these components.
+
+:::note
+If the checkboxes are grayed out, you will have a chance to install these components later on.
+:::
+
+Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
+
+
2. Install the Android SDK
+
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 15 (VanillaIceCream)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+
+To do that, open Android Studio, click on "More Actions" button and select "SDK Manager".
+
+
+
+:::tip
+The SDK Manager can also be found within the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.
+:::
+
+Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 15 (VanillaIceCream)` entry, then make sure the following items are checked:
+
+- `Android SDK Platform 35`
+- `Intel x86 Atom_64 System Image` or `Google APIs Intel x86 Atom System Image`
+
+Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the `Android SDK Build-Tools` entry, then make sure that `36.0.0` and `Android SDK Command-line Tools (latest)` are selected.
+
+Finally, click "Apply" to download and install the Android SDK and related build tools.
+
+
3. Configure the ANDROID_HOME environment variable
+
+The React Native tools require some environment variables to be set up in order to build apps with native code.
+
+1. Open the **Windows Control Panel.**
+2. Click on **User Accounts,** then click **User Accounts** again
+3. Click on **Change my environment variables**
+4. Click on **New...** to create a new `ANDROID_HOME` user variable that points to the path to your Android SDK:
+
+
+
+The SDK is installed, by default, at the following location:
+
+```powershell
+%LOCALAPPDATA%\Android\Sdk
+```
+
+You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**.
+
+Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.
+
+1. Open powershell
+2. Copy and paste **Get-ChildItem -Path Env:\\** into powershell
+3. Verify `ANDROID_HOME` has been added
+
+
4. Add platform-tools to Path
+
+1. Open the **Windows Control Panel.**
+2. Click on **User Accounts,** then click **User Accounts** again
+3. Click on **Change my environment variables**
+4. Select the **Path** variable.
+5. Click **Edit.**
+6. Click **New** and add the path to platform-tools to the list.
+
+The default location for this folder is:
+
+```powershell
+%LOCALAPPDATA%\Android\Sdk\platform-tools
+```
+
+
Preparing the Android device
+
+You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.
+
+Either way, you will need to prepare the device to run Android apps for development.
+
+
Using a physical device
+
+If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](running-on-device.md).
+
+
Using a virtual device
+
+If you use Android Studio to open `./AwesomeProject/android`, you can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:
+
+
+
+If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **VanillaIceCream** API Level 35 image.
+
+:::note
+If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager.
+:::
+
+Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it.
+
+
That's it!
+
+Congratulations! You successfully set up your development environment.
+
+
+
+
Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
diff --git a/website/versioned_docs/version-0.86/_integration-with-existing-apps-ios.md b/website/versioned_docs/version-0.86/_integration-with-existing-apps-ios.md
new file mode 100644
index 00000000000..4b95571538b
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_integration-with-existing-apps-ios.md
@@ -0,0 +1,655 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your iOS application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Podfile configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your iOS code using a `RCTRootView`.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal iOS app** and will help you understanding how to integrate React Native into an existing iOS app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS.
+This guide also assumes you're familiar with the basics of iOS development such as creating a `UIViewController` and editing the `Podfile` file.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing iOS project** to the `/ios` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+
+
+This will copy the `package.json` file from the Community template to your project.
+
+Next, install the NPM packages by running:
+
+
+
+
+```shell
+npm install
+```
+
+
+
+
+```shell
+yarn install
+```
+
+
+
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the Community default one).
+
+### 3. Install Development tools
+
+### Command Line Tools for Xcode
+
+Install the Command Line Tools. Choose **Settings... (or Preferences...)** in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
+
+
+
+### CocoaPods
+
+[CocoaPods](https://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
+
+We recommend installing CocoaPods using [Homebrew](https://brew.sh/):
+
+```shell
+brew install cocoapods
+```
+
+## 4. Adding React Native to your app
+
+### Configuring CocoaPods
+
+To configure CocoaPods, we need two files:
+
+- A **Gemfile** that defines which Ruby dependencies we need.
+- A **Podfile** that defines how to properly install our dependencies.
+
+For the **Gemfile**, go to the root directory of your project and run this command
+
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/Gemfile`}
+
+
+This will download the Gemfile from the template.
+
+:::note
+If you created your project with Xcode 16, you need to update the Gemfile as it follows:
+
+```diff
+-gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
++gem 'cocoapods', '1.16.2'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+-gem 'xcodeproj', '< 1.26.0'
++gem 'xcodeproj', '1.27.0'
+```
+
+Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.
+:::
+
+Similarly, for the **Podfile**, go to the `ios` folder of your project and run
+
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/ios/Podfile`}
+
+
+Please use the Community Template as a reference point for the Gemfile and for the Podfile.
+
+:::note
+Remember to change this line.
+:::
+
+Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
+Navigate to the `ios` folder and run the following commands:
+
+```sh
+bundle install
+bundle exec pod install
+```
+
+The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.
+
+## 5. Writing the TypeScript Code
+
+Now we will actually modify the native iOS application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our `index.js` should look as follows (here the Community template file as reference):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX]() expressions. It contains the root React Native component that we will integrate into our iOS application (link):
+
+```tsx
+import React from 'react';
+import {
+ SafeAreaView,
+ ScrollView,
+ StatusBar,
+ StyleSheet,
+ Text,
+ useColorScheme,
+ View,
+} from 'react-native';
+
+import {
+ Colors,
+ DebugInstructions,
+ Header,
+ ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): React.JSX.Element {
+ const isDarkMode = useColorScheme() === 'dark';
+
+ const backgroundStyle = {
+ backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+ };
+
+ return (
+
+
+
+
+
+ Step One
+
+ Edit App.tsx to
+ change this screen and see your edits.
+
+ See your changes
+
+ Debug
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ title: {
+ fontSize: 24,
+ fontWeight: '600',
+ },
+ bold: {
+ fontWeight: '700',
+ },
+});
+
+export default App;
+```
+
+Here is the Community template file as reference.
+
+## 5. Integrating with your iOS code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Requirements
+
+React Native initialization is now unbound to any specific part of an iOS app.
+
+React Native can be initialized using a class called `RCTReactNativeFactory`, that takes care of handling the React Native lifecycle for you.
+
+Once the class is initialized, you can either start a React Native view providing a `UIWindow` object, or you can ask for the factory to generate a `UIView` that you can load in any `UIViewController.`
+
+In the following example, we will create a ViewController that can load a React Native view as it's `view`.
+
+#### Create the ReactViewController
+
+Create a new file from template (⌘+N) and choose the Cocoa Touch Class template.
+
+Make sure to select `UIViewController` as the "Subclass of" field.
+
+
+
+
+Now open the `ReactViewController.m` file and apply the following changes
+
+```diff title="ReactViewController.m"
+#import "ReactViewController.h"
++#import
++#import
++#import
++#import
+
+
+@interface ReactViewController ()
+
+@end
+
++@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate
++@end
+
+-@implementation ReactViewController
++@implementation ReactViewController {
++ RCTReactNativeFactory *_factory;
++ id _factoryDelegate;
++}
+
+ - (void)viewDidLoad {
+ [super viewDidLoad];
+ // Do any additional setup after loading the view.
++ _factoryDelegate = [ReactNativeFactoryDelegate new];
++ _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
++ _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
++ self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
+ }
+
+@end
+
++@implementation ReactNativeFactoryDelegate
++
++- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
++{
++ return [self bundleURL];
++}
++
++- (NSURL *)bundleURL
++{
++#if DEBUG
++ return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];
++#else
++ return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];
++#endif
++}
+
+@end
+
+```
+
+
+
+
+Now open the `ReactViewController.swift` file and apply the following changes
+
+```diff title="ReactViewController.swift"
+import UIKit
++import React
++import React_RCTAppDelegate
++import ReactAppDependencyProvider
+
+class ReactViewController: UIViewController {
++ var reactNativeFactory: RCTReactNativeFactory?
++ var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
++ reactNativeFactoryDelegate = ReactNativeDelegate()
++ reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
++ reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
++ view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
+
+ }
+}
+
++class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
++ override func sourceURL(for bridge: RCTBridge) -> URL? {
++ self.bundleURL()
++ }
++
++ override func bundleURL() -> URL? {
++ #if DEBUG
++ RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
++ #else
++ Bundle.main.url(forResource: "main", withExtension: "jsbundle")
++ #endif
++ }
++
++}
+```
+
+
+
+
+#### Presenting a React Native view in a rootViewController
+
+Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
+We already have the initial `ViewController`, and we can make it present the `ReactViewController`. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.
+
+
+
+
+```diff title="ViewController.m"
+#import "ViewController.h"
++#import "ReactViewController.h"
+
+@interface ViewController ()
+
+@end
+
+- @implementation ViewController
++@implementation ViewController {
++ ReactViewController *reactViewController;
++}
+
+ - (void)viewDidLoad {
+ [super viewDidLoad];
+ // Do any additional setup after loading the view.
+ self.view.backgroundColor = UIColor.systemBackgroundColor;
++ UIButton *button = [UIButton new];
++ [button setTitle:@"Open React Native" forState:UIControlStateNormal];
++ [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];
++ [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];
++ [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];
++ [self.view addSubview:button];
+
++ button.translatesAutoresizingMaskIntoConstraints = NO;
++ [NSLayoutConstraint activateConstraints:@[
++ [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
++ [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
++ [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],
++ [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
++ ]];
+ }
+
++- (void)presentReactNative
++{
++ if (reactViewController == NULL) {
++ reactViewController = [ReactViewController new];
++ }
++ [self presentViewController:reactViewController animated:YES];
++}
+
+@end
+```
+
+
+
+
+```diff title="ViewController.swift"
+import UIKit
+
+class ViewController: UIViewController {
+
++ var reactViewController: ReactViewController?
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ // Do any additional setup after loading the view.
+ self.view.backgroundColor = .systemBackground
+
++ let button = UIButton()
++ button.setTitle("Open React Native", for: .normal)
++ button.setTitleColor(.systemBlue, for: .normal)
++ button.setTitleColor(.blue, for: .highlighted)
++ button.addAction(UIAction { [weak self] _ in
++ guard let self else { return }
++ if reactViewController == nil {
++ reactViewController = ReactViewController()
++ }
++ present(reactViewController!, animated: true)
++ }, for: .touchUpInside)
++ self.view.addSubview(button)
++
++ button.translatesAutoresizingMaskIntoConstraints = false
++ NSLayoutConstraint.activate([
++ button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
++ button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
++ button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
++ button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
++ ])
+ }
+}
+```
+
+
+
+
+Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the `User Script Sandboxing` to `NO`. This step is needed to properly switch between the Debug and Release version of the [Hermes engine](https://github.com/facebook/hermes/blob/main/README.md) that we ship with React Native.
+
+
+
+Finally, make sure to add the `UIViewControllerBasedStatusBarAppearance` key into your `Info.plist` file, with value of `NO`.
+
+
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the `metro.config.js` file from the Community template file as reference.
+
+Then, you need to create a `.watchmanconfig` file in the root of your project. The file must contain an empty json object:
+
+```sh
+echo {} > .watchmanconfig
+```
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+
+
+
+```shell
+npm start
+```
+
+
+
+
+```shell
+yarn start
+```
+
+
+
+
+Now build and run your iOS app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+
+
+### Creating a release build in Xcode
+
+You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.
+
+1. In Xcode, select your application
+2. Click on `Build Phases`
+3. Click on the `+` in the top left corner and select `New Run Script Phase`
+4. Click on the `Run Script` line and rename the Script to `Bundle React Native code and images`
+5. Paste in the text box the following script
+
+```sh title="Build React Native code and image"
+set -e
+
+WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
+REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
+
+/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+```
+
+6. Drag and drop the script before the one called `[CP] Embed Pods Frameworks`.
+
+Now, if you build your app for Release, it will work as expected.
+
+## 7. Passing initial props to the React Native view
+
+In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.
+
+This is possible by using the `initialProperties` parameter of the `view(withModuleName:initialProperty)` overload of the `RCTReactNativeFactory` class. The following steps shows you how to do it.
+
+### Update the App.tsx file to read the initial properties.
+
+Open the `App.tsx` file and add the following code:
+
+```diff title="App.tsx"
+import {
+ Colors,
+ DebugInstructions,
+ Header,
+ ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+-function App(): React.JSX.Element {
++function App(props): React.JSX.Element {
+ const isDarkMode = useColorScheme() === 'dark';
+
+ const backgroundStyle = {
+ backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+ };
+
+ return (
+
+
+
+
+-
+- Step One
+-
+- Edit App.tsx to
+- change this screen and see your edits.
+-
+- See your changes
+-
+- Debug
+-
++ UserID: {props.userID}
++ Token: {props.token}
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ title: {
+ fontSize: 24,
+ fontWeight: '600',
++ marginLeft: 20,
+ },
+ bold: {
+ fontWeight: '700',
+ },
+});
+
+export default App;
+```
+
+These changes will tell React Native that your App component is now accepting some properties. The `RCTreactNativeFactory` will take care of passing them to the component when it's rendered.
+
+### Update the Native code to pass the initial properties to JavaScript.
+
+
+
+
+Modify the `ReactViewController.mm` to pass the initial properties to JavaScript.
+
+```diff title="ReactViewController.mm"
+ - (void)viewDidLoad {
+ [super viewDidLoad];
+ // Do any additional setup after loading the view.
+
+ _factoryDelegate = [ReactNativeFactoryDelegate new];
+ _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
+ _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
+- self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
++ self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{
++ @"userID": @"12345678",
++ @"token": @"secretToken"
++ }];
+}
+```
+
+
+
+
+Modify the `ReactViewController.swift` to pass the initial properties to the React Native view.
+
+```diff title="ReactViewController.swift"
+ override func viewDidLoad() {
+ super.viewDidLoad()
+ reactNativeFactoryDelegate = ReactNativeDelegate()
+ reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
+ reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
+- view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
++ view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [
++ "userID": "12345678",
++ "token": "secretToken"
++])
+
+ }
+}
+```
+
+
+
+
+3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
+
+
+
+
+
+## Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.86/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.86/_integration-with-existing-apps-kotlin.md
new file mode 100644
index 00000000000..23414c63a3b
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_integration-with-existing-apps-kotlin.md
@@ -0,0 +1,511 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+import CodeBlock from '@theme/CodeBlock';
+import RNTemplateRepoLink from '@site/core/RNTemplateRepoLink';
+import {getTemplateBranchNameForCurrentVersion} from '@site/src/getTemplateBranchNameForCurrentVersion';
+
+## Key Concepts
+
+The keys to integrating React Native components into your Android application are to:
+
+1. Set up the correct directory structure.
+2. Install the necessary NPM dependencies.
+3. Adding React Native to your Gradle configuration.
+4. Writing the TypeScript code for your first React Native screen.
+5. Integrate React Native with your Android code using a ReactActivity.
+6. Testing your integration by running the bundler and seeing your app in action.
+
+## Using the Community Template
+
+While you follow this guide, we suggest you to use the [React Native Community Template](https://github.com/react-native-community/template/) as reference. The template contains a **minimal Android app** and will help you understanding how to integrate React Native into an existing Android app.
+
+## Prerequisites
+
+Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android.
+This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the `AndroidManifest.xml` file.
+
+## 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then **move your existing Android project** to the `/android` subfolder.
+
+## 2. Install NPM dependencies
+
+Go to the root directory and run the following command:
+
+
+{`curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/${getTemplateBranchNameForCurrentVersion()}/template/package.json`}
+
+
+This will copy the `package.json` file from the Community template to your project.
+
+Next, install the NPM packages by running:
+
+
+
+
+```shell
+npm install
+```
+
+
+
+
+```shell
+yarn install
+```
+
+
+
+
+Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.
+
+Add `node_modules/` to your `.gitignore` file (here the Community default one).
+
+## 3. Adding React Native to your app
+
+### Configuring Gradle
+
+React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.
+
+First, let's edit your `settings.gradle` file by adding those lines (as suggested from the Community template):
+
+```groovy
+// Configures the React Native Gradle Settings plugin used for autolinking
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+// If using .gradle.kts files:
+// extensions.configure { autolinkLibrariesFromCommand() }
+includeBuild("../node_modules/@react-native/gradle-plugin")
+
+// Include your existing Gradle modules here.
+// include(":app")
+```
+
+Then you need to open your top level `build.gradle` and include this line (as suggested from the Community template):
+
+```diff
+buildscript {
+ repositories {
+ google()
+ mavenCentral()
+ }
+ dependencies {
+ classpath("com.android.tools.build:gradle:7.3.1")
++ classpath("com.facebook.react:react-native-gradle-plugin")
+ }
+}
+```
+
+This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
+Finally, add those lines inside your Applications's `build.gradle` file (it's a different `build.gradle` file usually inside your `app` folder - you can use the Community template file as reference):
+
+```diff
+apply plugin: "com.android.application"
++apply plugin: "com.facebook.react"
+
+repositories {
+ mavenCentral()
+}
+
+dependencies {
+ // Other dependencies here
++ // Note: we intentionally don't specify the version number here as RNGP will take care of it.
++ // If you don't use the RNGP, you'll have to specify version manually.
++ implementation("com.facebook.react:react-android")
++ implementation("com.facebook.react:hermes-android")
+}
+
++react {
++ // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
++ autolinkLibrariesWithApp()
++}
+```
+
+Finally, open your application `gradle.properties` files and add the following line (here the Community template file as reference):
+
+```diff
++reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
++newArchEnabled=true
++hermesEnabled=true
+```
+
+### Configuring your manifest
+
+First, make sure you have the Internet permission in your `AndroidManifest.xml`:
+
+```diff
+
+
++
+
+
+
+
+```
+
+Then you need to enable [cleartext traffic](https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted) in your **debug** `AndroidManifest.xml`:
+
+```diff
+
+
+
+
+
+```
+
+As usual, here the AndroidManifest.xml file from the Community template to use as a reference: main and debug.
+
+This is needed as your application will communicate with your local bundler, [Metro](https://metrobundler.dev/), via HTTP.
+
+Make sure you add this only to your **debug** manifest.
+
+## 4. Writing the TypeScript Code
+
+Now we will actually modify the native Android application to integrate React Native.
+
+The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.
+
+### Create a `index.js` file
+
+First, create an empty `index.js` file in the root of your React Native project.
+
+`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.
+
+Our index.js should look as follows (here the Community template file as reference):
+
+```js
+import {AppRegistry} from 'react-native';
+import App from './App';
+
+AppRegistry.registerComponent('HelloWorld', () => App);
+```
+
+### Create a `App.tsx` file
+
+Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX]() expressions. It contains the root React Native component that we will integrate into our Android application (link):
+
+```tsx
+import React from 'react';
+import {
+ SafeAreaView,
+ ScrollView,
+ StatusBar,
+ StyleSheet,
+ Text,
+ useColorScheme,
+ View,
+} from 'react-native';
+
+import {
+ Colors,
+ DebugInstructions,
+ Header,
+ ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+function App(): React.JSX.Element {
+ const isDarkMode = useColorScheme() === 'dark';
+
+ const backgroundStyle = {
+ backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+ };
+
+ return (
+
+
+
+
+
+ Step One
+
+ Edit App.tsx to
+ change this screen and see your edits.
+
+ See your changes
+
+ Debug
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ title: {
+ fontSize: 24,
+ fontWeight: '600',
+ },
+ bold: {
+ fontWeight: '700',
+ },
+});
+
+export default App;
+```
+
+Here is the Community template file as reference.
+
+## 5. Integrating with your Android code
+
+We now need to add some native code in order to start the React Native runtime and tell it to render our React components.
+
+### Updating your Application class
+
+First, we need to update your `Application` class to properly initialize React Native as follows:
+
+
+
+
+
+```diff
+package ;
+
+import android.app.Application;
++import com.facebook.react.PackageList;
++import com.facebook.react.ReactApplication;
++import com.facebook.react.ReactHost;
++import com.facebook.react.ReactNativeHost;
++import com.facebook.react.ReactPackage;
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
++import com.facebook.react.defaults.DefaultReactHost;
++import com.facebook.react.defaults.DefaultReactNativeHost;
++import com.facebook.soloader.SoLoader;
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
++import java.util.List;
+
+-class MainApplication extends Application {
++class MainApplication extends Application implements ReactApplication {
++ @Override
++ public ReactNativeHost getReactNativeHost() {
++ return new DefaultReactNativeHost(this) {
++ @Override
++ protected List getPackages() { return new PackageList(this).getPackages(); }
++ @Override
++ protected String getJSMainModuleName() { return "index"; }
++ @Override
++ public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
++ @Override
++ protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
++ @Override
++ protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
++ };
++ }
+
++ @Override
++ public ReactHost getReactHost() {
++ return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
++ }
+
+ @Override
+ public void onCreate() {
+ super.onCreate();
++ SoLoader.init(this, OpenSourceMergedSoMapping);
++ if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++ DefaultNewArchitectureEntryPoint.load();
++ }
+ }
+}
+```
+
+
+
+
+
+```diff
+// package
+
+import android.app.Application
++import com.facebook.react.PackageList
++import com.facebook.react.ReactApplication
++import com.facebook.react.ReactHost
++import com.facebook.react.ReactNativeHost
++import com.facebook.react.ReactPackage
++import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
++import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
++import com.facebook.react.defaults.DefaultReactNativeHost
++import com.facebook.soloader.SoLoader
++import com.facebook.react.soloader.OpenSourceMergedSoMapping
+
+-class MainApplication : Application() {
++class MainApplication : Application(), ReactApplication {
+
++ override val reactNativeHost: ReactNativeHost =
++ object : DefaultReactNativeHost(this) {
++ override fun getPackages(): List = PackageList(this).packages
++ override fun getJSMainModuleName(): String = "index"
++ override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
++ override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
++ override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
++ }
+
++ override val reactHost: ReactHost
++ get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
+ override fun onCreate() {
+ super.onCreate()
++ SoLoader.init(this, OpenSourceMergedSoMapping)
++ if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
++ load()
++ }
+ }
+}
+```
+
+
+
+
+As usual, here the `MainApplication.kt` Community template file as reference.
+
+#### Creating a `ReactActivity`
+
+Finally, we need to create a new `Activity` that will extend `ReactActivity` and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.
+
+
+
+
+
+```java
+// package ;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+public class MyReactActivity extends ReactActivity {
+
+ @Override
+ protected String getMainComponentName() {
+ return "HelloWorld";
+ }
+
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
+ }
+}
+```
+
+
+
+
+
+```kotlin
+// package
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MyReactActivity : ReactActivity() {
+
+ override fun getMainComponentName(): String = "HelloWorld"
+
+ override fun createReactActivityDelegate(): ReactActivityDelegate =
+ DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}
+```
+
+
+
+
+As usual, here the `MainActivity.kt` Community template file as reference.
+
+Whenever you create a new Activity, you need to add it to your `AndroidManifest.xml` file. You also need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar` (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:
+
+```diff
+
+
+
+
+
+
++
++
+
+
+```
+
+Now your activity is ready to run some JavaScript code.
+
+## 6. Test your integration
+
+You have completed all the basic steps to integrate React Native with your application. Now we will start the [Metro bundler](https://metrobundler.dev/) to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from `localhost` on your developer environment to a simulator or device. This allows for [hot reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading).
+
+First, you need to create a `metro.config.js` file in the root of your project as follows:
+
+```js
+const {getDefaultConfig} = require('@react-native/metro-config');
+module.exports = getDefaultConfig(__dirname);
+```
+
+You can checkout the `metro.config.js` file from the Community template file as reference.
+
+Once you have the configuration file in place, you can run the bundler. Run the following command in the root directory of your project:
+
+
+
+
+```shell
+npm start
+```
+
+
+
+
+```shell
+yarn start
+```
+
+
+
+
+Now build and run your Android app as normal.
+
+Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
+
+
+
+### Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.
+
+The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.
+
+If you're not using Android Studio, you can create a release build with:
+
+```
+cd android
+# For a Release APK
+./gradlew :app:assembleRelease
+# For a Release AAB
+./gradlew :app:bundleRelease
+```
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native.
diff --git a/website/versioned_docs/version-0.86/_markdown-new-architecture-warning.mdx b/website/versioned_docs/version-0.86/_markdown-new-architecture-warning.mdx
new file mode 100644
index 00000000000..d52c490153b
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_markdown-new-architecture-warning.mdx
@@ -0,0 +1,7 @@
+:::caution
+
+This documentation is still **experimental** and details are subject to changes as we iterate. Feel free to share your feedback on the [discussion inside the working group](https://github.com/reactwg/react-native-new-architecture/discussions/8) for this page.
+
+Moreover, it contains several **manual steps**. Please note that this won't be representative of the final developer experience once the New Architecture is stable. We're working on tools, templates and libraries to help you get started fast on the New Architecture, without having to go through the whole setup.
+
+:::
diff --git a/website/versioned_docs/version-0.86/_remove-global-cli.md b/website/versioned_docs/version-0.86/_remove-global-cli.md
new file mode 100644
index 00000000000..022ba6de2f6
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_remove-global-cli.md
@@ -0,0 +1,8 @@
+:::warning
+If you previously installed a global `react-native-cli` package, please remove it as it may cause unexpected issues:
+
+```shell
+npm uninstall -g react-native-cli @react-native-community/cli
+```
+
+:::
diff --git a/website/versioned_docs/version-0.86/_turbo-native-modules-components.jsx b/website/versioned_docs/version-0.86/_turbo-native-modules-components.jsx
new file mode 100644
index 00000000000..1bb5a1b5edb
--- /dev/null
+++ b/website/versioned_docs/version-0.86/_turbo-native-modules-components.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import IOSContent from './turbo-native-modules-ios.md';
+import AndroidContent from './turbo-native-modules-android.md';
+
+export function TurboNativeModulesIOS() {
+ return ;
+}
+
+export function TurboNativeModulesAndroid() {
+ return ;
+}
diff --git a/website/versioned_docs/version-0.86/accessibility.md b/website/versioned_docs/version-0.86/accessibility.md
new file mode 100644
index 00000000000..e9f305964cc
--- /dev/null
+++ b/website/versioned_docs/version-0.86/accessibility.md
@@ -0,0 +1,607 @@
+---
+id: accessibility
+title: Accessibility
+description: Create mobile apps accessible to assistive technology with React Native's suite of APIs designed to work with Android and iOS.
+---
+
+import ExperimentalAPIWarning from './\_experimental-api-warning.mdx';
+
+Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and TalkBack (Android). React Native has complementary APIs that let your app accommodate all users.
+
+:::info
+Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+:::
+
+## Accessibility properties
+
+### `accessible`
+
+When `true`, indicates that the view is discoverable by assistive technologies such as screen readers and hardware keyboards. Note that this does not necessarily mean that the view will be focused by VoiceOver or TalkBack. There are a number of reasons for this, such as VoiceOver disallowing nested accessibility elements, or TalkBack opting to focus some parent element instead.
+
+By default, all touchable elements are accessible.
+
+On Android, `accessible` will be translated into native [`focusable`](). On iOS, it translates into native [`isAccessibilityElement`](https://developer.apple.com/documentation/uikit/uiaccessibilityelement/isaccessibilityelement?language=objc).
+
+```tsx
+
+
+
+
+```
+
+In the above example, accessibility focus is only available on the first child view with the `accessible` property, and not for the parent or sibling without `accessible`.
+
+### `accessibilityLabel`
+
+When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use VoiceOver or TalkBack know what element they have selected. A screen reader will verbalize this string when the associated element is selected.
+
+To use, set the `accessibilityLabel` property to a custom string on your View, Text, or Touchable:
+
+```tsx
+
+
+ Press me!
+
+
+```
+
+In the above example, the `accessibilityLabel` on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
+
+### `accessibilityLabelledBy`
Android
+
+A reference to another element [nativeID](view.md#nativeid) used to build complex forms.
+The value of `accessibilityLabelledBy` should match the `nativeID` of the related element:
+
+```tsx
+
+ Label for Input Field
+
+
+```
+
+In the above example, the screen reader announces `Input, Edit Box for Label for Input Field` when focusing on the TextInput.
+
+### `accessibilityHint`
+
+An accessibility hint can be used to provide additional context to the user on the result of the action when it is not clear from the accessibility label alone.
+
+Provide the `accessibilityHint` property a custom string on your View, Text, or Touchable:
+
+```tsx
+
+
+ Back
+
+
+```
+
+
iOS
+
+In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for `accessibilityHint` in the [iOS Developer Docs](https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint)
+
+
Android
+
+In the above example, TalkBack will read the hint after the label. At this time, hints cannot be turned off on Android.
+
+### `accessibilityLanguage`
iOS
+
+By using the `accessibilityLanguage` property, the screen reader will understand which language to use while reading the element's **label**, **value**, and **hint**. The provided string value must follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+```tsx
+
+ 🍕
+
+```
+
+### `accessibilityIgnoresInvertColors`
iOS
+
+Inverting screen colors is an accessibility feature available in iOS and iPadOS for people with color blindness, low vision, or vision impairment. If there's a view you don't want to invert when this setting is on, possibly a photo, set this property to `true`.
+
+### `accessibilityLiveRegion`
Android
+
+When components dynamically change, we want TalkBack to alert the end user. This is made possible by the `accessibilityLiveRegion` property. It can be set to `none`, `polite`, and `assertive`:
+
+- **none** Accessibility services should not announce changes to this view.
+- **polite** Accessibility services should announce changes to this view.
+- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+```tsx
+
+
+ Click me
+
+
+
+ Clicked {count} times
+
+```
+
+In the above example method `addOne` changes the state variable `count`. When the TouchableWithoutFeedback is triggered, TalkBack reads the text in the Text view because of its `accessibilityLiveRegion="polite"` property.
+
+### `accessibilityRole`
+
+`accessibilityRole` communicates the purpose of a component to the user of assistive technology.
+
+`accessibilityRole` can be one of the following:
+
+- **adjustable** Used when an element can be "adjusted" (e.g. a slider).
+- **alert** Used when an element contains important text to be presented to the user.
+- **button** Used when the element should be treated as a button.
+- **checkbox** Used when an element represents a checkbox that can be checked, unchecked, or have a mixed checked state.
+- **combobox** Used when an element represents a combo box, which allows the user to select among several choices.
+- **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
+- **image** Used when the element should be treated as an image. Can be combined with a button or link.
+- **imagebutton** Used when the element should be treated as a button and is also an image.
+- **keyboardkey** Used when the element acts as a keyboard key.
+- **link** Used when the element should be treated as a link.
+- **menu** Used when the component is a menu of choices.
+- **menubar** Used when a component is a container of multiple menus.
+- **menuitem** Used to represent an item within a menu.
+- **none** Used when the element has no role.
+- **progressbar** Used to represent a component that indicates the progress of a task.
+- **radio** Used to represent a radio button.
+- **radiogroup** Used to represent a group of radio buttons.
+- **scrollbar** Used to represent a scroll bar.
+- **search** Used when a text field element should also be treated as a search field.
+- **spinbutton** Used to represent a button that opens a list of choices.
+- **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.
+- **switch** Used to represent a switch that can be turned on and off.
+- **tab** Used to represent a tab.
+- **tablist** Used to represent a list of tabs.
+- **text** Used when the element should be treated as static text that cannot change.
+- **timer** Used to represent a timer.
+- **togglebutton** Used to represent a toggle button. Should be used with accessibilityState checked to indicate if the button is toggled on or off.
+- **toolbar** Used to represent a toolbar (a container of action buttons or components).
+- **grid** Used with ScrollView, VirtualizedList, FlatList, or SectionList to represent a grid. Adds the in/out of grid announcements to Android's GridView.
+
+### `accessibilityShowsLargeContentViewer`
iOS
+
+A boolean value that determines whether the large content viewer is shown when the user performs a long press on the element.
+
+Available in iOS 13.0 and later.
+
+### `accessibilityLargeContentTitle`
iOS
+
+A string that will be used as the title of the large content viewer when it is shown.
+
+Requires `accessibilityShowsLargeContentViewer` to be set to `true`.
+
+```tsx
+
+ Home
+
+```
+
+### `accessibilityState`
+
+Describes the current state of a component to the assistive technology user.
+
+`accessibilityState` is an object. It contains the following fields:
+
+| Name | Description | Type | Required |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------- |
+| disabled | Indicates whether the element is disabled or not. | boolean | No |
+| selected | Indicates whether a selectable element is currently selected or not. | boolean | No |
+| checked | Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes. | boolean or 'mixed' | No |
+| busy | Indicates whether an element is currently busy or not. | boolean | No |
+| expanded | Indicates whether an expandable element is currently expanded or collapsed. | boolean | No |
+
+To use, set the `accessibilityState` to an object with a specific definition.
+
+### `accessibilityValue`
+
+Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
+
+`accessibilityValue` is an object. It contains the following fields:
+
+| Name | Description | Type | Required |
+| ---- | ---------------------------------------------------------------------------------------------- | ------- | ------------------------- |
+| min | The minimum value of this component's range. | integer | Required if `now` is set. |
+| max | The maximum value of this component's range. | integer | Required if `now` is set. |
+| now | The current value of this component's range. | integer | No |
+| text | A textual description of this component's value. Will override `min`, `now`, and `max` if set. | string | No |
+
+### `accessibilityViewIsModal`
iOS
+
+A boolean value that indicates whether VoiceOver should ignore the elements within views that are siblings of the receiver.
+
+For example, in a window that contains sibling views `A` and `B`, setting `accessibilityViewIsModal` to `true` on view `B` causes VoiceOver to ignore the elements in view `A`. On the other hand, if view `B` contains a child view `C` and you set `accessibilityViewIsModal` to `true` on view `C`, VoiceOver does not ignore the elements in view `A`.
+
+### `accessibilityElementsHidden`
iOS
+
+A boolean value indicating whether the given accessibility element, and any accessibility elements it contains, are hidden.
+
+For example, in a window that contains sibling views `A` and `B`, setting `accessibilityElementsHidden` to `true` on view `B` causes VoiceOver to ignore the `B` view and any elements it contains. This is similar to the Android property `importantForAccessibility="no-hide-descendants"`.
+
+### `aria-valuemax`
+
+Represents the maximum value for range-based components, such as sliders and progress bars.
+
+### `aria-valuemin`
+
+Represents the minimum value for range-based components, such as sliders and progress bars.
+
+### `aria-valuenow`
+
+Represents the current value for range-based components, such as sliders and progress bars.
+
+### `aria-valuetext`
+
+Represents the textual description of the component.
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false |
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+### `aria-hidden`
+
+Indicates whether the element is hidden from assistive technologies.
+
+For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the `B` element and its children.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+### `aria-label`
+
+Defines a string value that can be used to name an element.
+
+| Type |
+| ------ |
+| string |
+
+### `aria-labelledby`
Android
+
+Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the [`nativeID`](view.md#nativeid) of the related element:
+
+```tsx
+
+ Label for Input Field
+
+
+```
+
+| Type |
+| ------ |
+| string |
+
+### `aria-live`
Android
+
+Indicates that an element will be updated and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
+
+- **off** Accessibility services should not announce changes to this view.
+- **polite** Accessibility services should announce changes to this view.
+- **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+| Type | Default |
+| ---------------------------------------- | ------- |
+| enum(`'assertive'`, `'off'`, `'polite'`) | `'off'` |
+
+---
+
+### `aria-modal`
iOS
+
+Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type |
+| ------- |
+| boolean |
+
+### `experimental_accessibilityOrder`
+
+
+
+:::note
+For the sake of brevity, layout is excluded in the following examples even though it dictates the default focus order. Assume the document order matches the layout order.
+:::
+
+`experimental_accessibilityOrder` lets you define the order in which assistive technologies focus descendant components. It is an array of [`nativeIDs`](view.md#nativeid) that are set on the components whose order you are controlling. For example:
+
+```
+
+
+
+
+
+```
+
+Assistive technologies will focus the `View` with `nativeID` of `B`, then `C`, then `A`.
+
+`experimental_accessibilityOrder` will not “turn on” accessibility for the components it references, that still needs to be done. So if we remove `accessible={true}` on `C` above like so
+
+```
+
+
+
+
+
+```
+
+then the new order will be `B` then `A`, even though `C` is still in `experimental_accessibilityOrder`.
+
+`experimental_accessibilityOrder` will “turn off” accessibility of components it doesn’t reference, however.
+
+```
+
+
+
+
+
+
+```
+
+The order of the above example would be `B`, `C`, `A`. `D` will never get focused. In this sense `experimental_accessibilityOrder` is _exhaustive_.
+
+There are still valid reasons to include an non-accessible component in `experimental_accessibilityOrder`. Consider
+
+```
+
+
+
+
+
+
+
+
+
+```
+
+The focus order will be `B`, `D`, `E`, `F`, `A`. Even though `D`, `E`, and `F` are not directly referenced in `experimental_accessibilityOrder`, `C` is directly referenced. In this instance `C` in an _accessibility container_ - it contains accessible elements, but is not accessible itself. If an accessibility container is referenced in `experimental_accessibilityOrder` then the default order of the elements it contains is applied. In this sense `experimental_accessibilityOrder` is _nestable_.
+
+`experimental_accessibilityOrder` can also reference another component with `experimental_accessibilityOrder`
+
+```
+
+
+
+
+
+
+
+
+
+```
+
+The focus order will be `B`, `F`, `E`, `D`, `A`.
+
+A component cannot be both an accessibility container and an accessibility element (`accessible={true}`). So if we have
+
+```
+
+
+
+
+
+
+
+
+
+```
+
+The focus order would be `B`, `C`, `A`. `D`, `E`, and `F` are no longer in a container, so the exhaustive nature of `experimental_accessibilityOrder` means they will be excluded.
+
+### `importantForAccessibility`
Android
+
+In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The `importantForAccessibility` property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to `auto`, `yes`, `no` and `no-hide-descendants` (the last value will force accessibility services to ignore the component and all of its children).
+
+```tsx
+
+
+ First layout
+
+
+ Second layout
+
+
+```
+
+In the above example, the `yellow` layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
+### `onAccessibilityEscape`
iOS
+
+Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
+
+### `onAccessibilityTap`
iOS
+
+Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
+
+### `onMagicTap`
iOS
+
+Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call or ends the current one. If the selected element does not have an `onMagicTap` function, the system will traverse up the view hierarchy until it finds a view that does.
+
+### `role`
+
+`role` communicates the purpose of a component and has precedence over the [`accessibilityRole`](accessibility#accessibilityrole) prop.
+
+`role` can be one of the following:
+
+- **alert** Used when an element contains important text to be presented to the user.
+- **button** Used when the element should be treated as a button.
+- **checkbox** Used when an element represents a checkbox that can be checked, unchecked, or have a mixed checked state.
+- **combobox** Used when an element represents a combo box, which allows the user to select among several choices.
+- **grid** Used with ScrollView, VirtualizedList, FlatList, or SectionList to represent a grid. Adds the in/out of grid announcements to the android GridView.
+- **heading** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
+- **img** Used when the element should be treated as an image. Can be combined with a button or link, for example.
+- **link** Used when the element should be treated as a link.
+- **list** Used to identify a list of items.
+- **listitem** Used to itentify an item in a list.
+- **menu** Used when the component is a menu of choices.
+- **menubar** Used when a component is a container of multiple menus.
+- **menuitem** Used to represent an item within a menu.
+- **none** Used when the element has no role.
+- **presentation** Used when the element has no role.
+- **progressbar** Used to represent a component that indicates the progress of a task.
+- **radio** Used to represent a radio button.
+- **radiogroup** Used to represent a group of radio buttons.
+- **scrollbar** Used to represent a scroll bar.
+- **searchbox** Used when the text field element should also be treated as a search field.
+- **slider** Used when an element can be "adjusted" (e.g. a slider).
+- **spinbutton** Used to represent a button that opens a list of choices.
+- **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.
+- **switch** Used to represent a switch that can be turned on and off.
+- **tab** Used to represent a tab.
+- **tablist** Used to represent a list of tabs.
+- **timer** Used to represent a timer.
+- **toolbar** Used to represent a toolbar (a container of action buttons or components).
+
+## Accessibility Actions
+
+Accessibility actions allow assistive technology to programmatically invoke the action(s) of a component. To support accessibility actions, a component must do two things:
+
+- Define the list of actions it supports via the `accessibilityActions` property.
+- Implement an `onAccessibilityAction` function to handle action requests.
+
+The `accessibilityActions` property should contain a list of action objects. Each action object should contain the following fields:
+
+| Name | Type | Required |
+| ----- | ------ | -------- |
+| name | string | Yes |
+| label | string | No |
+
+Actions either represent standard actions, such as clicking a button or adjusting a slider, or custom actions specific to a given component such as deleting an email message. The `name` field is required for both standard and custom actions, but `label` is optional for standard actions.
+
+When adding support for standard actions, `name` must be one of the following:
+
+- `'magicTap'` - iOS only - While VoiceOver focus is on or inside the component, the user double tapped with two fingers.
+- `'escape'` - iOS only - While VoiceOver focus is on or inside the component, the user performed a two-finger scrub gesture (left, right, left).
+- `'activate'` - Activate the component. This should perform the same action with, or without, assistive technology. Engaged when a screen reader user double taps the component.
+- `'increment'` - Increment an adjustable component. On iOS, VoiceOver generates this action when the component has a role of `'adjustable'` and the user places focus on it and swipes upward. On Android, TalkBack generates this action when the user places accessibility focus on the component and presses the volume-up button.
+- `'decrement'` - Decrement an adjustable component. On iOS, VoiceOver generates this action when the component has a role of `'adjustable'` and the user places focus on it and swipes downward. On Android, TalkBack generates this action when the user places accessibility focus on the component and presses the volume-down button.
+- `'longpress'` - Android only - This action is generated when the user places accessibility focus on the component, then double-taps and holds one finger on the screen. This should perform the same action with, or without, assistive technology.
+- `'expand'` - Android only - This action "expands" the component so that TalkBack will announce an "expanded" hint.
+- `'collapse'` - Android only - This action "collapses" the component so that TalkBack will announce a "collapsed" hint.
+
+The `label` field is optional for standard actions and is often unused by assistive technologies. For custom actions, it is a localized string containing a description of the action to be presented to the user.
+
+To handle action requests, a component must implement an `onAccessibilityAction` function. The only argument to this function is an event containing the name of the action to perform. The below example from RNTester shows how to create a component that defines and handles several custom actions.
+
+```tsx
+ {
+ switch (event.nativeEvent.actionName) {
+ case 'cut':
+ Alert.alert('Alert', 'cut action success');
+ break;
+ case 'copy':
+ Alert.alert('Alert', 'copy action success');
+ break;
+ case 'paste':
+ Alert.alert('Alert', 'paste action success');
+ break;
+ }
+ }}
+/>
+```
+
+## Checking if a Screen Reader is Enabled
+
+The `AccessibilityInfo` API allows you to determine whether or not a screen reader is currently active. See the [AccessibilityInfo documentation](accessibilityinfo) for details.
+
+## Sending Accessibility Events
Android
+
+Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: a view tag and a type of event. The supported event types are `typeWindowStateChanged`, `typeViewFocused`, and `typeViewClicked`.
+
+```tsx
+import {Platform, UIManager, findNodeHandle} from 'react-native';
+
+if (Platform.OS === 'android') {
+ UIManager.sendAccessibilityEvent(
+ findNodeHandle(this),
+ UIManager.AccessibilityEventTypes.typeViewFocused,
+ );
+}
+```
+
+## Testing TalkBack Support
Android
+
+To enable TalkBack, go to the Settings app on your Android device or emulator. Tap Accessibility, then TalkBack. Toggle the "Use service" switch to enable or disable it.
+
+Android emulators don't have TalkBack installed by default. You can install TalkBack on your emulator via the Google Play Store. Make sure to choose an emulator with the Google Play store installed. These are available in Android Studio.
+
+You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on the volume key shortcut.
+
+To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
+
+Additionally, if you prefer, you can toggle TalkBack via the command line with:
+
+```shell
+# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+```
+
+## Testing VoiceOver Support
iOS
+
+To enable VoiceOver on your iOS or iPadOS device, go to the Settings app, tap General, then Accessibility. There you will find many tools available for people to enable their devices to be more usable, including VoiceOver. To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.
+
+At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple-clicking the Home button.
+
+VoiceOver isn't available via the simulator, but you can use Accessibility Inspector from Xcode to use the macOS VoiceOver through an application. Note it's always best to test with a device as macOS's VoiceOver may result in varied experiences.
+
+## Additional Resources
+
+- [Making React Native Apps Accessible](https://engineering.fb.com/ios/making-react-native-apps-accessible/)
diff --git a/website/versioned_docs/version-0.86/accessibilityinfo.md b/website/versioned_docs/version-0.86/accessibilityinfo.md
new file mode 100644
index 00000000000..af69fbcfec3
--- /dev/null
+++ b/website/versioned_docs/version-0.86/accessibilityinfo.md
@@ -0,0 +1,292 @@
+---
+id: accessibilityinfo
+title: AccessibilityInfo
+---
+
+Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
+
+## Example
+
+```SnackPlayer name=AccessibilityInfo%20Example&supportedPlatforms=android,ios
+import React, {useState, useEffect} from 'react';
+import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+ const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+ const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+
+ useEffect(() => {
+ const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
+ 'reduceMotionChanged',
+ isReduceMotionEnabled => {
+ setReduceMotionEnabled(isReduceMotionEnabled);
+ },
+ );
+ const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
+ 'screenReaderChanged',
+ isScreenReaderEnabled => {
+ setScreenReaderEnabled(isScreenReaderEnabled);
+ },
+ );
+
+ AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
+ setReduceMotionEnabled(isReduceMotionEnabled);
+ });
+ AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
+ setScreenReaderEnabled(isScreenReaderEnabled);
+ });
+
+ return () => {
+ reduceMotionChangedSubscription.remove();
+ screenReaderChangedSubscription.remove();
+ };
+ }, []);
+
+ return (
+
+
+
+ The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
+
+
+ The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ status: {
+ margin: 30,
+ },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+ eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
+ handler: (
+ event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
+ ) => void,
+): EmitterSubscription;
+```
+
+Add an event handler. Supported events:
+
+| Event name | Description |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `accessibilityServiceChanged`
Android
| Fires when some services such as TalkBack, other Android assistive technologies, and third-party accessibility services are enabled. The argument to the event handler is a boolean. The boolean is `true` when a some accessibility services is enabled and `false` otherwise. |
+| `announcementFinished`
iOS
| Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:
`announcement`: The string announced by the screen reader.
`success`: A boolean indicating whether the announcement was successfully made.
|
+| `boldTextChanged`
iOS
| Fires when the state of the bold text toggle changes. The argument to the event handler is a boolean. The boolean is `true` when bold text is enabled and `false` otherwise. |
+| `grayscaleChanged`
iOS
| Fires when the state of the gray scale toggle changes. The argument to the event handler is a boolean. The boolean is `true` when a gray scale is enabled and `false` otherwise. |
+| `invertColorsChanged`
iOS
| Fires when the state of the invert colors toggle changes. The argument to the event handler is a boolean. The boolean is `true` when invert colors is enabled and `false` otherwise. |
+| `reduceMotionChanged` | Fires when the state of the reduce motion toggle changes. The argument to the event handler is a boolean. The boolean is `true` when a reduce motion is enabled (or when "Transition Animation Scale" in "Developer options" is "Animation off") and `false` otherwise. |
+| `reduceTransparencyChanged`
iOS
| Fires when the state of the reduce transparency toggle changes. The argument to the event handler is a boolean. The boolean is `true` when reduce transparency is enabled and `false` otherwise. |
+| `screenReaderChanged` | Fires when the state of the screen reader changes. The argument to the event handler is a boolean. The boolean is `true` when a screen reader is enabled and `false` otherwise. |
+
+---
+
+### `announceForAccessibility()`
+
+```tsx
+static announceForAccessibility(announcement: string);
+```
+
+Post a string to be announced by the screen reader.
+
+---
+
+### `announceForAccessibilityWithOptions()`
+
+```tsx
+static announceForAccessibilityWithOptions(
+ announcement: string,
+ options: {queue?: boolean},
+);
+```
+
+Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting `queue` to `true` in the options object.
+
+**Parameters:**
+
+| Name | Type | Description |
+| ----------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| announcement
Required
| string | The string to be announced |
+| options
+
+```tsx
+static getRecommendedTimeoutMillis(originalTimeout: number): Promise;
+```
+
+Gets the timeout in millisecond that the user needs.
+This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.
+
+**Parameters:**
+
+| Name | Type | Description |
+| -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
+| originalTimeout
Required
| number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
+
+---
+
+### `isAccessibilityServiceEnabled()`
Android
+
+```tsx
+static isAccessibilityServiceEnabled(): Promise;
+```
+
+Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.
+
+:::note
+Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
+:::
+
+---
+
+### `isBoldTextEnabled()`
iOS
+
+```tsx
+static isBoldTextEnabled(): Promise:
+```
+
+Query whether a bold text is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when bold text is enabled and `false` otherwise.
+
+---
+
+### `isGrayscaleEnabled()`
iOS
+
+```tsx
+static isGrayscaleEnabled(): Promise;
+```
+
+Query whether grayscale is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when grayscale is enabled and `false` otherwise.
+
+---
+
+### `isInvertColorsEnabled()`
iOS
+
+```tsx
+static isInvertColorsEnabled(): Promise;
+```
+
+Query whether invert colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when invert colors is enabled and `false` otherwise.
+
+---
+
+### `isReduceMotionEnabled()`
+
+```tsx
+static isReduceMotionEnabled(): Promise;
+```
+
+Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise.
+
+---
+
+### `isReduceTransparencyEnabled()`
iOS
+
+```tsx
+static isReduceTransparencyEnabled(): Promise;
+```
+
+Query whether reduce transparency is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a reduce transparency is enabled and `false` otherwise.
+
+---
+
+### `isScreenReaderEnabled()`
+
+```tsx
+static isScreenReaderEnabled(): Promise;
+```
+
+Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise.
+
+---
+
+### `isHighTextContrastEnabled()`
Android
+
+```tsx
+static isHighTextContrastEnabled(): Promise
+```
+
+Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when high text contrast is enabled and `false` otherwise.
+
+---
+
+### `isDarkerSystemColorsEnabled()`
iOS
+
+```tsx
+static isDarkerSystemColorsEnabled(): Promise
+```
+
+Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when dark system colors is enabled and `false` otherwise.
+
+---
+
+### `prefersCrossFadeTransitions()`
iOS
+
+```tsx
+static prefersCrossFadeTransitions(): Promise;
+```
+
+Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is `true` when prefer cross-fade transitions is enabled and `false` otherwise.
+
+---
+
+### 🗑️ `setAccessibilityFocus()`
+
+:::warning Deprecated
+Prefer using `sendAccessibilityEvent` with eventType `focus` instead.
+:::
+
+```tsx
+static setAccessibilityFocus(reactTag: number);
+```
+
+Set accessibility focus to a React component.
+
+On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+---
+
+### `sendAccessibilityEvent()`
+
+```tsx
+static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);
+```
+
+Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.
+
+:::note
+Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
+:::
+
+| Name | Type | Description |
+| -------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| host
Required
| HostInstance | The component ref to send the event to. |
+| eventType
Required
| AccessibilityEventTypes | One of `'click'` (Android only), `'focus'`, `'viewHoverEnter'` (Android only), or `'windowStateChange'` (Android only) |
diff --git a/website/versioned_docs/version-0.86/actionsheetios.md b/website/versioned_docs/version-0.86/actionsheetios.md
new file mode 100644
index 00000000000..30d1d6afea5
--- /dev/null
+++ b/website/versioned_docs/version-0.86/actionsheetios.md
@@ -0,0 +1,144 @@
+---
+id: actionsheetios
+title: ActionSheetIOS
+---
+
+Displays native to iOS [Action Sheet](https://developer.apple.com/design/human-interface-guidelines/action-sheets) component.
+
+## Example
+
+```SnackPlayer name=ActionSheetIOS%20Example&supportedPlatforms=ios
+import React, {useState} from 'react';
+import {ActionSheetIOS, Button, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+ const [result, setResult] = useState('🔮');
+
+ const onPress = () =>
+ ActionSheetIOS.showActionSheetWithOptions(
+ {
+ options: ['Cancel', 'Generate number', 'Reset'],
+ destructiveButtonIndex: 2,
+ cancelButtonIndex: 0,
+ userInterfaceStyle: 'dark',
+ },
+ buttonIndex => {
+ if (buttonIndex === 0) {
+ // cancel action
+ } else if (buttonIndex === 1) {
+ setResult(String(Math.floor(Math.random() * 100) + 1));
+ } else if (buttonIndex === 2) {
+ setResult('🔮');
+ }
+ },
+ );
+
+ return (
+
+
+ {result}
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ },
+ result: {
+ fontSize: 64,
+ textAlign: 'center',
+ },
+});
+
+export default App;
+```
+
+# Reference
+
+## Methods
+
+### `showActionSheetWithOptions()`
+
+```tsx
+static showActionSheetWithOptions: (
+ options: ActionSheetIOSOptions,
+ callback: (buttonIndex: number) => void,
+);
+```
+
+Display an iOS action sheet. The `options` object must contain one or more of:
+
+- `options` (array of strings) - a list of button titles (required)
+- `cancelButtonIndex` (int) - index of cancel button in `options`
+- `cancelButtonTintColor` (string) - the [color](colors) used for the change the text color of the cancel button
+- `destructiveButtonIndex` (int or array of ints) - indices of destructive buttons in `options`
+- `title` (string) - a title to show above the action sheet
+- `message` (string) - a message to show below the title
+- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad)
+- `tintColor` (string) - the [color](colors) used for non-destructive button titles
+- `disabledButtonIndices` (array of numbers) - a list of button indices which should be disabled
+- `userInterfaceStyle` (string) - the interface style used for the action sheet, can be set to `light` or `dark`, otherwise the default system style will be used
+
+The 'callback' function takes one parameter, the zero-based index of the selected item.
+
+Minimal example:
+
+```tsx
+ActionSheetIOS.showActionSheetWithOptions(
+ {
+ options: ['Cancel', 'Remove'],
+ destructiveButtonIndex: 1,
+ cancelButtonIndex: 0,
+ },
+ buttonIndex => {
+ if (buttonIndex === 1) {
+ /* destructive action */
+ }
+ },
+);
+```
+
+---
+
+### `dismissActionSheet()`
+
+```tsx
+static dismissActionSheet();
+```
+
+Dismisses the most upper iOS action sheet presented, if no action sheet is present a warning is displayed.
+
+---
+
+### `showShareActionSheetWithOptions()`
+
+```tsx
+static showShareActionSheetWithOptions: (
+ options: ShareActionSheetIOSOptions,
+ failureCallback: (error: Error) => void,
+ successCallback: (success: boolean, method: string) => void,
+);
+```
+
+Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`:
+
+- `url` (string) - a URL to share
+- `message` (string) - a message to share
+- `subject` (string) - a subject for the message
+- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
+
+:::note
+If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
+:::
+
+The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.
+
+The 'successCallback' function takes two parameters:
+
+- a boolean value signifying success or failure
+- a string that, in the case of success, indicates the method of sharing
diff --git a/website/versioned_docs/version-0.86/activityindicator.md b/website/versioned_docs/version-0.86/activityindicator.md
new file mode 100644
index 00000000000..c9d03b73021
--- /dev/null
+++ b/website/versioned_docs/version-0.86/activityindicator.md
@@ -0,0 +1,93 @@
+---
+id: activityindicator
+title: ActivityIndicator
+---
+
+Displays a circular loading indicator.
+
+## Example
+
+```SnackPlayer name=ActivityIndicator%20Example
+import React from 'react';
+import {ActivityIndicator, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => (
+
+
+
+
+
+
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ },
+ horizontal: {
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ padding: 10,
+ },
+});
+
+export default App;
+```
+
+# Reference
+
+## Props
+
+### [View Props](view#props)
+
+Inherits [View Props](view#props).
+
+---
+
+### `animating`
+
+Whether to show the indicator (`true`) or hide it (`false`).
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true` |
+
+---
+
+### `color`
+
+The foreground color of the spinner.
+
+| Type | Default |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [color](colors) | `null` (system accent default color)
Android
`'#999999'`
iOS
|
+
+---
+
+### `hidesWhenStopped`
iOS
+
+Whether the indicator should hide when not animating.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `true` |
+
+---
+
+### `ref`
+
+A ref setter that will be assigned an [element node](element-nodes) when mounted.
+
+---
+
+### `size`
+
+Size of the indicator.
+
+| Type | Default |
+| ---------------------------------------------------------------------------------- | --------- |
+| enum(`'small'`, `'large'`)number
Android
| `'small'` |
diff --git a/website/versioned_docs/version-0.86/alert.md b/website/versioned_docs/version-0.86/alert.md
new file mode 100644
index 00000000000..c80b62fb7a6
--- /dev/null
+++ b/website/versioned_docs/version-0.86/alert.md
@@ -0,0 +1,254 @@
+---
+id: alert
+title: Alert
+---
+
+Launches an alert dialog with the specified title and message.
+
+Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.
+
+This is an API that works both on Android and iOS and can show static alerts. Alert that prompts the user to enter some information is available on iOS only.
+
+## Example
+
+```SnackPlayer name=Alert%20Example&supportedPlatforms=ios,android
+import React from 'react';
+import {StyleSheet, Button, Alert} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+ const createTwoButtonAlert = () =>
+ Alert.alert('Alert Title', 'My Alert Msg', [
+ {
+ text: 'Cancel',
+ onPress: () => console.log('Cancel Pressed'),
+ style: 'cancel',
+ },
+ {text: 'OK', onPress: () => console.log('OK Pressed')},
+ ]);
+
+ const createThreeButtonAlert = () =>
+ Alert.alert('Alert Title', 'My Alert Msg', [
+ {
+ text: 'Ask me later',
+ onPress: () => console.log('Ask me later pressed'),
+ },
+ {
+ text: 'Cancel',
+ onPress: () => console.log('Cancel Pressed'),
+ style: 'cancel',
+ },
+ {text: 'OK', onPress: () => console.log('OK Pressed')},
+ ]);
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'space-around',
+ alignItems: 'center',
+ },
+});
+
+export default App;
+```
+
+## iOS
+
+On iOS you can specify any number of buttons. Each button can optionally specify a style or be emphasized, available options are represented by the [AlertButtonStyle](#alertbuttonstyle-ios) enum and the `isPreferred` field on [AlertButton](alert#alertbutton).
+
+## Android
+
+On Android at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:
+
+- If you specify one button, it will be the 'positive' one (such as 'OK')
+- Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
+- Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
+
+Alerts on Android can be dismissed by tapping outside of the alert box. It is disabled by default and can be enabled by providing an optional [AlertOptions](alert#alertoptions) parameter with the cancelable property set to `true` i.e. `{cancelable: true}`.
+
+The cancel event can be handled by providing an `onDismiss` callback property inside the `options` parameter.
+
+### Example
| string | The dialog's title. Passing `null` or empty string will hide the title. |
+| message | string | An optional message that appears below the dialog's title. |
+| buttons | [AlertButton](alert#alertbutton)[] | An optional array containing buttons configuration. |
+| options | [AlertOptions](alert#alertoptions) | An optional Alert configuration. |
+
+---
+
+### `prompt()`
iOS
+
+```tsx
+static prompt: (
+ title: string,
+ message?: string,
+ callbackOrButtons?: ((text: string) => void) | AlertButton[],
+ type?: AlertType,
+ defaultValue?: string,
+ keyboardType?: string,
+);
+```
+
+Create and display a prompt to enter some text in form of Alert.
+
+**Parameters:**
+
+| Name | Type | Description |
+| ---------------------------------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title
Required
| string | The dialog's title. |
+| message | string | An optional message that appears above the text input. |
+| callbackOrButtons | function[AlertButton](alert#alertButton)[] | If passed a function, it will be called with the prompt's value `(text: string) => void`, when the user taps 'OK'.If passed an array, buttons will be configured based on the array content. |
+| type | [AlertType](alert#alerttype-ios) | This configures the text input. |
+| defaultValue | string | The default text in text input. |
+| keyboardType | string | The keyboard type of first text field (if exists). One of TextInput [keyboardTypes](textinput#keyboardtype). |
+| options | [AlertOptions](alert#alertoptions) | An optional Alert configuration. |
+
+---
+
+## Type Definitions
+
+### AlertButtonStyle
+
+An iOS Alert type.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value | Description |
+| ------------------ | ---------------------------- |
+| `'default'` | Default alert with no inputs |
+| `'plain-text'` | Plain text input alert |
+| `'secure-text'` | Secure text input alert |
+| `'login-password'` | Login and password alert |
+
+---
+
+### AlertButton
+
+An object describing the configuration of a button in the alert.
+
+| Type |
+| ---------------- |
+| array of objects |
+
+**Objects properties:**
+
+| Name | Type | Description |
+| ------------------------------------------------ | ---------------------------------------------- | ------------------------------------------------------------------------------ |
+| text | string | Button label. |
+| onPress | function | Callback function when button is pressed. |
+| style
iOS
| [AlertButtonStyle](alert#alertbuttonstyle-ios) | Button style, on Android this property will be ignored. |
+| isPreferred
iOS
| boolean | Whether button should be emphasized, on Android this property will be ignored. |
+
+---
+
+### AlertOptions
+
+| Type |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name | Type | Description |
+| ------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
+| cancelable
Android
| boolean | Defines if alert can be dismissed by tapping outside of the alert box. |
+| userInterfaceStyle
iOS
| string | The interface style used for the alert, can be set to `light` or `dark`, otherwise the default system style will be used. |
+| onDismiss
Android
| function | Callback function fired when alert has been dismissed. |
diff --git a/website/versioned_docs/version-0.86/alertios.md b/website/versioned_docs/version-0.86/alertios.md
new file mode 100644
index 00000000000..a2d6d4f2610
--- /dev/null
+++ b/website/versioned_docs/version-0.86/alertios.md
@@ -0,0 +1,8 @@
+---
+id: alertios
+title: '❌ AlertIOS'
+---
+
+:::danger[Removed from React Native]
+Use [`Alert`](alert) instead.
+:::
diff --git a/website/versioned_docs/version-0.86/animated.md b/website/versioned_docs/version-0.86/animated.md
new file mode 100644
index 00000000000..d4ba867028b
--- /dev/null
+++ b/website/versioned_docs/version-0.86/animated.md
@@ -0,0 +1,541 @@
+---
+id: animated
+title: Animated
+---
+
+The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
+
+The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`.
+
+:::note
+Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle.
+:::
+
+## Example
+
+The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
+
+```SnackPlayer name=Animated%20Example
+import React from 'react';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+import {
+ Animated,
+ Text,
+ View,
+ StyleSheet,
+ Button,
+ useAnimatedValue,
+} from 'react-native';
+
+const App = () => {
+ // fadeAnim will be used as the value for opacity. Initial Value: 0
+ const fadeAnim = useAnimatedValue(0);
+
+ const fadeIn = () => {
+ // Will change fadeAnim value to 1 in 5 seconds
+ Animated.timing(fadeAnim, {
+ toValue: 1,
+ duration: 5000,
+ useNativeDriver: true,
+ }).start();
+ };
+
+ const fadeOut = () => {
+ // Will change fadeAnim value to 0 in 3 seconds
+ Animated.timing(fadeAnim, {
+ toValue: 0,
+ duration: 3000,
+ useNativeDriver: true,
+ }).start();
+ };
+
+ return (
+
+
+
+ Fading View!
+
+
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ fadingContainer: {
+ padding: 20,
+ backgroundColor: 'powderblue',
+ },
+ fadingText: {
+ fontSize: 28,
+ },
+ buttonRow: {
+ flexBasis: 100,
+ justifyContent: 'space-evenly',
+ marginVertical: 16,
+ },
+});
+
+export default App;
+```
+
+Refer to the [Animations](animations#animated-api) guide to see additional examples of `Animated` in action.
+
+## Overview
+
+There are two value types you can use with `Animated`:
+
+- [`Animated.Value()`](animated#value) for single values
+- [`Animated.ValueXY()`](animated#valuexy) for vectors
+
+`Animated.Value` can bind to style properties or other props, and can be interpolated as well. A single `Animated.Value` can drive any number of properties.
+
+### Configuring animations
+
+`Animated` provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:
+
+- [`Animated.decay()`](animated#decay) starts with an initial velocity and gradually slows to a stop.
+- [`Animated.spring()`](animated#spring) provides a basic spring physics model.
+- [`Animated.timing()`](animated#timing) animates a value over time using [easing functions](easing).
+
+In most cases, you will be using `timing()`. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.
+
+### Working with animations
+
+Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
+
+```tsx
+Animated.timing({}).start(({finished}) => {
+ /* completion callback */
+});
+```
+
+### Using the native driver
+
+By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
+
+You can use the native driver by specifying `useNativeDriver: true` in your animation configuration. See the [Animations](animations#using-the-native-driver) guide to learn more.
+
+### Animatable components
+
+Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the React render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.
+
+- [`createAnimatedComponent()`](animated#createanimatedcomponent) can be used to make a component animatable.
+
+`Animated` exports the following animatable components using the above wrapper:
+
+- `Animated.Image`
+- `Animated.ScrollView`
+- `Animated.Text`
+- `Animated.View`
+- `Animated.FlatList`
+- `Animated.SectionList`
+
+### Composing animations
+
+Animations can also be combined in complex ways using composition functions:
+
+- [`Animated.delay()`](animated#delay) starts an animation after a given delay.
+- [`Animated.parallel()`](animated#parallel) starts a number of animations at the same time.
+- [`Animated.sequence()`](animated#sequence) starts the animations in order, waiting for each to complete before starting the next.
+- [`Animated.stagger()`](animated#stagger) starts animations in order and in parallel, but with successive delays.
+
+Animations can also be chained together by setting the `toValue` of one animation to be another `Animated.Value`. See [Tracking dynamic values](animations#tracking-dynamic-values) in the Animations guide.
+
+By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.
+
+### Combining animated values
+
+You can combine two animated values via addition, subtraction, multiplication, division, or modulo to make a new animated value:
+
+- [`Animated.add()`](animated#add)
+- [`Animated.subtract()`](animated#subtract)
+- [`Animated.divide()`](animated#divide)
+- [`Animated.modulo()`](animated#modulo)
+- [`Animated.multiply()`](animated#multiply)
+
+### Interpolation
+
+The `interpolate()` function allows input ranges to map to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. It uses linear interpolation by default but also supports easing functions.
+
+- [`interpolate()`](animatedvalue#interpolate)
+
+Read more about interpolation in the [Animation](animations#interpolation) guide.
+
+### Handling gestures and other events
+
+Gestures, like panning or scrolling, and other events can map directly to animated values using `Animated.event()`. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
+
+- [`Animated.event()`](animated#event)
+
+For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
+
+```tsx
+ onScroll={Animated.event(
+ // scrollX = e.nativeEvent.contentOffset.x
+ [{nativeEvent: {
+ contentOffset: {
+ x: scrollX
+ }
+ }
+ }]
+ )}
+```
+
+---
+
+# Reference
+
+## Methods
+
+When the given value is a ValueXY instead of a Value, each config option may be a vector of the form `{x: ..., y: ...}` instead of a scalar.
+
+### `decay()`
+
+```tsx
+static decay(value, config): CompositeAnimation;
+```
+
+Animates a value from an initial velocity to zero based on a decay coefficient.
+
+Config is an object that may have the following options:
+
+- `velocity`: Initial velocity. Required.
+- `deceleration`: Rate of decay. Default 0.997.
+- `isInteraction`: Whether or not this animation creates an "interaction handle" on the `InteractionManager`. Default true.
+- `useNativeDriver`: Uses the native driver when true. Required.
+
+---
+
+### `timing()`
+
+```tsx
+static timing(value, config): CompositeAnimation;
+```
+
+Animates a value along a timed easing curve. The [`Easing`](easing) module has tons of predefined curves, or you can use your own function.
+
+Config is an object that may have the following options:
+
+- `duration`: Length of animation (milliseconds). Default 500.
+- `easing`: Easing function to define curve. Default is `Easing.inOut(Easing.ease)`.
+- `delay`: Start the animation after delay (milliseconds). Default 0.
+- `isInteraction`: Whether or not this animation creates an "interaction handle" on the `InteractionManager`. Default true.
+- `useNativeDriver`: Uses the native driver when true. Required.
+
+---
+
+### `spring()`
+
+```tsx
+static spring(value, config): CompositeAnimation;
+```
+
+Animates a value according to an analytical spring model based on [damped harmonic oscillation](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator). Tracks velocity state to create fluid motions as the `toValue` updates, and can be chained together.
+
+Config is an object that may have the following options.
+
+Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:
+
+The friction/tension or bounciness/speed options match the spring model in [`Facebook Pop`](https://github.com/facebook/pop), [Rebound](https://github.com/facebookarchive/rebound), and [Origami](https://origami.design/).
+
+- `friction`: Controls "bounciness"/overshoot. Default 7.
+- `tension`: Controls speed. Default 40.
+- `speed`: Controls speed of the animation. Default 12.
+- `bounciness`: Controls bounciness. Default 8.
+
+Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an analytical spring model based on the motion equations of a [damped harmonic oscillator](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator). This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.
+
+- `stiffness`: The spring stiffness coefficient. Default 100.
+- `damping`: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.
+- `mass`: The mass of the object attached to the end of the spring. Default 1.
+
+Other configuration options are as follows:
+
+- `velocity`: The initial velocity of the object attached to the spring. Default 0 (object is at rest).
+- `overshootClamping`: Boolean indicating whether the spring should be clamped and not bounce. Default false.
+- `restDisplacementThreshold`: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001.
+- `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels per second. Default 0.001.
+- `delay`: Start the animation after delay (milliseconds). Default 0.
+- `isInteraction`: Whether or not this animation creates an "interaction handle" on the `InteractionManager`. Default true.
+- `useNativeDriver`: Uses the native driver when true. Required.
+
+---
+
+### `add()`
+
+```tsx
+static add(a: Animated, b: Animated): AnimatedAddition;
+```
+
+Creates a new Animated value composed from two Animated values added together.
+
+---
+
+### `subtract()`
+
+```tsx
+static subtract(a: Animated, b: Animated): AnimatedSubtraction;
+```
+
+Creates a new Animated value composed by subtracting the second Animated value from the first Animated value.
+
+---
+
+### `divide()`
+
+```tsx
+static divide(a: Animated, b: Animated): AnimatedDivision;
+```
+
+Creates a new Animated value composed by dividing the first Animated value by the second Animated value.
+
+---
+
+### `multiply()`
+
+```tsx
+static multiply(a: Animated, b: Animated): AnimatedMultiplication;
+```
+
+Creates a new Animated value composed from two Animated values multiplied together.
+
+---
+
+### `modulo()`
+
+```tsx
+static modulo(a: Animated, modulus: number): AnimatedModulo;
+```
+
+Creates a new Animated value that is the (non-negative) modulo of the provided Animated value
+
+---
+
+### `diffClamp()`
+
+```tsx
+static diffClamp(a: Animated, min: number, max: number): AnimatedDiffClamp;
+```
+
+Create a new Animated value that is limited between 2 values. It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. (`value = clamp(value + diff, min, max)`).
+
+This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down.
+
+---
+
+### `delay()`
+
+```tsx
+static delay(time: number): CompositeAnimation;
+```
+
+Starts an animation after the given delay.
+
+---
+
+### `sequence()`
+
+```tsx
+static sequence(animations: CompositeAnimation[]): CompositeAnimation;
+```
+
+Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started.
+
+---
+
+### `parallel()`
+
+```tsx
+static parallel(
+ animations: CompositeAnimation[],
+ config?: ParallelConfig
+): CompositeAnimation;
+```
+
+Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the `stopTogether` flag.
+
+---
+
+### `stagger()`
+
+```tsx
+static stagger(
+ time: number,
+ animations: CompositeAnimation[]
+): CompositeAnimation;
+```
+
+Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects.
+
+---
+
+### `loop()`
+
+```tsx
+static loop(
+ animation: CompositeAnimation[],
+ config?: LoopAnimationConfig
+): CompositeAnimation;
+```
+
+Loops a given animation continuously, so that each time it reaches the end, it resets and begins again from the start. Will loop without blocking the JS thread if the child animation is set to `useNativeDriver: true`. In addition, loops can prevent `VirtualizedList`-based components from rendering more rows while the animation is running. You can pass `isInteraction: false` in the child animation config to fix this.
+
+Config is an object that may have the following options:
+
+- `iterations`: Number of times the animation should loop. Default `-1` (infinite).
+
+---
+
+### `event()`
+
+```tsx
+static event(
+ argMapping: Mapping[],
+ config?: EventConfig
+): (...args: any[]) => void;
+```
+
+Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g.
+
+```tsx
+onScroll={Animated.event(
+ [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
+ {listener: (event: ScrollEvent) => console.log(event)}, // Optional async listener
+)}
+ ...
+onPanResponderMove: Animated.event(
+ [
+ null, // raw event arg ignored
+ {dx: this._panX},
+ ], // gestureState arg
+ {
+ listener: (
+ event: GestureResponderEvent,
+ gestureState: PanResponderGestureState
+ ) => console.log(event, gestureState),
+ } // Optional async listener
+);
+```
+
+Config is an object that may have the following options:
+
+- `listener`: Optional async listener.
+- `useNativeDriver`: Uses the native driver when true. Required.
+
+---
+
+### `forkEvent()`
+
+```jsx
+static forkEvent(event: AnimatedEvent, listener: Function): AnimatedEvent;
+```
+
+Advanced imperative API for snooping on animated events that are passed in through props. It permits to add a new javascript listener to an existing `AnimatedEvent`. If `animatedEvent` is a javascript listener, it will merge the 2 listeners into a single one, and if `animatedEvent` is null/undefined, it will assign the javascript listener directly. Use values directly where possible.
+
+---
+
+### `unforkEvent()`
+
+```jsx
+static unforkEvent(event: AnimatedEvent, listener: Function);
+```
+
+---
+
+### `start()`
+
+```tsx
+static start(callback?: (result: {finished: boolean}) => void);
+```
+
+Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done or when the animation is done because stop() was called on it before it could finish.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| -------- | --------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| callback | `(result: {finished: boolean}) => void` | No | Function that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish |
+
+Start example with callback:
+
+```tsx
+Animated.timing({}).start(({finished}) => {
+ /* completion callback */
+});
+```
+
+---
+
+### `stop()`
+
+```tsx
+static stop();
+```
+
+Stops any running animation.
+
+---
+
+### `reset()`
+
+```tsx
+static reset();
+```
+
+Stops any running animation and resets the value to its original.
+
+## Properties
+
+### `Value`
+
+Standard value class for driving animations. Typically initialized with `useAnimatedValue(0);` or `new Animated.Value(0);` in class components.
+
+You can read more about `Animated.Value` API on the separate [page](animatedvalue).
+
+---
+
+### `ValueXY`
+
+2D value class for driving 2D animations, such as pan gestures.
+
+You can read more about `Animated.ValueXY` API on the separate [page](animatedvaluexy).
+
+---
+
+### `Interpolation`
+
+Exported to use the Interpolation type in flow.
+
+---
+
+### `Node`
+
+Exported for ease of type checking. All animated values derive from this class.
+
+---
+
+### `createAnimatedComponent`
+
+Make any React component Animatable. Used to create `Animated.View`, etc.
+
+---
+
+### `attachNativeEvent`
+
+Imperative API to attach an animated value to an event on a view. Prefer using `Animated.event` with `useNativeDriver: true` if possible.
diff --git a/website/versioned_docs/version-0.86/animatedvalue.md b/website/versioned_docs/version-0.86/animatedvalue.md
new file mode 100644
index 00000000000..189df398ec0
--- /dev/null
+++ b/website/versioned_docs/version-0.86/animatedvalue.md
@@ -0,0 +1,184 @@
+---
+id: animatedvalue
+title: Animated.Value
+---
+
+Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones.
+
+Typically initialized with `useAnimatedValue(0);` or `new Animated.Value(0);` in class components.
+
+---
+
+# Reference
+
+## Methods
+
+### `setValue()`
+
+```tsx
+setValue(value: number);
+```
+
+Directly set the value. This will stop any animations running on the value and update all the bound properties.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| ----- | ------ | -------- | ----------- |
+| value | number | Yes | Value |
+
+---
+
+### `setOffset()`
+
+```tsx
+setOffset(offset: number);
+```
+
+Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| ------ | ------ | -------- | ------------ |
+| offset | number | Yes | Offset value |
+
+---
+
+### `flattenOffset()`
+
+```tsx
+flattenOffset();
+```
+
+Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
+
+---
+
+### `extractOffset()`
+
+```tsx
+extractOffset();
+```
+
+Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
+
+---
+
+### `addListener()`
+
+```tsx
+addListener(callback: (state: {value: number}) => void): string;
+```
+
+Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
+
+Returns a string that serves as an identifier for the listener.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| callback | function | Yes | The callback function which will receive an object with a `value` key set to the new value. |
+
+---
+
+### `removeListener()`
+
+```tsx
+removeListener(id: string);
+```
+
+Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| ---- | ------ | -------- | ---------------------------------- |
+| id | string | Yes | Id for the listener being removed. |
+
+---
+
+### `removeAllListeners()`
+
+```tsx
+removeAllListeners();
+```
+
+Remove all registered listeners.
+
+---
+
+### `stopAnimation()`
+
+```tsx
+stopAnimation(callback?: (value: number) => void);
+```
+
+Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| -------- | -------- | -------- | --------------------------------------------- |
+| callback | function | No | A function that will receive the final value. |
+
+---
+
+### `resetAnimation()`
+
+```tsx
+resetAnimation(callback?: (value: number) => void);
+```
+
+Stops any animation and resets the value to its original.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| -------- | -------- | -------- | ------------------------------------------------ |
+| callback | function | No | A function that will receive the original value. |
+
+---
+
+### `interpolate()`
+
+```tsx
+interpolate(config: InterpolationConfigType);
+```
+
+Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10.
+
+See `AnimatedInterpolation.js`
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| ------ | ------ | -------- | ----------- |
+| config | object | Yes | See below. |
+
+The `config` object is composed of the following keys:
+
+- `inputRange`: an array of numbers
+- `outputRange`: an array of numbers or strings
+- `easing` (optional): a function that returns a number, given an input number
+- `extrapolate` (optional): a string such as 'extend', 'identity', or 'clamp'
+- `extrapolateLeft` (optional): a string such as 'extend', 'identity', or 'clamp'
+- `extrapolateRight` (optional): a string such as 'extend', 'identity', or 'clamp'
+
+---
+
+### `animate()`
+
+```tsx
+animate(animation, callback);
+```
+
+Typically only used internally, but could be used by a custom Animation class.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| --------- | --------- | -------- | ------------------- |
+| animation | Animation | Yes | See `Animation.js`. |
+| callback | function | Yes | Callback function. |
diff --git a/website/versioned_docs/version-0.86/animatedvaluexy.md b/website/versioned_docs/version-0.86/animatedvaluexy.md
new file mode 100644
index 00000000000..6cb44808ccf
--- /dev/null
+++ b/website/versioned_docs/version-0.86/animatedvaluexy.md
@@ -0,0 +1,227 @@
+---
+id: animatedvaluexy
+title: Animated.ValueXY
+---
+
+2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood.
+
+## Example
+
+```SnackPlayer name=Animated.ValueXY%20Example
+import React, {useRef} from 'react';
+import {Animated, PanResponder, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const DraggableView = () => {
+ const pan = useRef(new Animated.ValueXY()).current;
+
+ const panResponder = PanResponder.create({
+ onStartShouldSetPanResponder: () => true,
+ onPanResponderMove: Animated.event([
+ null,
+ {
+ dx: pan.x, // x,y are Animated.Value
+ dy: pan.y,
+ },
+ ]),
+ onPanResponderRelease: () => {
+ Animated.spring(
+ pan, // Auto-multiplexed
+ {toValue: {x: 0, y: 0}, useNativeDriver: true}, // Back to zero
+ ).start();
+ },
+ });
+
+ return (
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ box: {
+ backgroundColor: '#61dafb',
+ width: 80,
+ height: 80,
+ borderRadius: 4,
+ },
+});
+
+export default DraggableView;
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `setValue()`
+
+```tsx
+setValue(value: {x: number; y: number});
+```
+
+Directly set the value. This will stop any animations running on the value and update all the bound properties.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| ----- | ------------------------ | -------- | ----------- |
+| value | `{x: number; y: number}` | Yes | Value |
+
+---
+
+### `setOffset()`
+
+```tsx
+setOffset(offset: {x: number; y: number});
+```
+
+Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| ------ | ------------------------ | -------- | ------------ |
+| offset | `{x: number; y: number}` | Yes | Offset value |
+
+---
+
+### `flattenOffset()`
+
+```tsx
+flattenOffset();
+```
+
+Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.
+
+---
+
+### `extractOffset()`
+
+```tsx
+extractOffset();
+```
+
+Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.
+
+---
+
+### `addListener()`
+
+```tsx
+addListener(callback: (value: {x: number; y: number}) => void);
+```
+
+Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.
+
+Returns a string that serves as an identifier for the listener.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| -------- | -------- | -------- | ------------------------------------------------------------------------------------------- |
+| callback | function | Yes | The callback function which will receive an object with a `value` key set to the new value. |
+
+---
+
+### `removeListener()`
+
+```tsx
+removeListener(id: string);
+```
+
+Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| ---- | ------ | -------- | ---------------------------------- |
+| id | string | Yes | Id for the listener being removed. |
+
+---
+
+### `removeAllListeners()`
+
+```tsx
+removeAllListeners();
+```
+
+Remove all registered listeners.
+
+---
+
+### `stopAnimation()`
+
+```tsx
+stopAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| -------- | -------- | -------- | --------------------------------------------- |
+| callback | function | No | A function that will receive the final value. |
+
+---
+
+### `resetAnimation()`
+
+```tsx
+resetAnimation(callback?: (value: {x: number; y: number}) => void);
+```
+
+Stops any animation and resets the value to its original.
+
+**Parameters:**
+
+| Name | Type | Required | Description |
+| -------- | -------- | -------- | ------------------------------------------------ |
+| callback | function | No | A function that will receive the original value. |
+
+---
+
+### `getLayout()`
+
+```tsx
+getLayout(): {left: Animated.Value, top: Animated.Value};
+```
+
+Converts `{x, y}` into `{left, top}` for use in style, e.g.
+
+```tsx
+style={this.state.anim.getLayout()}
+```
+
+---
+
+### `getTranslateTransform()`
+
+```tsx
+getTranslateTransform(): [
+ {translateX: Animated.Value},
+ {translateY: Animated.Value},
+];
+```
+
+Converts `{x, y}` into a useable translation transform, e.g.
+
+```tsx
+style={{
+ transform: this.state.anim.getTranslateTransform()
+}}
+```
diff --git a/website/versioned_docs/version-0.86/animations.md b/website/versioned_docs/version-0.86/animations.md
new file mode 100644
index 00000000000..ccdaa5a32bb
--- /dev/null
+++ b/website/versioned_docs/version-0.86/animations.md
@@ -0,0 +1,673 @@
+---
+id: animations
+title: Animations
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.
+
+React Native provides two complementary animation systems: [`Animated`](animations#animated-api) for granular and interactive control of specific values, and [`LayoutAnimation`](animations#layoutanimation-api) for animated global layout transactions.
+
+## `Animated` API
+
+The [`Animated`](animated) API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution.
+
+`Animated` exports six animatable component types: `View`, `Text`, `Image`, `ScrollView`, `FlatList` and `SectionList`, but you can also create your own using `Animated.createAnimatedComponent()`.
+
+For example, a container view that fades in when it is mounted may look like this:
+
+
+
+
+```SnackPlayer ext=js
+import React, {useEffect, useRef} from 'react';
+import {Animated, Text, View} from 'react-native';
+
+const FadeInView = props => {
+ const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+ useEffect(() => {
+ Animated.timing(fadeAnim, {
+ toValue: 1,
+ duration: 10000,
+ useNativeDriver: true,
+ }).start();
+ }, [fadeAnim]);
+
+ return (
+
+ {props.children}
+
+ );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+ return (
+
+
+
+ Fading in
+
+
+
+ );
+};
+```
+
+
+
+
+```SnackPlayer ext=tsx
+import React, {useEffect, useRef, type PropsWithChildren} from 'react';
+import {Animated, Text, View, type ViewStyle} from 'react-native';
+
+type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
+
+const FadeInView: React.FC = props => {
+ const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+ useEffect(() => {
+ Animated.timing(fadeAnim, {
+ toValue: 1,
+ duration: 10000,
+ useNativeDriver: true,
+ }).start();
+ }, [fadeAnim]);
+
+ return (
+
+ {props.children}
+
+ );
+};
+
+// You can then use your `FadeInView` in place of a `View` in your components:
+export default () => {
+ return (
+
+
+
+ Fading in
+
+
+
+ );
+};
+```
+
+
+
+
+Let's break down what's happening here. In the `FadeInView` render method, a new `Animated.Value` called `fadeAnim` is initialized with `useRef`. The opacity property on the `View` is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
+
+When the component mounts, the opacity is set to 0. Then, an easing animation is started on the `fadeAnim` animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
+
+This is done in an optimized way that is faster than calling `setState` and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
+
+### Configuring animations
+
+Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
+
+`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated#timing). It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
+
+By default, `timing` will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing an `easing` parameter. Custom `duration` or even a `delay` before the animation starts is also supported.
+
+For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
+
+```tsx
+Animated.timing(this.state.xPosition, {
+ toValue: 100,
+ easing: Easing.back(),
+ duration: 2000,
+ useNativeDriver: true,
+}).start();
+```
+
+Take a look at the [Configuring animations](animated#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
+
+### Composing animations
+
+Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The `Animated` API provides several methods, such as `sequence()` and `delay()`, each of which take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
+
+For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
+
+```tsx
+Animated.sequence([
+ // decay, then spring to start and twirl
+ Animated.decay(position, {
+ // coast to a stop
+ velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
+ deceleration: 0.997,
+ useNativeDriver: true,
+ }),
+ Animated.parallel([
+ // after decay, in parallel:
+ Animated.spring(position, {
+ toValue: {x: 0, y: 0}, // return to start
+ useNativeDriver: true,
+ }),
+ Animated.timing(twirl, {
+ // and twirl
+ toValue: 360,
+ useNativeDriver: true,
+ }),
+ ]),
+]).start(); // start the sequence group
+```
+
+If one animation is stopped or interrupted, then all other animations in the group are also stopped. `Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
+
+You can find a full list of composition methods in the [Composing animations](animated#composing-animations) section of the `Animated` API reference.
+
+### Combining animated values
+
+You can [combine two animated values](animated#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
+
+There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):
+
+```tsx
+const a = new Animated.Value(1);
+const b = Animated.divide(1, a);
+
+Animated.spring(a, {
+ toValue: 2,
+ useNativeDriver: true,
+}).start();
+```
+
+### Interpolation
+
+Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
+
+A basic mapping to convert a 0-1 range to a 0-100 range would be:
+
+```tsx
+value.interpolate({
+ inputRange: [0, 1],
+ outputRange: [0, 100],
+});
+```
+
+For example, you may want to think about your `Animated.Value` as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying `style` from the example above like so:
+
+```tsx
+ style={{
+ opacity: this.state.fadeAnim, // Binds directly
+ transform: [{
+ translateY: this.state.fadeAnim.interpolate({
+ inputRange: [0, 1],
+ outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0
+ }),
+ }],
+ }}
+```
+
+[`interpolate()`](animated#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
+
+```tsx
+value.interpolate({
+ inputRange: [-300, -100, 0, 100, 101],
+ outputRange: [300, 0, 1, 0, 0],
+});
+```
+
+Which would map like so:
+
+```
+Input | Output
+------|-------
+ -400| 450
+ -300| 300
+ -200| 150
+ -100| 0
+ -50| 0.5
+ 0| 1
+ 50| 0.5
+ 100| 0
+ 101| 0
+ 200| 0
+```
+
+`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
+
+```tsx
+value.interpolate({
+ inputRange: [0, 360],
+ outputRange: ['0deg', '360deg'],
+});
+```
+
+`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](easing) module. `interpolate()` also has configurable behavior for extrapolating the `outputRange`. You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
+
+### Tracking dynamic values
+
+Animated values can also track other values by setting the `toValue` of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. They can also be composed with interpolations:
+
+```tsx
+Animated.spring(follower, {toValue: leader}).start();
+Animated.timing(opacity, {
+ toValue: pan.x.interpolate({
+ inputRange: [0, 300],
+ outputRange: [1, 0],
+ }),
+ useNativeDriver: true,
+}).start();
+```
+
+The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. `ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two `Animated.Value` instances and some helper functions that call through to them, making `ValueXY` a drop-in replacement for `Value` in many cases. It allows us to track both x and y values in the example above.
+
+### Tracking gestures
+
+Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated#event). This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
+
+For example, when working with horizontal scrolling gestures, you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`):
+
+```tsx
+ onScroll={Animated.event(
+ // scrollX = e.nativeEvent.contentOffset.x
+ [{nativeEvent: {
+ contentOffset: {
+ x: scrollX
+ }
+ }
+ }]
+ )}
+```
+
+The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the `Animated.event` used in the `ScrollView`
+
+#### ScrollView with Animated Event Example
+
+```SnackPlayer name=Animated&supportedPlatforms=ios,android
+import React from 'react';
+import {
+ ScrollView,
+ Text,
+ StyleSheet,
+ View,
+ ImageBackground,
+ Animated,
+ useWindowDimensions,
+ useAnimatedValue,
+} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const images = new Array(6).fill(
+ 'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
+);
+
+const App = () => {
+ const scrollX = useAnimatedValue(0);
+
+ const {width: windowWidth} = useWindowDimensions();
+
+ return (
+
+
+
+
+ {images.map((image, imageIndex) => {
+ return (
+
+
+
+
+ {'Image - ' + imageIndex}
+
+
+
+
+ );
+ })}
+
+
+ {images.map((image, imageIndex) => {
+ const width = scrollX.interpolate({
+ inputRange: [
+ windowWidth * (imageIndex - 1),
+ windowWidth * imageIndex,
+ windowWidth * (imageIndex + 1),
+ ],
+ outputRange: [8, 16, 8],
+ extrapolate: 'clamp',
+ });
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ scrollContainer: {
+ height: 300,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ card: {
+ flex: 1,
+ marginVertical: 4,
+ marginHorizontal: 16,
+ borderRadius: 5,
+ overflow: 'hidden',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ textContainer: {
+ backgroundColor: 'rgba(0,0,0, 0.7)',
+ paddingHorizontal: 24,
+ paddingVertical: 8,
+ borderRadius: 5,
+ },
+ infoText: {
+ color: 'white',
+ fontSize: 16,
+ fontWeight: 'bold',
+ },
+ normalDot: {
+ height: 8,
+ width: 8,
+ borderRadius: 4,
+ backgroundColor: 'silver',
+ marginHorizontal: 4,
+ },
+ indicatorContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+});
+
+export default App;
+```
+
+When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, which is the `gestureState`.
+
+```tsx
+onPanResponderMove={Animated.event(
+ [null, // ignore the native event
+ // extract dx and dy from gestureState
+ // like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
+ {dx: pan.x, dy: pan.y}
+])}
+```
+
+#### PanResponder with Animated Event Example
+
+```SnackPlayer name=Animated
+import React, {useRef} from 'react';
+import {Animated, View, StyleSheet, PanResponder, Text} from 'react-native';
+
+const App = () => {
+ const pan = useRef(new Animated.ValueXY()).current;
+ const panResponder = useRef(
+ PanResponder.create({
+ onMoveShouldSetPanResponder: () => true,
+ onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+ onPanResponderRelease: () => {
+ Animated.spring(pan, {
+ toValue: {x: 0, y: 0},
+ useNativeDriver: true,
+ }).start();
+ },
+ }),
+ ).current;
+
+ return (
+
+ Drag & Release this box!
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ titleText: {
+ fontSize: 14,
+ lineHeight: 24,
+ fontWeight: 'bold',
+ },
+ box: {
+ height: 150,
+ width: 150,
+ backgroundColor: 'blue',
+ borderRadius: 5,
+ },
+});
+
+export default App;
+```
+
+### Responding to the current animation value
+
+You may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches:
+
+- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
+- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
+
+`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Check out `Animated.Value.addListener` as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
+
+### Using the native driver
+
+The `Animated` API is designed to be serializable. By using the [native driver](/blog/2017/02/14/using-native-driver-for-animated), we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
+
+Using the native driver for normal animations can be accomplished by setting `useNativeDriver: true` in animation config when starting it. Animations without a `useNativeDriver` property will default to false for legacy reasons, but emit a warning (and typechecking error in TypeScript).
+
+```tsx
+Animated.timing(this.state.animatedValue, {
+ toValue: 1,
+ duration: 500,
+ useNativeDriver: true, // <-- Set this to true
+}).start();
+```
+
+Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
+
+The native driver also works with `Animated.event`. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
+
+```tsx
+
+ {content}
+
+```
+
+You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/main/packages/rn-tester/), then loading the Native Animated Example. You can also take a look at the [source code](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js) to learn how these examples were produced.
+
+#### Caveats
+
+Not everything you can do with `Animated` is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like `transform` and `opacity` will work, but Flexbox and position properties will not. When using `Animated.event`, it will only work with direct events and not bubbling events. This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
+
+When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue.
+
+### Bear in mind
+
+While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. At this time some animations may not render on Android without it. Example below.
+
+```tsx
+
+```
+
+### Additional examples
+
+The RNTester app has various examples of `Animated` in use:
+
+- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/main/packages/rn-tester/js/examples/AnimatedGratuitousApp)
+- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js)
+
+## `LayoutAnimation` API
+
+`LayoutAnimation` allows you to globally configure `create` and `update` animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
+
+Note that although `LayoutAnimation` is very powerful and can be quite useful, it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want.
+
+Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+
+```tsx
+UIManager.setLayoutAnimationEnabledExperimental(true);
+```
+
+```SnackPlayer name=LayoutAnimations
+import React, {useState} from 'react';
+import {
+ NativeModules,
+ LayoutAnimation,
+ Text,
+ TouchableOpacity,
+ StyleSheet,
+ View,
+} from 'react-native';
+
+const {UIManager} = NativeModules;
+
+UIManager.setLayoutAnimationEnabledExperimental &&
+ UIManager.setLayoutAnimationEnabledExperimental(true);
+
+export default function App() {
+ const [state, setState] = useState({
+ w: 100,
+ h: 100,
+ });
+
+ const onPress = () => {
+ // Animate the update
+ LayoutAnimation.spring();
+ setState({w: state.w + 15, h: state.h + 15});
+ };
+
+ return (
+
+
+
+
+ Press me!
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ box: {
+ width: 200,
+ height: 200,
+ backgroundColor: 'red',
+ },
+ button: {
+ backgroundColor: 'black',
+ paddingHorizontal: 20,
+ paddingVertical: 15,
+ marginTop: 15,
+ },
+ buttonText: {
+ color: '#fff',
+ fontWeight: 'bold',
+ },
+});
+```
+
+This example uses a preset value, you can customize the animations as you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/LayoutAnimation/LayoutAnimation.js) for more information.
+
+## Additional notes
+
+### `requestAnimationFrame`
+
+`requestAnimationFrame` is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.
+
+### `setNativeProps`
+
+As mentioned [in the Direct Manipulation section](legacy/direct-manipulation), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and re-render the component hierarchy.
+
+We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with `shouldComponentUpdate`.
+
+If you find your animations with dropping frames (performing below 60 frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread [with the useNativeDriver option](/blog/2017/02/14/using-native-driver-for-animated). You may also want to defer any computationally intensive work until after animations are complete, using the [InteractionManager](interactionmanager). You can monitor the frame rate by using the In-App Dev Menu "FPS Monitor" tool.
diff --git a/website/versioned_docs/version-0.86/app-extensions.md b/website/versioned_docs/version-0.86/app-extensions.md
new file mode 100644
index 00000000000..8ef194ef75a
--- /dev/null
+++ b/website/versioned_docs/version-0.86/app-extensions.md
@@ -0,0 +1,24 @@
+---
+id: app-extensions
+title: App Extensions
+---
+
+App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the [App Extension Programming Guide](https://developer.apple.com/library/content/documentation/General/Conceptual/ExtensibilityPG/index.html#//apple_ref/doc/uid/TP40014214-CH20-SW1). In this guide, we'll briefly cover how you may take advantage of app extensions on iOS.
+
+## Memory use in extensions
+
+As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.
+
+### Today widget
+
+The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':
+
+
+
+Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use [Xcode's Instruments](https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html) to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, you can quickly go over the 16 MB limit by performing common operations, such as fetching data from an API.
+
+To experiment with the limits of React Native Today widget implementations, try extending the example project in [react-native-today-widget](https://github.com/matejkriz/react-native-today-widget/).
+
+### Other app extensions
+
+Other types of app extensions have greater memory limits than the Today widget. For instance, Custom Keyboard extensions are limited to 48 MB, and Share extensions are limited to 120 MB. Implementing such app extensions with React Native is more viable. One proof of concept example is [react-native-ios-share-extension](https://github.com/andrewsardone/react-native-ios-share-extension).
diff --git a/website/versioned_docs/version-0.86/appearance.md b/website/versioned_docs/version-0.86/appearance.md
new file mode 100644
index 00000000000..44f16750db0
--- /dev/null
+++ b/website/versioned_docs/version-0.86/appearance.md
@@ -0,0 +1,128 @@
+---
+id: appearance
+title: Appearance
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+```tsx
+import {Appearance} from 'react-native';
+```
+
+The `Appearance` module exposes information about the user's appearance preferences, such as their preferred system color scheme (light or dark).
+
+#### Developer notes
+
+
+
+
+
+:::info
+The `Appearance` API is inspired by the [Media Queries draft](https://drafts.csswg.org/mediaqueries-5/) from the W3C. The color scheme preference is modeled after the [`prefers-color-scheme` CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
+:::
+
+
+
+
+:::info
+The color scheme preference will map to the user's Light or [Dark theme](https://developer.android.com/guide/topics/ui/look-and-feel/darktheme) preference on Android 10 (API level 29) devices and higher.
+:::
+
+
+
+
+:::info
+The color scheme preference will map to the user's Light or [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/) preference on iOS 13 devices and higher.
+:::
+
+:::note
+When taking a screenshot, by default, the color scheme may flicker between light and dark mode. It happens because the iOS takes snapshots on both color schemes and updating the user interface with color scheme is asynchronous.
+:::
+
+
+
+
+## Example
+
+You can use the `Appearance` module to determine if the user prefers a dark color scheme:
+
+```tsx
+const colorScheme = Appearance.getColorScheme();
+if (colorScheme === 'dark') {
+ // Use dark color scheme
+}
+```
+
+Although the color scheme is available immediately, this may change when not overridden via `setColorScheme()` (e.g. scheduled color scheme change at sunrise or sunset). Any rendering logic or styles that depend on the user preferred color scheme should try to call this function on every render, rather than caching the value.
+
+**Recommended:** Use the [`useColorScheme`](usecolorscheme) hook.
+
+### App-level overriding
+
+`setColorScheme()` overrides the color scheme at the application level — it does not affect the system setting or other applications. Passing `'unspecified'` removes any override, restoring the system preference.
+
+```mermaid
+flowchart TD
+ USC["useColorScheme()"] --> GCS["getColorScheme()"]
+ GCS --> DEC{App override?}
+ DEC -- "NO / reset via setColorScheme('unspecified')" --> SYS["System preference\n'light' or 'dark'"]
+ DEC -- "YES — setColorScheme('light' | 'dark')" --> OVR["'light' or 'dark' (static)"]
+
+ classDef fn fill:#dce8f8,stroke:#4a90d9,color:#1a1a1a
+ classDef out fill:#f0f4f8,stroke:#8faabb,color:#1a1a1a
+ class USC,GCS fn
+ class OVR,SYS out
+```
+
+---
+
+# Reference
+
+## Methods
+
+### `getColorScheme()`
+
+```tsx
+static getColorScheme(): 'light' | 'dark' | 'unspecified' | null;
+```
+
+Returns the active color scheme. This value may change at runtime, either at the system level (e.g. scheduled color scheme change at sunrise or sunset) or when overridden at the app level via `setColorScheme()`.
+
+Return values:
+
+- `'light'`: The light color scheme is applied.
+- `'dark'`: The dark color scheme is applied.
+- `'unspecified'`: **_Never returned_** (incorrectly typed).
+- `null`: May be returned if the native Appearance module is not available.
+
+See also: [`useColorScheme`](usecolorscheme) (hook).
+
+---
+
+### `setColorScheme()`
+
+```tsx
+static setColorScheme('light' | 'dark' | 'unspecified'): void;
+```
+
+Forces the application to always adopt a light or dark interface style. The change applies to the application and all native elements within it (Alerts, Pickers, etc.).
+
+This is an app-level override — it does not affect the system's selected interface style or any style set in other applications.
+
+Supported values:
+
+- `'light'`: Apply light color scheme.
+- `'dark'`: Apply dark color scheme.
+- `'unspecified'`: Follow the system color scheme (removes any override).
+
+---
+
+### `addChangeListener()`
+
+```tsx
+static addChangeListener(
+ listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void,
+): NativeEventSubscription;
+```
+
+Add an event handler that is fired when appearance preferences change. On iOS and Android, the `colorScheme` value in the callback is always `'light'` or `'dark'`.
diff --git a/website/versioned_docs/version-0.86/appendix.md b/website/versioned_docs/version-0.86/appendix.md
new file mode 100644
index 00000000000..81045b2e932
--- /dev/null
+++ b/website/versioned_docs/version-0.86/appendix.md
@@ -0,0 +1,36 @@
+# Appendix
+
+## I. Terminology
+
+- **Spec** - TypeScript or Flow code that describes the API for a Turbo Native Module or Fabric Native component. Used by **Codegen** to generate boilerplate code.
+
+- **Native Modules** - Native libraries that have no User Interface (UI) for the user. Examples would be persistent storage, notifications, network events. These are accessible to your JavaScript application code as functions and objects.
+- **Native Component** - Native platform views that are available to your application JavaScript code through React Components.
+
+- **Legacy Native Components** - Components which are running on the old React Native architecture.
+- **Legacy Native Modules** - Modules which are running on the old React Native architecture.
+
+## II. Codegen Typings
+
+You may use the following table as a reference for which types are supported and what they map to in each platform:
+
+| Flow | TypeScript | Flow Nullable Support | TypeScript Nullable Support | Android (Java) | iOS (ObjC) |
+| -------------------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------ | -------------------------------------------------------------- |
+| `string` | `string` | `?string` | string | null | `string` | `NSString` |
+| `boolean` | `boolean` | `?boolean` | boolean | null | `Boolean` | `NSNumber` |
+| Object Literal {| foo: string, ...|} | { foo: string, ...} as const | ?{| foo: string, ...|} | ?{ foo: string, ...} as const | \- | \- |
+| Object [[1](#notes)] | Object [[1](#notes)] | `?Object` | Object | null | `ReadableMap` | `@` (untyped dictionary) |
+| Array<T> | Array<T> | ?Array<T> | Array<T> | null | `ReadableArray` | `NSArray` (or `RCTConvertVecToArray` when used inside objects) |
+| `Function` | `Function` | `?Function` | Function | null | \- | \- |
+| Promise<T> | Promise<T> | ?Promise<T> | Promise<T> | null | `com.facebook.react.bridge.Promise` | `RCTPromiseResolve` and `RCTPromiseRejectBlock` |
+| Type Unions 'SUCCESS'|'FAIL' | Type Unions 'SUCCESS'|'FAIL' | Only as callbacks | | \- | \- |
+| Callbacks `() =>` | Callbacks `() =>` | Yes | | `com.facebook.react.bridge.Callback` | `RCTResponseSenderBlock` |
+| `number` | `number` | No | | `double` | `NSNumber` |
+
+### Notes:
+
+[1] We strongly recommend using Object literals instead of Objects.
+
+:::info
+You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the `Libraries/` directory in the React Native repository.
+:::
diff --git a/website/versioned_docs/version-0.86/appregistry.md b/website/versioned_docs/version-0.86/appregistry.md
new file mode 100644
index 00000000000..62ba81a928a
--- /dev/null
+++ b/website/versioned_docs/version-0.86/appregistry.md
@@ -0,0 +1,383 @@
+---
+id: appregistry
+title: AppRegistry
+---
+
+
+
Project with Native Code Required
+
If you are using the managed Expo workflow there is only ever one entry component registered with AppRegistry and it is handled automatically (or through registerRootComponent). You do not need to use this API.
+
+
+`AppRegistry` is the JS entry point to running all React Native apps. App root components should register themselves with `AppRegistry.registerComponent`, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking `AppRegistry.runApplication`.
+
+```tsx
+import {Text, AppRegistry} from 'react-native';
+
+const App = () => (
+
+ App1
+
+);
+
+AppRegistry.registerComponent('Appname', () => App);
+```
+
+To "stop" an application when a view should be destroyed, call `AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was passed into `runApplication`. These should always be used as a pair.
+
+`AppRegistry` should be required early in the `require` sequence to make sure the JS execution environment is setup before other modules are required.
+
+---
+
+# Reference
+
+## Methods
+
+### `getAppKeys()`
+
+```tsx
+static getAppKeys(): string[];
+```
+
+Returns an array of strings.
+
+---
+
+### `getRegistry()`
+
+```tsx
+static getRegistry(): {sections: string[]; runnables: Runnable[]};
+```
+
+Returns a [Registry](appregistry#registry) object.
+
+---
+
+### `getRunnable()`
+
+```tsx
+static getRunnable(appKey: string): : Runnable | undefined;
+```
+
+Returns a [Runnable](appregistry#runnable) object.
+
+**Parameters:**
+
+| Name | Type |
+| ----------------------------------------------------------- | ------ |
+| appKey
Required
| string |
+
+---
+
+### `getSectionKeys()`
+
+```tsx
+static getSectionKeys(): string[];
+```
+
+Returns an array of strings.
+
+---
+
+### `getSections()`
+
+```tsx
+static getSections(): Record;
+```
+
+Returns a [Runnables](appregistry#runnables) object.
+
+---
+
+### `registerCancellableHeadlessTask()`
+
+```tsx
+static registerCancellableHeadlessTask(
+ taskKey: string,
+ taskProvider: TaskProvider,
+ taskCancelProvider: TaskCancelProvider,
+);
+```
+
+Register a headless task which can be cancelled. A headless task is a bit of code that runs without a UI.
+
+**Parameters:**
+
+| Name | Type | Description |
+| ------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| taskKey
Required
| string | The native id for this task instance that was used when startHeadlessTask was called. |
+| taskProvider
Required
| [TaskProvider](appregistry#taskprovider) | A promise returning function that takes some data passed from the native side as the only argument. When the promise is resolved or rejected the native side is notified of this event and it may decide to destroy the JS context. |
+| taskCancelProvider
Required
| [TaskCancelProvider](appregistry#taskcancelprovider) | a void returning function that takes no arguments; when a cancellation is requested, the function being executed by taskProvider should wrap up and return ASAP. |
+
+---
+
+### `registerComponent()`
+
+```tsx
+static registerComponent(
+ appKey: string,
+ getComponentFunc: ComponentProvider,
+ section?: boolean,
+): string;
+```
+
+**Parameters:**
+
+| Name | Type |
+| ---------------------------------------------------------------------- | ----------------- |
+| appKey
| [AppConfig](appregistry#appconfig)[] |
+
+---
+
+### `registerHeadlessTask()`
+
+```tsx
+static registerHeadlessTask(
+ taskKey: string,
+ taskProvider: TaskProvider,
+);
+```
+
+Register a headless task. A headless task is a bit of code that runs without a UI.
+
+This is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.
+
+**Parameters:**
+
+| Name | Type | Description |
+| --------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| taskKey
Required
| string | The native id for this task instance that was used when startHeadlessTask was called. |
+| taskProvider
Required
| [TaskProvider](appregistry#taskprovider) | A promise returning function that takes some data passed from the native side as the only argument. When the promise is resolved or rejected the native side is notified of this event and it may decide to destroy the JS context. |
+
+---
+
+### `registerRunnable()`
+
+```tsx
+static registerRunnable(appKey: string, func: Runnable): string;
+```
+
+**Parameters:**
+
+| Name | Type |
+| ----------------------------------------------------------- | -------- |
+| appKey
| function |
+
+A valid `hook` function accepts the following as arguments:
+
+| Name | Type |
+| ---------------------------------------------------------------------------- | ------------------ |
+| component
Required
| ComponentProvider |
+| scopedPerformanceLogger
Required
| IPerformanceLogger |
+
+The function must also return a React Component.
+
+---
+
+### `setWrapperComponentProvider()`
+
+```tsx
+static setWrapperComponentProvider(
+ provider: WrapperComponentProvider,
+);
+```
+
+**Parameters:**
+
+| Name | Type |
+| ------------------------------------------------------------- | ----------------- |
+| provider
| number | The native id for this task instance to keep track of its execution. |
+| taskKey
Required
| string | The key for the task to start. |
+| data
Required
| any | The data to pass to the task. |
+
+---
+
+### `unmountApplicationComponentAtRootTag()`
+
+```tsx
+static unmountApplicationComponentAtRootTag(rootTag: number);
+```
+
+Stops an application when a view should be destroyed.
+
+**Parameters:**
+
+| Name | Type |
+| ------------------------------------------------------------ | ------ |
+| rootTag
Required
| number |
+
+## Type Definitions
+
+### AppConfig
+
+Application configuration for the `registerConfig` method.
+
+| Type |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name | Type |
+| ----------------------------------------------------------- | ----------------- |
+| appKey
Required
| string |
+| component | ComponentProvider |
+| run | function |
+| section | boolean |
+
+:::note
+Every config is expected to set either `component` or `run` function.
+:::
+
+### Registry
+
+| Type |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name | Type |
+| --------- | ------------------------------------------ |
+| runnables | array of [Runnables](appregistry#runnable) |
+| sections | array of strings |
+
+### Runnable
+
+| Type |
+| ------ |
+| object |
+
+**Properties:**
+
+| Name | Type |
+| --------- | ----------------- |
+| component | ComponentProvider |
+| run | function |
+
+### Runnables
+
+An object with key of `appKey` and value of type of [`Runnable`](appregistry#runnable).
+
+| Type |
+| ------ |
+| object |
+
+### Task
+
+A `Task` is a function that accepts any data as argument and returns a Promise that resolves to `undefined`.
+
+| Type |
+| -------- |
+| function |
+
+### TaskCanceller
+
+A `TaskCanceller` is a function that accepts no argument and returns void.
+
+| Type |
+| -------- |
+| function |
+
+### TaskCancelProvider
+
+A valid `TaskCancelProvider` is a function that returns a [`TaskCanceller`](appregistry#taskcanceller).
+
+| Type |
+| -------- |
+| function |
+
+### TaskProvider
+
+A valid `TaskProvider` is a function that returns a [`Task`](appregistry#task).
+
+| Type |
+| -------- |
+| function |
diff --git a/website/versioned_docs/version-0.86/appstate.md b/website/versioned_docs/version-0.86/appstate.md
new file mode 100644
index 00000000000..579a7f30487
--- /dev/null
+++ b/website/versioned_docs/version-0.86/appstate.md
@@ -0,0 +1,121 @@
+---
+id: appstate
+title: AppState
+---
+
+`AppState` can tell you if the app is in the foreground or background, and notify you when the state changes.
+
+AppState is frequently used to determine the intent and proper behavior when handling push notifications.
+
+### App States
+
+- `active` - The app is running in the foreground
+- `background` - The app is running in the background. The user is either:
+ - in another app
+ - on the home screen
+ - [Android] on another `Activity` (even if it was launched by your app)
+- [iOS] `inactive` - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
+
+For more information, see [Apple's documentation](https://developer.apple.com/documentation/uikit/app_and_scenes/managing_your_app_s_life_cycle)
+
+## Basic Usage
+
+To see the current state, you can check `AppState.currentState`, which will be kept up-to-date.
+
+:::info
+If you are using the legacy architecture, `currentState` will be `null` at launch until it is retrieved asynchronously from the native side.
+:::
+
+```SnackPlayer name=AppState%20Example
+import React, {useRef, useState, useEffect} from 'react';
+import {AppState, StyleSheet, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const AppStateExample = () => {
+ const appState = useRef(AppState.currentState);
+ const [appStateVisible, setAppStateVisible] = useState(appState.current);
+
+ useEffect(() => {
+ const subscription = AppState.addEventListener('change', nextAppState => {
+ if (
+ appState.current.match(/inactive|background/) &&
+ nextAppState === 'active'
+ ) {
+ console.log('App has come to the foreground!');
+ }
+
+ appState.current = nextAppState;
+ setAppStateVisible(appState.current);
+ console.log('AppState', appState.current);
+ });
+
+ return () => {
+ subscription.remove();
+ };
+ }, []);
+
+ return (
+
+
+ Current state is: {appStateVisible}
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+});
+
+export default AppStateExample;
+```
+
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
+
+---
+
+# Reference
+
+## Events
+
+### `change`
+
+This event is received when the app state has changed. The listener is called with one of [the current app state values](appstate#app-states).
+
+### `memoryWarning`
iOS
+
+Fires when the app receives a memory warning from the operating system.
+
+### `focus`
Android
+
+Received when the app gains focus (the user is interacting with the app).
+
+### `blur`
Android
+
+Received when the user is not actively interacting with the app. Useful in situations when the user pulls down the [notification drawer](https://developer.android.com/guide/topics/ui/notifiers/notifications#bar-and-drawer). `AppState` won't change but the `blur` event will get fired.
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+ type: AppStateEvent,
+ listener: (state: AppStateStatus) => void,
+): NativeEventSubscription;
+```
+
+Sets up a function that will be called whenever the specified event type on AppState occurs. Valid values for `eventType` are
+[listed above](#events). Returns the `EventSubscription`.
+
+## Properties
+
+### `currentState`
+
+```tsx
+static currentState: AppStateStatus;
+```
diff --git a/website/versioned_docs/version-0.86/asyncstorage.md b/website/versioned_docs/version-0.86/asyncstorage.md
new file mode 100644
index 00000000000..e1fb69471fa
--- /dev/null
+++ b/website/versioned_docs/version-0.86/asyncstorage.md
@@ -0,0 +1,8 @@
+---
+id: asyncstorage
+title: '❌ AsyncStorage'
+---
+
+:::danger[Removed from React Native]
+Use one of the [community packages](https://reactnative.directory/?search=storage) instead.
+:::
diff --git a/website/versioned_docs/version-0.86/backhandler.md b/website/versioned_docs/version-0.86/backhandler.md
new file mode 100644
index 00000000000..c3c7c937541
--- /dev/null
+++ b/website/versioned_docs/version-0.86/backhandler.md
@@ -0,0 +1,136 @@
+---
+id: backhandler
+title: BackHandler
+---
+
+The Backhandler API detects hardware button presses for back navigation, lets you register event listeners for the system's back action, and lets you control how your application responds. It is Android-only.
+
+The event subscriptions are called in reverse order (i.e. the last registered subscription is called first).
+
+- **If one subscription returns true,** then subscriptions registered earlier will not be called.
+- **If no subscription returns true or none are registered,** it programmatically invokes the default back button functionality to exit the app.
+
+:::warning Warning for modal users
+If your app shows an opened `Modal`, `BackHandler` will not publish any events ([see `Modal` docs](modal#onrequestclose)).
+:::
+
+## Pattern
+
+```tsx
+const subscription = BackHandler.addEventListener(
+ 'hardwareBackPress',
+ function () {
+ /**
+ * this.onMainScreen and this.goBack are just examples,
+ * you need to use your own implementation here.
+ *
+ * Typically you would use the navigator here to go to the last state.
+ */
+
+ if (!this.onMainScreen()) {
+ this.goBack();
+ /**
+ * When true is returned the event will not be bubbled up
+ * & no other back action will execute
+ */
+ return true;
+ }
+ /**
+ * Returning false will let the event to bubble up & let other event listeners
+ * or the system's default back action to be executed.
+ */
+ return false;
+ },
+);
+
+// Unsubscribe the listener on unmount
+subscription.remove();
+```
+
+## Example
+
+The following example implements a scenario where you confirm if the user wants to exit the app:
+
+```SnackPlayer name=BackHandler&supportedPlatforms=android
+import React, {useEffect} from 'react';
+import {Text, StyleSheet, BackHandler, Alert} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => {
+ useEffect(() => {
+ const backAction = () => {
+ Alert.alert('Hold on!', 'Are you sure you want to go back?', [
+ {
+ text: 'Cancel',
+ onPress: () => null,
+ style: 'cancel',
+ },
+ {text: 'YES', onPress: () => BackHandler.exitApp()},
+ ]);
+ return true;
+ };
+
+ const backHandler = BackHandler.addEventListener(
+ 'hardwareBackPress',
+ backAction,
+ );
+
+ return () => backHandler.remove();
+ }, []);
+
+ return (
+
+
+ Click Back button!
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ text: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ },
+});
+
+export default App;
+```
+
+`BackHandler.addEventListener` creates an event listener & returns a `NativeEventSubscription` object which should be cleared using `NativeEventSubscription.remove` method.
+
+## Usage with React Navigation
+
+If you are using React Navigation to navigate across different screens, you can follow their guide on [Custom Android back button behaviour](https://reactnavigation.org/docs/custom-android-back-button-handling/)
+
+## Backhandler hook
+
+[React Native Hooks](https://github.com/react-native-community/hooks#usebackhandler) has a nice `useBackHandler` hook which will simplify the process of setting up event listeners.
+
+---
+
+# Reference
+
+## Methods
+
+### `addEventListener()`
+
+```tsx
+static addEventListener(
+ eventName: BackPressEventName,
+ handler: () => boolean | null | undefined,
+): NativeEventSubscription;
+```
+
+---
+
+### `exitApp()`
+
+```tsx
+static exitApp();
+```
diff --git a/website/versioned_docs/version-0.86/boxshadowvalue.md b/website/versioned_docs/version-0.86/boxshadowvalue.md
new file mode 100644
index 00000000000..d0cb09900f1
--- /dev/null
+++ b/website/versioned_docs/version-0.86/boxshadowvalue.md
@@ -0,0 +1,73 @@
+---
+id: boxshadowvalue
+title: BoxShadowValue Object Type
+---
+
+The `BoxShadowValue` object is taken by the [`boxShadow`](./view-style-props.md#boxshadow) style prop. It is comprised of 2-4 lengths, an optional color, and an optional `inset` boolean. These values collectively define the box shadow's color, position, size, and blurriness.
+
+## Example
+
+```js
+{
+ offsetX: 10,
+ offsetY: -3,
+ blurRadius: '15px',
+ spreadDistance: '10px',
+ color: 'red',
+ inset: true,
+}
+```
+
+## Keys and values
+
+### `offsetX`
+
+The offset on the x-axis. This can be positive or negative. A positive value indicates right and negative indicates left.
+
+| Type | Optional |
+| ---------------- | -------- |
+| number \| string | No |
+
+### `offsetY`
+
+The offset on the y-axis. This can be positive or negative. A positive value indicates up and negative indicates down.
+
+| Type | Optional |
+| ---------------- | -------- |
+| number \| string | No |
+
+### `blurRadius`
+
+Represents the radius used in the [Gaussian blur](https://en.wikipedia.org/wiki/Gaussian_blur) algorithm. The larger the value the blurrier the shadow is. Only non-negative values are valid. The default is 0.
+
+| Type | Optional |
+| ---------------- | -------- |
+| number \| string | Yes |
+
+### `spreadDistance`
+
+How much larger or smaller the shadow grows or shrinks. A positive value will grow the shadow, a negative value will shrink the shadow.
+
+| Type | Optional |
+| ---------------- | -------- |
+| number \| string | Yes |
+
+### `color`
+
+The color of the shadow. The default is `black`.
+
+| Type | Optional |
+| -------------------- | -------- |
+| [color](./colors.md) | Yes |
+
+### `inset`
+
+Whether the shadow is inset or not. Inset shadows will appear around the inside of the element's border box as opposed to the outside.
+
+| Type | Optional |
+| ------- | -------- |
+| boolean | Yes |
+
+## Used by
+
+- [`boxShadow`](./view-style-props.md#boxshadow)
diff --git a/website/versioned_docs/version-0.86/build-speed.md b/website/versioned_docs/version-0.86/build-speed.md
new file mode 100644
index 00000000000..0db1929f4f3
--- /dev/null
+++ b/website/versioned_docs/version-0.86/build-speed.md
@@ -0,0 +1,184 @@
+---
+id: build-speed
+title: Speeding up your Build phase
+---
+
+Building your React Native app could be **expensive** and take several minutes of developers time.
+This can be problematic as your project grows and generally in bigger organizations with multiple React Native developers.
+
+To mitigate this performance hit, this page shares some suggestions on how to **improve your build time**.
+
+:::info
+
+Please note that those suggestions are advanced feature that requires some amount of understanding of how the native build tools work.
+
+:::
+
+## Build only one ABI during development (Android-only)
+
+When building your android app locally, by default you build all the 4 [Application Binary Interfaces (ABIs)](https://developer.android.com/ndk/guides/abis) : `armeabi-v7a`, `arm64-v8a`, `x86` & `x86_64`.
+
+However, you probably don't need to build all of them if you're building locally and testing your emulator or on a physical device.
+
+This should reduce your **native build time** by a ~75% factor.
+
+If you're using the React Native CLI, you can add the `--active-arch-only` flag to the `run-android` command. This flag will make sure the correct ABI is picked up from either the running emulator or the plugged in phone. To confirm that this approach is working fine, you'll see a message like `info Detected architectures arm64-v8a` on console.
+
+```
+$ yarn react-native run-android --active-arch-only
+
+[ ... ]
+info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
+Jetifier found 1037 file(s) to forward-jetify. Using 32 workers...
+info JS server already running.
+info Detected architectures arm64-v8a
+info Installing the app...
+```
+
+This mechanism relies on the `reactNativeArchitectures` Gradle property.
+
+Therefore, if you're building directly with Gradle from the command line and without the CLI, you can specify the ABI you want to build as follows:
+
+```
+$ ./gradlew :app:assembleDebug -PreactNativeArchitectures=x86,x86_64
+```
+
+This can be useful if you wish to build your Android App on a CI and use a matrix to parallelize the build of the different architectures.
+
+If you wish, you can also override this value locally, using the `gradle.properties` file you have in the [top-level folder](https://github.com/facebook/react-native/blob/19cf70266eb8ca151aa0cc46ac4c09cb987b2ceb/template/android/gradle.properties#L30-L33) of your project:
+
+```
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+```
+
+Once you build a **release version** of your app, don't forget to remove those flags as you want to build an apk/app bundle that works for all the ABIs and not only for the one you're using in your daily development workflow.
+
+## Enable Configuration Caching (Android-only)
+
+Since React Native 0.79, you can also enable Gradle Configuration Caching.
+
+When you’re running an Android build with `yarn android`, you will be executing a Gradle build that is composed by two steps ([source](https://docs.gradle.org/current/userguide/build_lifecycle.html)):
+
+- Configuration phase, when all the `.gradle` files are evaluated.
+- Execution phase, when the tasks are actually executed so the Java/Kotlin code is compiled and so on.
+
+You will now be able to enable Configuration Caching, which will allow you to skip the Configuration phase on subsequent builds.
+
+This is beneficial when making frequent changes to the native code as it improves build times.
+
+For example here you can see how rebuilding faster it is to rebuild RN-Tester after a change in the native code:
+
+
+
+You can enable Gradle Configuration Caching by adding the following line in your `android/gradle.properties` file:
+
+```
+org.gradle.configuration-cache=true
+```
+
+Please refer to the [official Gradle documentation](https://docs.gradle.org/current/userguide/configuration_cache.html) for more resources on Configuration Caching.
+
+## Using a Maven Mirror (Android-only)
+
+When building Android apps, your Gradle builds will need to download the necessary dependencies from Maven Central and other repositories from the internet.
+
+If your organization is running a Maven repository mirror, you should consider using it as it will speed up your build, by downloading the artifacts from the mirror rather than from the internet.
+
+You can configure a mirror by specifying the `exclusiveEnterpriseRepository` property in your `android/gradle.properties` file:
+
+```diff
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Use this property to configure a Maven enterprise repository
+# that will be used exclusively to fetch all of your dependencies.
++exclusiveEnterpriseRepository=https://my.internal.proxy.net/
+```
+
+By setting this property, your build will fetch dependencies **exclusively** from your specified repository and not from others.
+
+## Use a compiler cache
+
+If you're running frequent native builds (either C++ or Objective-C), you might benefit from using a **compiler cache**.
+
+Specifically you can use two type of caches: local compiler caches and distributed compiler caches.
+
+### Local caches
+
+:::info
+The following instructions will work for **both Android & iOS**.
+If you're building only Android apps, you should be good to go.
+If you're building also iOS apps, please follow the instructions in the [Xcode Specific Setup](#xcode-specific-setup) section below.
+:::
+
+We suggest to use [**ccache**](https://ccache.dev/) to cache the compilation of your native builds.
+Ccache works by wrapping the C++ compilers, storing the compilation results, and skipping the compilation
+if an intermediate compilation result was originally stored.
+
+Ccache is available in the package manager for most operating systems. On macOS, we can install ccache with `brew install ccache`.
+Or you can follow the [official installation instructions](https://github.com/ccache/ccache/blob/master/doc/install.md) to install from source.
+
+You can then do two clean builds (e.g. on Android you can first run `yarn react-native run-android`, delete the `android/app/build` folder and run the first command once more). You will notice that the second build was way faster than the first one (it should take seconds rather than minutes).
+While building, you can verify that `ccache` works correctly and check the cache hits/miss rate `ccache -s`
+
+```
+$ ccache -s
+Summary:
+ Hits: 196 / 3068 (6.39 %)
+ Direct: 0 / 3068 (0.00 %)
+ Preprocessed: 196 / 3068 (6.39 %)
+ Misses: 2872
+ Direct: 3068
+ Preprocessed: 2872
+ Uncacheable: 1
+Primary storage:
+ Hits: 196 / 6136 (3.19 %)
+ Misses: 5940
+ Cache size (GB): 0.60 / 20.00 (3.00 %)
+```
+
+Note that `ccache` aggregates the stats over all builds. You can use `ccache --zero-stats` to reset them before a build to verify the cache-hit ratio.
+
+Should you need to wipe your cache, you can do so with `ccache --clear`
+
+#### Xcode Specific Setup
+
+To make sure `ccache` works correctly with iOS and Xcode, you need to enable React Native support for ccache in `ios/Podfile`.
+
+Open `ios/Podfile` in your editor and uncomment the `ccache_enabled` line.
+
+```ruby
+ post_install do |installer|
+ # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
+ react_native_post_install(
+ installer,
+ config[:reactNativePath],
+ :mac_catalyst_enabled => false,
+ # TODO: Uncomment the line below
+ :ccache_enabled => true
+ )
+ end
+```
+
+#### Using this approach on a CI
+
+Ccache uses the `/Users/$USER/Library/Caches/ccache` folder on macOS to store the cache.
+Therefore you could save & restore the corresponding folder also on CI to speedup your builds.
+
+However, there are a couple of things to be aware:
+
+1. On CI, we recommend to do a full clean build, to avoid poisoned cache problems. If you follow the approach mentioned in the previous paragraph, you should be able to parallelize the native build on 4 different ABIs and you will most likely not need `ccache` on CI.
+
+2. `ccache` relies on timestamps to compute a cache hit. This doesn't work well on CI as files are re-downloaded at every CI run. To overcome this, you'll need to use the `compiler_check content` option which relies instead on [hashing the content of the file](https://ccache.dev/manual/4.3.html).
+
+### Distributed caches
+
+Similar to local caches, you might want to consider using a distributed cache for your native builds.
+This could be specifically useful in bigger organizations that are doing frequent native builds.
+
+We recommend to use [sccache](https://github.com/mozilla/sccache) to achieve this.
+We defer to the sccache [distributed compilation quickstart](https://github.com/mozilla/sccache/blob/main/docs/DistributedQuickstart.md) for instructions on how to setup and use this tool.
diff --git a/website/versioned_docs/version-0.86/building-for-tv.md b/website/versioned_docs/version-0.86/building-for-tv.md
new file mode 100644
index 00000000000..b39f843a481
--- /dev/null
+++ b/website/versioned_docs/version-0.86/building-for-tv.md
@@ -0,0 +1,11 @@
+---
+id: building-for-tv
+title: 🗑️ Building For TV Devices
+hide_table_of_contents: true
+---
+
+TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.
+
+:::warning Deprecated
+TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos#readme) repository. Please see the **README** there for information on projects for Apple TV or Android TV.
+:::
diff --git a/website/versioned_docs/version-0.86/button.md b/website/versioned_docs/version-0.86/button.md
new file mode 100644
index 00000000000..9fc529fc863
--- /dev/null
+++ b/website/versioned_docs/version-0.86/button.md
@@ -0,0 +1,299 @@
+---
+id: button
+title: Button
+---
+
+A basic button component that should render nicely on any platform. Supports a minimal level of customization.
+
+If this button doesn't look right for your app, you can build your own button using [Pressable](pressable). For inspiration, look at the [source code for the Button component](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Button.js).
+
+```tsx
+
+```
+
+## Example
+
+```SnackPlayer name=Button%20Example&ext=js
+import React from 'react';
+import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const Separator = () => ;
+
+function showAlert(message) {
+ if (Platform.OS === 'web') {
+ window.alert(message);
+ } else {
+ Alert.alert(message);
+ }
+}
+
+const App = () => (
+
+
+
+
+ The title and onPress handler are required. It is recommended to set
+ accessibilityLabel to help make your app usable by everyone.
+
+
+
+
+
+ Adjust the color in a way that looks standard on each platform. On
+ iOS, the color prop controls the color of the text. On Android, the
+ color adjusts the background color of the button.
+
+
+
+
+
+ All interaction for the component are disabled.
+
+
+
+
+
+ This layout strategy lets the title define the width of the button.
+
+
+
+
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ marginHorizontal: 16,
+ },
+ title: {
+ textAlign: 'center',
+ marginVertical: 8,
+ },
+ fixToText: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ },
+ separator: {
+ marginVertical: 8,
+ borderBottomColor: '#737373',
+ borderBottomWidth: StyleSheet.hairlineWidth,
+ },
+});
+
+export default App;
+```
+
+---
+
+# Reference
+
+## Props
+
+###
Required
**`onPress`**
+
+Handler to be called when the user taps the button.
+
+| Type |
+| ---------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)})` |
+
+---
+
+###
Required
**`title`**
+
+Text to display inside the button. On Android the given title will be converted to the uppercased form.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLabel`
+
+Text to display for blindness accessibility features.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLanguage`
iOS
+
+A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
+
+See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentation/objectivec/nsobject/1615192-accessibilitylanguage) for more information.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type | Required |
+| ----- | -------- |
+| array | No |
+
+---
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide](accessibility.md#accessibility-actions) for more information.
+
+| Type | Required |
+| -------- | -------- |
+| function | No |
+
+---
+
+### `color`
+
+Color of the text (iOS), or background color of the button (Android).
+
+```mdx-code-block
+export function ColorDefaults() {
+ return (
+ <>
+ {" "}'#2196F3'
+ {" "}
+
+Designates the next view to receive focus when the user navigates down. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown).
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `nextFocusForward`
Android
TV
+
+Designates the next view to receive focus when the user navigates forward. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward).
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `nextFocusLeft`
Android
TV
+
+Designates the next view to receive focus when the user navigates left. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft).
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `nextFocusRight`
Android
TV
+
+Designates the next view to receive focus when the user navigates right. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight).
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `nextFocusUp`
Android
TV
+
+Designates the next view to receive focus when the user navigates up. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp).
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `touchSoundDisabled`
Android
+
+If `true`, doesn't play system sound on touch.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
diff --git a/website/versioned_docs/version-0.86/checkbox.md b/website/versioned_docs/version-0.86/checkbox.md
new file mode 100644
index 00000000000..e92591defd5
--- /dev/null
+++ b/website/versioned_docs/version-0.86/checkbox.md
@@ -0,0 +1,8 @@
+---
+id: checkbox
+title: '❌ CheckBox'
+---
+
+:::danger[Removed from React Native]
+Use one of the [community packages](https://reactnative.directory/?search=checkbox) instead.
+:::
diff --git a/website/versioned_docs/version-0.86/clipboard.md b/website/versioned_docs/version-0.86/clipboard.md
new file mode 100644
index 00000000000..bcfbf8714d9
--- /dev/null
+++ b/website/versioned_docs/version-0.86/clipboard.md
@@ -0,0 +1,8 @@
+---
+id: clipboard
+title: '❌ Clipboard'
+---
+
+:::danger[Removed from React Native]
+Use one of the [community packages](https://reactnative.directory/?search=clipboard) instead.
+:::
diff --git a/website/versioned_docs/version-0.86/colors.md b/website/versioned_docs/version-0.86/colors.md
new file mode 100644
index 00000000000..3c106ac6855
--- /dev/null
+++ b/website/versioned_docs/version-0.86/colors.md
@@ -0,0 +1,221 @@
+---
+id: colors
+title: Color Reference
+---
+
+Components in React Native are [styled using JavaScript](style). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). General guides on the color usage on each platform could be found below:
+
+- [Android](https://material.io/design/color/color-usage.html)
+- [iOS](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/)
+
+## Color APIs
+
+React Native has several color APIs designed to allow you to take full advantage of your platform's design and user preferences.
+
+- [PlatformColor](platformcolor) lets you reference the platform's color system.
+- [DynamicColorIOS](dynamiccolorios) is iOS specific and allows you to specify which colors should be used in light or Dark Mode.
+
+## Color representations
+
+### Red Green Blue (RGB)
+
+React Native supports `rgb()` and `rgba()` in both hexadecimal and functional notation:
+
+- `'#f0f'` (#rgb)
+- `'#ff00ff'` (#rrggbb)
+- `'#f0ff'` (#rgba)
+- `'#ff00ff00'` (#rrggbbaa)
+- `'rgb(255, 0, 255)'`
+- `'rgb(255 0 255)'`
+- `'rgba(255, 0, 255, 1.0)'`
+- `'rgba(255 0 255 / 1.0)'`
+
+### Hue Saturation Lightness (HSL)
+
+React Native supports `hsl()` and `hsla()` in functional notation:
+
+- `'hsl(360, 100%, 100%)'`
+- `'hsl(360 100% 100%)'`
+- `'hsla(360, 100%, 100%, 1.0)'`
+- `'hsla(360 100% 100% / 1.0)'`
+
+### Hue Whiteness Blackness (HWB)
+
+React Native supports `hwb()` in functional notation:
+
+- `'hwb(0, 0%, 100%)'`
+- `'hwb(360, 100%, 100%)'`
+- `'hwb(0 0% 0%)'`
+- `'hwb(70 50% 0%)'`
+
+### Color ints
+
+React Native also supports colors as an `int` values (in RGB color mode):
+
+- `0xff00ff00` (0xrrggbbaa)
+
+:::caution
+This might appear similar to the Android [Color](https://developer.android.com/reference/android/graphics/Color) ints representation but on Android values are stored in SRGB color mode (0xaarrggbb).
+:::
+
+### Named colors
+
+In React Native you can also use color name strings as values.
+
+:::info
+React Native only supports lowercase color names. Uppercase color names are not supported.
+:::
+
+#### `transparent`
+
+This is a shortcut for `rgba(0,0,0,0)`, same like in [CSS3](https://www.w3.org/TR/css-color-3/#transparent).
+
+#### Color keywords
+
+Named colors implementation follows the [CSS3/SVG specification](https://www.w3.org/TR/css-color-3/#svg-color):
+
+- aliceblue (#f0f8ff)
+- antiquewhite (#faebd7)
+- aqua (#00ffff)
+- aquamarine (#7fffd4)
+- azure (#f0ffff)
+- beige (#f5f5dc)
+- bisque (#ffe4c4)
+- black (#000000)
+- blanchedalmond (#ffebcd)
+- blue (#0000ff)
+- blueviolet (#8a2be2)
+- brown (#a52a2a)
+- burlywood (#deb887)
+- cadetblue (#5f9ea0)
+- chartreuse (#7fff00)
+- chocolate (#d2691e)
+- coral (#ff7f50)
+- cornflowerblue (#6495ed)
+- cornsilk (#fff8dc)
+- crimson (#dc143c)
+- cyan (#00ffff)
+- darkblue (#00008b)
+- darkcyan (#008b8b)
+- darkgoldenrod (#b8860b)
+- darkgray (#a9a9a9)
+- darkgreen (#006400)
+- darkgrey (#a9a9a9)
+- darkkhaki (#bdb76b)
+- darkmagenta (#8b008b)
+- darkolivegreen (#556b2f)
+- darkorange (#ff8c00)
+- darkorchid (#9932cc)
+- darkred (#8b0000)
+- darksalmon (#e9967a)
+- darkseagreen (#8fbc8f)
+- darkslateblue (#483d8b)
+- darkslategrey (#2f4f4f)
+- darkturquoise (#00ced1)
+- darkviolet (#9400d3)
+- deeppink (#ff1493)
+- deepskyblue (#00bfff)
+- dimgray (#696969)
+- dimgrey (#696969)
+- dodgerblue (#1e90ff)
+- firebrick (#b22222)
+- floralwhite (#fffaf0)
+- forestgreen (#228b22)
+- fuchsia (#ff00ff)
+- gainsboro (#dcdcdc)
+- ghostwhite (#f8f8ff)
+- gold (#ffd700)
+- goldenrod (#daa520)
+- gray (#808080)
+- green (#008000)
+- greenyellow (#adff2f)
+- grey (#808080)
+- honeydew (#f0fff0)
+- hotpink (#ff69b4)
+- indianred (#cd5c5c)
+- indigo (#4b0082)
+- ivory (#fffff0)
+- khaki (#f0e68c)
+- lavender (#e6e6fa)
+- lavenderblush (#fff0f5)
+- lawngreen (#7cfc00)
+- lemonchiffon (#fffacd)
+- lightblue (#add8e6)
+- lightcoral (#f08080)
+- lightcyan (#e0ffff)
+- lightgoldenrodyellow (#fafad2)
+- lightgray (#d3d3d3)
+- lightgreen (#90ee90)
+- lightgrey (#d3d3d3)
+- lightpink (#ffb6c1)
+- lightsalmon (#ffa07a)
+- lightseagreen (#20b2aa)
+- lightskyblue (#87cefa)
+- lightslategrey (#778899)
+- lightsteelblue (#b0c4de)
+- lightyellow (#ffffe0)
+- lime (#00ff00)
+- limegreen (#32cd32)
+- linen (#faf0e6)
+- magenta (#ff00ff)
+- maroon (#800000)
+- mediumaquamarine (#66cdaa)
+- mediumblue (#0000cd)
+- mediumorchid (#ba55d3)
+- mediumpurple (#9370db)
+- mediumseagreen (#3cb371)
+- mediumslateblue (#7b68ee)
+- mediumspringgreen (#00fa9a)
+- mediumturquoise (#48d1cc)
+- mediumvioletred (#c71585)
+- midnightblue (#191970)
+- mintcream (#f5fffa)
+- mistyrose (#ffe4e1)
+- moccasin (#ffe4b5)
+- navajowhite (#ffdead)
+- navy (#000080)
+- oldlace (#fdf5e6)
+- olive (#808000)
+- olivedrab (#6b8e23)
+- orange (#ffa500)
+- orangered (#ff4500)
+- orchid (#da70d6)
+- palegoldenrod (#eee8aa)
+- palegreen (#98fb98)
+- paleturquoise (#afeeee)
+- palevioletred (#db7093)
+- papayawhip (#ffefd5)
+- peachpuff (#ffdab9)
+- peru (#cd853f)
+- pink (#ffc0cb)
+- plum (#dda0dd)
+- powderblue (#b0e0e6)
+- purple (#800080)
+- rebeccapurple (#663399)
+- red (#ff0000)
+- rosybrown (#bc8f8f)
+- royalblue (#4169e1)
+- saddlebrown (#8b4513)
+- salmon (#fa8072)
+- sandybrown (#f4a460)
+- seagreen (#2e8b57)
+- seashell (#fff5ee)
+- sienna (#a0522d)
+- silver (#c0c0c0)
+- skyblue (#87ceeb)
+- slateblue (#6a5acd)
+- slategray (#708090)
+- snow (#fffafa)
+- springgreen (#00ff7f)
+- steelblue (#4682b4)
+- tan (#d2b48c)
+- teal (#008080)
+- thistle (#d8bfd8)
+- tomato (#ff6347)
+- turquoise (#40e0d0)
+- violet (#ee82ee)
+- wheat (#f5deb3)
+- white (#ffffff)
+- whitesmoke (#f5f5f5)
+- yellow (#ffff00)
+- yellowgreen (#9acd32)
diff --git a/website/versioned_docs/version-0.86/communication-android.md b/website/versioned_docs/version-0.86/communication-android.md
new file mode 100644
index 00000000000..f78dc84cf65
--- /dev/null
+++ b/website/versioned_docs/version-0.86/communication-android.md
@@ -0,0 +1,153 @@
+---
+id: communication-android
+title: Communication between native and React Native
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+In [Integrating with Existing Apps guide](integration-with-existing-apps) and [Native UI Components guide](legacy/native-components-android) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
+
+## Introduction
+
+React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
+
+The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.
+
+## Properties
+
+Properties are the most straightforward way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
+
+### Passing properties from native to React Native
+
+You can pass properties down to the React Native app by providing a custom implementation of `ReactActivityDelegate` in your main activity. This implementation should override `getLaunchOptions` to return a `Bundle` with the desired properties.
+
+
+
+
+
+```java
+public class MainActivity extends ReactActivity {
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected Bundle getLaunchOptions() {
+ Bundle initialProperties = new Bundle();
+ ArrayList imageList = new ArrayList(Arrays.asList(
+ "https://dummyimage.com/600x400/ffffff/000000.png",
+ "https://dummyimage.com/600x400/000000/ffffff.png"
+ ));
+ initialProperties.putStringArrayList("images", imageList);
+ return initialProperties;
+ }
+ };
+ }
+}
+```
+
+
+
+
+
+```kotlin
+class MainActivity : ReactActivity() {
+ override fun createReactActivityDelegate(): ReactActivityDelegate {
+ return object : ReactActivityDelegate(this, mainComponentName) {
+ override fun getLaunchOptions(): Bundle {
+ val imageList = arrayListOf("https://dummyimage.com/600x400/ffffff/000000.png", "https://dummyimage.com/600x400/000000/ffffff.png")
+ val initialProperties = Bundle().apply { putStringArrayList("images", imageList) }
+ return initialProperties
+ }
+ }
+ }
+}
+```
+
+
+
+
+```tsx
+import React from 'react';
+import {View, Image} from 'react-native';
+
+export default class ImageBrowserApp extends React.Component {
+ renderImage(imgURI) {
+ return ;
+ }
+ render() {
+ return {this.props.images.map(this.renderImage)};
+ }
+}
+```
+
+`ReactRootView` provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.
+
+
+
+
+
+```java
+Bundle updatedProps = mReactRootView.getAppProperties();
+ArrayList imageList = new ArrayList(Arrays.asList(
+ "https://dummyimage.com/600x400/ff0000/000000.png",
+ "https://dummyimage.com/600x400/ffffff/ff0000.png"
+));
+updatedProps.putStringArrayList("images", imageList);
+
+mReactRootView.setAppProperties(updatedProps);
+```
+
+
+
+
+
+```kotlin
+var updatedProps: Bundle = reactRootView.getAppProperties()
+var imageList = arrayListOf("https://dummyimage.com/600x400/ff0000/000000.png", "https://dummyimage.com/600x400/ffffff/ff0000.png")
+```
+
+
+
+
+
+It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.
+
+There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.
+
+:::info
+Currently, JS function `componentWillUpdateProps` of the top level RN component will not be called after a prop update. However, you can access the new props in `componentDidMount` function.
+:::
+
+### Passing properties from React Native to native
+
+The problem exposing properties of native components is covered in detail in [this article](legacy/native-components-android#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation). In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp`, then use them in React Native as if the component was an ordinary React Native component.
+
+### Limits of properties
+
+The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.
+
+Although we have a flavor of cross-language callbacks ([described here](legacy/native-modules-android#callbacks)), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
+
+## Other ways of cross-language interaction (events and native modules)
+
+As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).
+
+React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.
+
+### Calling React Native functions from native (events)
+
+Events are described in detail in [this article](legacy/native-components-android#events). Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.
+
+Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:
+
+- As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.
+- Events share namespace, which means that you may encounter some name collisions. Collisions will not be detected statically, which makes them hard to debug.
+- If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you'll likely need to introduce identifiers and pass them along with events (you can use the native view's `reactTag` as an identifier).
+
+### Calling native functions from React Native (native modules)
+
+Native modules are Java/Kotlin classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in [this article](legacy/native-modules-android).
+
+:::warning
+All native modules share the same namespace. Watch out for name collisions when creating new ones.
+:::
diff --git a/website/versioned_docs/version-0.86/communication-ios.md b/website/versioned_docs/version-0.86/communication-ios.md
new file mode 100644
index 00000000000..f82cae7e620
--- /dev/null
+++ b/website/versioned_docs/version-0.86/communication-ios.md
@@ -0,0 +1,204 @@
+---
+id: communication-ios
+title: Communication between native and React Native
+---
+
+In [Integrating with Existing Apps guide](integration-with-existing-apps) and [Native UI Components guide](legacy/native-components-ios) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
+
+## Introduction
+
+React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
+
+The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.
+
+## Properties
+
+Properties are the most straightforward way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
+
+### Passing properties from native to React Native
+
+In order to embed a React Native view in a native component, we use `RCTRootView`. `RCTRootView` is a `UIView` that holds a React Native app. It also provides an interface between native side and the hosted app.
+
+`RCTRootView` has an initializer that allows you to pass arbitrary properties down to the React Native app. The `initialProperties` parameter has to be an instance of `NSDictionary`. The dictionary is internally converted into a JSON object that the top-level JS component can reference.
+
+```objectivec
+NSArray *imageList = @[@"https://dummyimage.com/600x400/ffffff/000000.png",
+ @"https://dummyimage.com/600x400/000000/ffffff.png"];
+
+NSDictionary *props = @{@"images" : imageList};
+
+RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+ moduleName:@"ImageBrowserApp"
+ initialProperties:props];
+```
+
+```tsx
+import React from 'react';
+import {View, Image} from 'react-native';
+
+export default class ImageBrowserApp extends React.Component {
+ renderImage(imgURI) {
+ return ;
+ }
+ render() {
+ return {this.props.images.map(this.renderImage)};
+ }
+}
+```
+
+`RCTRootView` also provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.
+
+```objectivec
+NSArray *imageList = @[@"https://dummyimage.com/600x400/ff0000/000000.png",
+ @"https://dummyimage.com/600x400/ffffff/ff0000.png"];
+
+rootView.appProperties = @{@"images" : imageList};
+```
+
+It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.
+
+:::note
+Currently, there is a known issue where setting appProperties during the bridge startup, the change can be lost. See https://github.com/facebook/react-native/issues/20115 for more information.
+:::
+
+There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.
+
+### Passing properties from React Native to native
+
+The problem exposing properties of native components is covered in detail in [this article](legacy/native-components-ios#properties). In short, export properties with `RCT_CUSTOM_VIEW_PROPERTY` macro in your custom native component, then use them in React Native as if the component was an ordinary React Native component.
+
+### Limits of properties
+
+The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.
+
+Although we have a flavor of cross-language callbacks ([described here](legacy/native-modules-ios#callbacks)), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
+
+## Other ways of cross-language interaction (events and native modules)
+
+As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).
+
+React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.
+
+### Calling React Native functions from native (events)
+
+Events are described in detail in [this article](legacy/native-components-ios#events). Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.
+
+Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:
+
+- As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.
+- Events share namespace, which means that you may encounter some name collisions. Collisions will not be detected statically, which makes them hard to debug.
+- If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you'll likely need to introduce identifiers and pass them along with events (you can use the native view's `reactTag` as an identifier).
+
+The common pattern we use when embedding native in React Native is to make the native component's RCTViewManager a delegate for the views, sending events back to JavaScript via the bridge. This keeps related event calls in one place.
+
+### Calling native functions from React Native (native modules)
+
+Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in [this article](legacy/native-modules-ios#content).
+
+The fact that native modules are singletons limits the mechanism in the context of embedding. Let's say we have a React Native component embedded in a native view and we want to update the native, parent view. Using the native module mechanism, we would export a function that not only takes expected arguments, but also an identifier of the parent native view. The identifier would be used to retrieve a reference to the parent view to update. That said, we would need to keep a mapping from identifiers to native views in the module.
+
+Although this solution is complex, it is used in `RCTUIManager`, which is an internal React Native class that manages all React Native views.
+
+Native modules can also be used to expose existing native libraries to JS. The [Geolocation library](https://github.com/michalchudziak/react-native-geolocation) is a living example of the idea.
+
+:::caution
+All native modules share the same namespace. Watch out for name collisions when creating new ones.
+:::
+
+## Layout computation flow
+
+When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layout problems and provides a brief description of mechanisms to address them.
+
+### Layout of a native component embedded in React Native
+
+This case is covered in [this article](legacy/native-components-ios#styles). To summarize, since all our native react views are subclasses of `UIView`, most style and size attributes will work like you would expect out of the box.
+
+### Layout of a React Native component embedded in native
+
+#### React Native content with fixed size
+
+The general scenario is when we have a React Native app with a fixed size, which is known to the native side. In particular, a full-screen React Native view falls into this case. If we want a smaller root view, we can explicitly set RCTRootView's frame.
+
+For instance, to make an RN app 200 (logical) pixels high, and the hosting view's width wide, we could do:
+
+```objectivec title='SomeViewController.m'
+- (void)viewDidLoad
+{
+ [...]
+ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+ moduleName:appName
+ initialProperties:props];
+ rootView.frame = CGRectMake(0, 0, self.view.width, 200);
+ [self.view addSubview:rootView];
+}
+```
+
+When we have a fixed size root view, we need to respect its bounds on the JS side. In other words, we need to ensure that the React Native content can be contained within the fixed-size root view. The easiest way to ensure this is to use Flexbox layout. If you use absolute positioning, and React components are visible outside the root view's bounds, you'll get overlap with native views, causing some features to behave unexpectedly. For instance, 'TouchableHighlight' will not highlight your touches outside the root view's bounds.
+
+It's totally fine to update root view's size dynamically by re-setting its frame property. React Native will take care of the content's layout.
+
+#### React Native content with flexible size
+
+In some cases we'd like to render content of initially unknown size. Let's say the size will be defined dynamically in JS. We have two solutions to this problem.
+
+1. You can wrap your React Native view in a `ScrollView` component. This guarantees that your content will always be available and it won't overlap with native views.
+2. React Native allows you to determine, in JS, the size of the RN app and provide it to the owner of the hosting `RCTRootView`. The owner is then responsible for re-laying out the subviews and keeping the UI consistent. We achieve this with `RCTRootView`'s flexibility modes.
+
+`RCTRootView` supports 4 different size flexibility modes:
+
+```objectivec title='RCTRootView.h'
+typedef NS_ENUM(NSInteger, RCTRootViewSizeFlexibility) {
+ RCTRootViewSizeFlexibilityNone = 0,
+ RCTRootViewSizeFlexibilityWidth,
+ RCTRootViewSizeFlexibilityHeight,
+ RCTRootViewSizeFlexibilityWidthAndHeight,
+};
+```
+
+`RCTRootViewSizeFlexibilityNone` is the default value, which makes a root view's size fixed (but it still can be updated with `setFrame:`). The other three modes allow us to track React Native content's size updates. For instance, setting mode to `RCTRootViewSizeFlexibilityHeight` will cause React Native to measure the content's height and pass that information back to `RCTRootView`'s delegate. An arbitrary action can be performed within the delegate, including setting the root view's frame, so the content fits. The delegate is called only when the size of the content has changed.
+
+:::caution
+Making a dimension flexible in both JS and native leads to undefined behavior. For example - don't make a top-level React component's width flexible (with `flexbox`) while you're using `RCTRootViewSizeFlexibilityWidth` on the hosting `RCTRootView`.
+:::
+
+Let's look at an example.
+
+```objectivec title='FlexibleSizeExampleView.m'
+- (instancetype)initWithFrame:(CGRect)frame
+{
+ [...]
+
+ _rootView = [[RCTRootView alloc] initWithBridge:bridge
+ moduleName:@"FlexibilityExampleApp"
+ initialProperties:@{}];
+
+ _rootView.delegate = self;
+ _rootView.sizeFlexibility = RCTRootViewSizeFlexibilityHeight;
+ _rootView.frame = CGRectMake(0, 0, self.frame.size.width, 0);
+}
+
+#pragma mark - RCTRootViewDelegate
+- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView
+{
+ CGRect newFrame = rootView.frame;
+ newFrame.size = rootView.intrinsicContentSize;
+
+ rootView.frame = newFrame;
+}
+```
+
+In the example we have a `FlexibleSizeExampleView` view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to `RCTRootViewSizeFlexibilityHeight`, which means that `rootViewDidChangeIntrinsicSize:` method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.
+
+You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/main/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.mm).
+
+It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate `rootViewDidChangeIntrinsicSize:` method will be called once the content size is known.
+
+:::note
+React Native layout calculation is performed on a separate thread, while native UI view updates are done on the main thread.
+This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.
+:::
+
+:::note
+React Native does not perform any layout calculations until the root view becomes a subview of some other views.
+If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use `UIView`'s `hidden` property). Then change its visibility in the delegate method.
+:::
diff --git a/website/versioned_docs/version-0.86/components-and-apis.md b/website/versioned_docs/version-0.86/components-and-apis.md
new file mode 100644
index 00000000000..616ead503e0
--- /dev/null
+++ b/website/versioned_docs/version-0.86/components-and-apis.md
@@ -0,0 +1,213 @@
+---
+id: components-and-apis
+title: Core Components and APIs
+---
+
+React Native provides a number of built-in [Core Components](intro-react-native-components) ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following categories:
+
+- [Basic Components](components-and-apis#basic-components)
+- [User Interface](components-and-apis#user-interface)
+- [List Views](components-and-apis#list-views)
+- [Android-specific](components-and-apis#android-components-and-apis)
+- [iOS-specific](components-and-apis#ios-components-and-apis)
+- [Others](components-and-apis#others)
+
+You're not limited to the components and APIs bundled with React Native. React Native has a community of thousands of developers. If you're looking for a library that does something specific, please refer to [this guide about finding libraries](libraries#finding-libraries).
+
+## Basic Components
+
+Most apps will end up using one or more of these basic components.
+
+
+
+## List Views
+
+Unlike the more generic [`ScrollView`](./scrollview), the following list view components only render elements that are currently showing on the screen. This makes them a performant choice for displaying long lists of data.
+
+
+
+## Others
+
+These components may be useful for certain applications. For an exhaustive list of components and APIs, check out the sidebar to the left (or menu above, if you are on a narrow screen).
+
+
diff --git a/website/versioned_docs/version-0.86/datepickerandroid.md b/website/versioned_docs/version-0.86/datepickerandroid.md
new file mode 100644
index 00000000000..c928fdffee6
--- /dev/null
+++ b/website/versioned_docs/version-0.86/datepickerandroid.md
@@ -0,0 +1,8 @@
+---
+id: datepickerandroid
+title: '❌ DatePickerAndroid'
+---
+
+:::danger[Removed from React Native]
+Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead.
+:::
diff --git a/website/versioned_docs/version-0.86/datepickerios.md b/website/versioned_docs/version-0.86/datepickerios.md
new file mode 100644
index 00000000000..7965ec05c3a
--- /dev/null
+++ b/website/versioned_docs/version-0.86/datepickerios.md
@@ -0,0 +1,8 @@
+---
+id: datepickerios
+title: '❌ DatePickerIOS'
+---
+
+:::danger[Removed from React Native]
+Use one of the [community packages](https://reactnative.directory/?search=datepicker) instead.
+:::
diff --git a/website/versioned_docs/version-0.86/debugging-native-code.md b/website/versioned_docs/version-0.86/debugging-native-code.md
new file mode 100644
index 00000000000..7595151b0be
--- /dev/null
+++ b/website/versioned_docs/version-0.86/debugging-native-code.md
@@ -0,0 +1,79 @@
+---
+id: debugging-native-code
+title: Debugging Native Code
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+
+
Projects with Native Code Only
+
The following section only applies to projects with native code exposed. If you are using the managed Expo workflow, see the guide on prebuild to use this API.
+
+
+## Accessing Logs
+
+You can display the native logs for an iOS or Android app by using the following commands in a terminal while the app is running:
+
+```shell
+# For Android:
+npx react-native log-android
+# Or, for iOS:
+npx react-native log-ios
+```
+
+You may also access these through Debug > Open System Log… in the iOS Simulator or by running `adb logcat "*:S" ReactNative:V ReactNativeJS:V` in a terminal while an Android app is running on a device or emulator.
+
+
+**💡 Custom Native Logs**
+
+If you are writing a Native Module and want to add custom logs to your module for debugging purposes, you can use the following method:
+
+#### Android (Java/Kotlin)
+
+In your native module, use the `Log` class to add logs that can be viewed in Logcat:
+
+```java
+import android.util.Log;
+
+private void log(String message) {
+ Log.d("YourModuleName", message);
+}
+```
+
+To view these logs in Logcat, use this command, replacing `YourModuleName` with your custom tag:
+
+```shell
+adb logcat "*:S" ReactNative:V ReactNativeJS:V YourModuleName:D
+```
+
+#### iOS (Objective-C/Swift)
+
+In your native module, use `NSLog` for custom logs:
+
+```objective-c
+NSLog(@"YourModuleName: %@", message);
+```
+
+Or, in Swift:
+
+```swift
+print("YourModuleName: \(message)")
+```
+
+These logs will appear in the Xcode console when running the app.
+
+
+
+## Debugging in a Native IDE
+
+When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.
+
+Another option is to run your application using the React Native CLI and attach the native debugger of the native IDE (Android Studio or Xcode) to the process.
+
+### Android Studio
+
+On Android Studio you can do this by going on the "Run" option on the menu bar, clicking on "Attach to Process..." and selecting the running React Native app.
+
+### Xcode
+
+On Xcode click on "Debug" on the top menu bar, select the "Attach to process" option, and select the application in the list of "Likely Targets".
diff --git a/website/versioned_docs/version-0.86/debugging-release-builds.md b/website/versioned_docs/version-0.86/debugging-release-builds.md
new file mode 100644
index 00000000000..6d655859a78
--- /dev/null
+++ b/website/versioned_docs/version-0.86/debugging-release-builds.md
@@ -0,0 +1,97 @@
+---
+id: debugging-release-builds
+title: Debugging Release Builds
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+## Symbolicating a stack trace
+
+If a React Native app throws an unhandled exception in a release build, the output may be obfuscated and hard to read.
+
+```shell
+07-15 10:58:25.820 18979 18998 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
+07-15 10:58:25.820 18979 18998 E AndroidRuntime: Process: com.awesomeproject, PID: 18979 07-15 10:58:25.820 18979 18998 E AndroidRuntime: com.facebook.react.common.JavascriptException: Failed, js engine: hermes, stack:
+07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132161
+07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132084
+07-15 10:58:25.820 18979 18998 E AndroidRuntime: f@1:131854
+07-15 10:58:25.820 18979 18998 E AndroidRuntime: anonymous@1:131119
+```
+
+In the above stack trace, entries like `p@1:132161` are minified function names and bytecode offsets. To debug these calls, we want to translate these into file, line, and function name, e.g. `AwesomeProject/App.js:54:initializeMap`. This is known as **symbolication.**
+
+You can symbolicate minified function names and bytecode like the above by passing the stack trace and a generated source map to [`metro-symbolicate`](https://www.npmjs.com/package/metro-symbolicate).
+
+### Enabling source maps
+
+Source maps are required to symbolicate stack traces. Make sure that source maps are enabled within the build config for the target platform.
+
+
+
+
+:::info
+On Android, source maps are **enabled** by default.
+:::
+
+To enable source map generation, ensure the following `hermesFlags` are present in `android/app/build.gradle`.
+
+```groovy
+react {
+ hermesFlags = ["-O", "-output-source-map"]
+}
+```
+
+If done correctly you should see the output location of the source map during Metro build output.
+
+```text
+Writing bundle output to:, android/app/build/generated/assets/react/release/index.android.bundle
+Writing sourcemap output to:, android/app/build/intermediates/sourcemaps/react/release/index.android.bundle.packager.map
+```
+
+
+
+
+:::info
+On iOS, source maps are **disabled** by default. Use the following instructions to enable them.
+:::
+
+To enable source map generation:
+
+- Open Xcode and edit the build phase "Bundle React Native code and images".
+- Above the other exports, add a `SOURCEMAP_FILE` entry with the desired output path.
+
+```diff
++ export SOURCEMAP_FILE="$(pwd)/../main.jsbundle.map"
+ WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
+```
+
+If done correctly you should see the output location of the source map during Metro build output.
+
+```text
+Writing bundle output to:, Build/Intermediates.noindex/ArchiveIntermediates/application/BuildProductsPath/Release-iphoneos/main.jsbundle
+Writing sourcemap output to:, Build/Intermediates.noindex/ArchiveIntermediates/application/BuildProductsPath/Release-iphoneos/main.jsbundle.map
+```
+
+
+
+
+### Using `metro-symbolicate`
+
+With source maps being generated, we can now translate our stack traces.
+
+```shell
+# Print usage instructions
+npx metro-symbolicate
+
+# From a file containing the stack trace
+npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map < stacktrace.txt
+
+# From adb logcat (Android)
+adb logcat -d | npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map
+```
+
+### Notes on source maps
+
+- Multiple source maps may be generated by the build process. Make sure to use the one in the location shown in the examples.
+- Make sure that the source map you use corresponds to the exact commit of the crashing app. Small changes in source code can cause large differences in offsets.
+- If `metro-symbolicate` exits immediately with success, make sure the input comes from a pipe or redirection and not from a terminal.
diff --git a/website/versioned_docs/version-0.86/debugging.md b/website/versioned_docs/version-0.86/debugging.md
new file mode 100644
index 00000000000..c4c299a2677
--- /dev/null
+++ b/website/versioned_docs/version-0.86/debugging.md
@@ -0,0 +1,104 @@
+---
+id: debugging
+title: Debugging Basics
+---
+
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
+
+:::note
+Debugging features, such as the Dev Menu, LogBox, and React Native DevTools are disabled in release (production) builds.
+:::
+
+## Opening the Dev Menu
+
+React Native provides an in-app developer menu providing access to debugging features. You can access the Dev Menu by shaking your device or via keyboard shortcuts:
+
+- iOS Simulator: Ctrl + Cmd ⌘ + Z (or Device > Shake)
+- Android emulators: Cmd ⌘ + M (macOS) or Ctrl + M (Windows and Linux)
+
+Alternative (Android): `adb shell input keyevent 82`.
+
+
+
+## Opening DevTools
+
+[React Native DevTools](./react-native-devtools) is our built-in debugger for React Native. It allows you to inspect and understand how your JavaScript code is running, similar to a web browser.
+
+To open DevTools, either:
+
+- Select "Open DevTools" in the Dev Menu.
+- Press j from the CLI.
+
+
+
+On first launch, DevTools will open to a welcome panel, along with an open console drawer where you can view logs and interact with the JavaScript runtime. From the top of the window, you can navigate to other panels, including the integrated React Components Inspector and Profiler.
+
+Learn more in our [React Native DevTools guide](./react-native-devtools).
+
+## LogBox
+
+LogBox is an in-app tool that displays when warnings or errors are logged by your app.
+
+
+
+### Fatal Errors
+
+When an unrecoverable error occurs, such as a JavaScript syntax error, LogBox will open with the location of the error. In this state, LogBox is not dismissable since your code cannot be executed. LogBox will automatically dismiss once the syntax error is fixed — either via Fast Refresh or after a manual reload.
+
+### Console Errors and Warnings
+
+Console errors and warnings are displayed as on-screen notifications with a red or yellow badge.
+
+- **Errors** will display with a notification count. Tap the notification to see an expanded view and to paginate through other logs.
+- **Warnings** will display a notification banner without details, prompting you to open React Native DevTools.
+
+When React Native DevTools is open, all errors except fatal errors will be hidden to LogBox. We recommend using the Console panel within React Native DevTools as a source of truth, due to various LogBox options which can hide or adjust the level of certain logs.
+
+
+**💡 Ignoring logs**
+
+LogBox can be configured via the `LogBox` API.
+
+```js
+import {LogBox} from 'react-native';
+```
+
+#### Ignore all logs
+
+LogBox notifications can be disabled using `LogBox.ignoreAllLogs()`. This can be useful in situations such as giving product demos.
+
+```js
+LogBox.ignoreAllLogs();
+```
+
+#### Ignore specific logs
+
+Notifications can be disabled on a per-log basis via `LogBox.ignoreLogs()`. This can be useful for noisy warnings or those that cannot be fixed, e.g. in a third-party dependency.
+
+```js
+LogBox.ignoreLogs([
+ // Exact message
+ 'Warning: componentWillReceiveProps has been renamed',
+
+ // Substring or regex match
+ /GraphQL error: .*/,
+]);
+```
+
+:::note
+
+LogBox will treat certain errors from React as warnings, which will mean they don't display as an in-app error notification. Advanced users can change this behaviour by customising LogBox's warning filter using [`LogBoxData.setWarningFilter()`](https://github.com/facebook/react-native/blob/d334f4d77eea538dff87fdcf2ebc090246cfdbb0/packages/react-native/Libraries/LogBox/Data/LogBoxData.js#L338).
+
+:::
+
+
+
+## Performance Monitor
+
+On Android and iOS, an in-app performance overlay can be toggled during development by selecting **"Perf Monitor"** in the Dev Menu. Learn more about this feature [here](/docs/performance).
+
+
+
+:::info
+The Performance Monitor runs in-app and is a guide. We recommend investigating the native tooling under Android Studio and Xcode for accurate performance measurements.
+:::
diff --git a/website/versioned_docs/version-0.86/devsettings.md b/website/versioned_docs/version-0.86/devsettings.md
new file mode 100644
index 00000000000..58cd4987e03
--- /dev/null
+++ b/website/versioned_docs/version-0.86/devsettings.md
@@ -0,0 +1,51 @@
+---
+id: devsettings
+title: DevSettings
+---
+
+The `DevSettings` module exposes methods for customizing settings for developers in development.
+
+---
+
+# Reference
+
+## Methods
+
+### `addMenuItem()`
+
+```tsx
+static addMenuItem(title: string, handler: () => any);
+```
+
+Add a custom menu item to the Dev Menu.
+
+**Parameters:**
+
+| Name | Type |
+| ------------------------------------------------------------ | -------- |
+| title
Required
| string |
+| handler
Required
| function |
+
+**Example:**
+
+```tsx
+DevSettings.addMenuItem('Show Secret Dev Screen', () => {
+ Alert.alert('Showing secret dev screen!');
+});
+```
+
+---
+
+### `reload()`
+
+```tsx
+static reload(reason?: string): void;
+```
+
+Reload the application. Can be invoked directly or on user interaction.
+
+**Example:**
+
+```tsx
+
+
+If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **VanillaIceCream** API Level 35 image.
+
+:::tip
+We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.
+:::
+
+Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it.
+
+
+