Merge branch 'facebook:main' into main

docs/_getting-started-linux-android.md

@@ -18,7 +18,7 @@ React Native currently recommends version 11 of the Java SE Development Kit (JDK
 
 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.
 
-<h4>1. Install Android Studio</h4>
+<h4 id="android-studio">1. Install Android Studio</h4>
 
 [Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
 
@@ -32,20 +32,20 @@ Then, click "Next" to install all of these components.
 
 Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
 
-<h4>2. Install the Android SDK</h4>
+<h4 id="android-sdk">2. Install the Android SDK</h4>
 
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 12 (S)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 13 (Tiramisu)` 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".
 
 > The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **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 12 (S)` entry, then make sure the following items are checked:
+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 13 (Tiramisu)` entry, then make sure the following items are checked:
 
-- `Android SDK Platform 31`
+- `Android SDK Platform 33`
 - `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 `31.0.0` is selected.
+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 `33.0.0` is selected.
 
 Finally, click "Apply" to download and install the Android SDK and related build tools.
 

docs/_getting-started-macos-android.md

@@ -36,7 +36,7 @@ If you have already installed JDK on your system, we recommend JDK 11. You may e
 
 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.
 
-<h4>1. Install Android Studio</h4>
+<h4 id="android-studio">1. Install Android Studio</h4>
 
 [Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
 
@@ -50,17 +50,17 @@ Then, click "Next" to install all of these components.
 
 Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
 
-<h4>2. Install the Android SDK</h4>
+<h4 id="android-sdk">2. Install the Android SDK</h4>
 
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 12 (S)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 13 (Tiramisu)` 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".
 
 ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png)
 
 > The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **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 12 (S)` entry, then make sure the following items are checked:
+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 13 (Tiramisu)` entry, then make sure the following items are checked:
 
 - `Android SDK Platform 33`
 - `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`

docs/_getting-started-macos-ios.md

@@ -37,7 +37,7 @@ To install a simulator, open <strong>Xcode > Preferences...</strong> and select
 
 #### CocoaPods
 
-[CocoaPods](https://cocoapods.org/) is one of the dependency management system available for iOS. It is built with Ruby and you can install it using the version of Ruby you configured with in the previous steps.
+[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).
 

docs/_getting-started-windows-android.md

@@ -6,7 +6,7 @@ You will need Node, the React Native command line interface, a JDK, and Android
 
 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.
 
-<h3>Node, JDK</h3>
+<h3 id="jdk">Node, JDK</h3>
 
 We recommend installing Node via [Chocolatey](https://chocolatey.org), a popular package manager for Windows.
 
@@ -20,7 +20,7 @@ Open an Administrator Command Prompt (right click Command Prompt and select "Run
 choco install -y nodejs-lts microsoft-openjdk11
 ```
 
-If you have already installed Node on your system, make sure it is Node 14 or newer. If you already have a JDK on your system, we recommend JDK11. You may encounter problems using higher JDK versions.
+If you have already installed Node on your system, make sure it is Node 16 or newer. If you already have a JDK on your system, we recommend JDK11. You may encounter problems using higher JDK versions.
 
 > You can find additional installation options on [Node's Downloads page](https://nodejs.org/en/download/).
 
@@ -30,7 +30,7 @@ If you have already installed Node on your system, make sure it is Node 14 or ne
 
 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.
 
-<h4>1. Install Android Studio</h4>
+<h4 id="android-studio">1. Install Android Studio</h4>
 
 [Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
 
@@ -45,22 +45,22 @@ Then, click "Next" to install all of these components.
 
 Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
 
-<h4>2. Install the Android SDK</h4>
+<h4 id="android-sdk">2. Install the Android SDK</h4>
 
-Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 12 (S)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 13 (Tiramisu)` 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".
 
 ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png)
 
 > The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **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 12 (S)` entry, then make sure the following items are checked:
+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 13 (Tiramisu)` entry, then make sure the following items are checked:
 
-- `Android SDK Platform 31`
+- `Android SDK Platform 33`
 - `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 `31.0.0` is selected.
+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 `33.0.0` is selected.
 
 Finally, click "Apply" to download and install the Android SDK and related build tools.
 

docs/appearance.md

@@ -57,7 +57,7 @@ Although the color scheme is available immediately, this may change (e.g. schedu
 static getColorScheme(): 'light' | 'dark' | null;
 ```
 
-Indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
+Indicates the current user preferred color scheme. The value may be updated later, either through direct user action (e.g. theme selection in device settings or application-level selected user interface style via `setColorScheme`) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
 
 Supported color schemes:
 
@@ -71,6 +71,24 @@ See also: `useColorScheme` hook.
 
 ---
 
+### `setColorScheme()`
+
+```tsx
+static setColorScheme('light' | 'dark' | null): void;
+```
+
+Force the application to always adopt a light or dark interface style. The default value is `null` which causes the application to inherit the system's interface style. If you assign a different value, the new style applies to the application and all native elements within the application (Alerts, Pickers etc).
+
+Supported color schemes:
+
+- `light`: Apply light user interface style.
+- `dark`: Apply dark user interface style.
+- null: Follow the system's interface style.
+
+> Note: The change will not affect the system's selected interface style or any style set in other applications.
+
+---
+
 ### `addChangeListener()`
 
 ```tsx

docs/build-speed.md

@@ -195,40 +195,3 @@ This could be specifically useful in bigger organizations that are doing frequen
 
 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.
-
-## Troubleshooting
-
-Please find instructions on how to solve some of the most common build performance issue in this section.
-
-### Clean Android build with `--active-arch-only` is failing.
-
-If you're using the `--active-arch-only` flag on a clean Android build (e.g. after having cloned a project or after having created a new project) you might experience a build failures as follows:
-
-```
-Android NDK: ERROR:/.../android/app/src/main/jni/Android.mk:fb: LOCAL_SRC_FILES points to a missing file
-Android NDK: Check that /.../android/app/build/react-ndk/exported/armeabi-v7a/libfb.so exists or that its path is correct
-
-/.../Android/sdk/ndk/24.0.8079956/build/core/prebuilt-library.mk:51: *** Android NDK: Aborting    .  Stop.
-```
-
-To overcome this, you can either:
-
-1. Run a full build before without `--active-arch-only`. Subsequent builds with `--active-arch-only` will work correctly.
-2. Add an `abiFilter` block inside your `android/app/build.gradle` file [as follows](https://github.com/facebook/react-native/commit/5dff920177220ae5f4e37c662c63c27ebf696c83):
-
-```diff
-  android {
-    defaultConfig {
-
-      // ...
-
-+     if (!enableSeparateBuildPerCPUArchitecture) {
-+       ndk {
-+         abiFilters (*reactNativeArchitectures())
-+       }
-+     }
-    }
-  }
-```
-
-Projects created with React Native 0.69 and subsequent versions already contain this fix.

docs/debugging.md

@@ -200,3 +200,13 @@ Alternatively, select "Dev Settings" from the Developer Menu, then update the "D
 ## Debugging native code
 
 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".

docs/flatlist.md

@@ -426,11 +426,11 @@ Example usage:
 
 ### <div class="label required basic">Required</div> **`data`**
 
-For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying [`VirtualizedList`](virtualizedlist.md) directly.
+An array (or array-like list) of items to render. Other data types can be used by targetting [`VirtualizedList`](virtualizedlist.md) directly.
 
-| Type  |
-| ----- |
-| array |
+| Type      |
+| --------- |
+| ArrayLike |
 
 ---
 
@@ -642,10 +642,9 @@ If provided, a standard RefreshControl will be added for "Pull to Refresh" funct
 
 Called when the viewability of rows changes, as defined by the `viewabilityConfig` prop.
 
-| Type |
-| ---- |
-
-| (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void;
+| Type                                                                                             |
+| ------------------------------------------------------------------------------------------------ |
+| (callback: {changed: [ViewToken](viewtoken)[], viewableItems: [ViewToken](viewtoken)[]} => void; |
 
 ---
 

docs/image-style-props.md

@@ -612,12 +612,37 @@ For details of how this works under the hood, see [Fresco documentation](https:/
 
 ### `resizeMode`
 
+Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to `cover`.
+
+- `cover`: Scale the image uniformly (maintain the image's aspect ratio) so that:
+
+  - Both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding)
+  - At least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding)
+
+- `contain`: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
+
+- `stretch`: Scale width and height independently, This may change the aspect ratio of the src.
+
+- `repeat`: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.
+
+- `center`: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.
+
 | Type                                                              | Default   |
 | ----------------------------------------------------------------- | --------- |
 | enum(`'cover'`, `'contain'`, `'stretch'`, `'repeat'`, `'center'`) | `'cover'` |
 
 ---
 
+### `objectFit`
+
+Determines how to resize the image when the frame doesn't match the raw image dimensions.
+
+| Type                                                   | Default   |
+| ------------------------------------------------------ | --------- |
+| enum(`'cover'`, `'contain'`, `'fill'`, `'scale-down'`) | `'cover'` |
+
+---
+
 ### `tintColor`
 
 Changes the color of all the non-transparent pixels to the tintColor.

docs/image.md

@@ -322,16 +322,6 @@ Similarly to `source`, this property represents the resource used to render the
 
 ---
 
-### `objectFit`
-
-Determines how to resize the image when the frame doesn't match the raw image dimensions.
-
-| Type                                                   | Default   |
-| ------------------------------------------------------ | --------- |
-| enum(`'cover'`, `'contain'`, `'fill'`, `'scale-down'`) | `'cover'` |
-
----
-
 ### `onError`
 
 Invoked on load error.

docs/native-modules-android.md

@@ -29,7 +29,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide
 
 ### Create A Custom Native Module File
 
-The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both for either Kotlin or Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
+The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both Kotlin and Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
 
 <figure>
   <img src="/docs/assets/native-modules-android-add-class.png" width="700" alt="Image of adding a class called CalendarModule.java within the Android Studio." />
@@ -42,7 +42,7 @@ Then add the following content:
 <TabItem value="java">
 
 ```java
-package com.your-app-name; // replace com.your-app-name with your app’s name
+package com.your-apps-package-name; // replace your-apps-package-name with your app’s package name
 import com.facebook.react.bridge.NativeModule;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContext;
@@ -62,7 +62,7 @@ public class CalendarModule extends ReactContextBaseJavaModule {
 <TabItem value="kotlin">
 
 ```kotlin
-package com.your-app-name // replace com.your-app-name with your app’s name
+package com.your-apps-package-name; // replace your-apps-package-name with your app’s package name
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactContext