Merge pull request #920 from facebook/main

sync

.eslintrc.json

@@ -12,6 +12,7 @@
       "extends": ["plugin:mdx/recommended"]
     }
   ],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": "latest",

.github/workflows/pre-merge.yml

@@ -9,12 +9,15 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "yarn"
+
       - name: Install dependencies
         run: yarn install --frozen-lockfile --no-progress --non-interactive
 
@@ -25,17 +28,20 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "yarn"
+
       - name: Install dependencies
         run: yarn install --frozen-lockfile --no-progress --non-interactive
 
       - name: Build
         run: yarn build
         working-directory: website
         env:
-          NODE_OPTIONS: "--max_old_space_size=4096"
+          NODE_OPTIONS: "--max_old_space_size=8192"

.prettierrc → .prettierrc.json

@@ -1,7 +1,7 @@
 {
   "overrides": [
     {
-      "files": "*.js",
+      "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
       "options": {
         "arrowParens": "avoid",
         "bracketSpacing": false,

docs/_fabric-native-components.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import IOSContent from "./fabric-native-components-ios.md";
-import AndroidContent from "./fabric-native-components-android.md";
+import React from 'react';
+import IOSContent from './fabric-native-components-ios.md';
+import AndroidContent from './fabric-native-components-android.md';
 
 export function FabricNativeComponentsIOS() {
   return <IOSContent />;

docs/_getting-started-linux-android.md

@@ -32,18 +32,18 @@ Once setup has finalized and you're presented with the Welcome screen, proceed t
 
 <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 14 (UpsideDownCake)` 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 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".
 
 > 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 14 (UpsideDownCake)` 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 15 (VanillaIceCream)` entry, then make sure the following items are checked:
 
-- `Android SDK Platform 34`
+- `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 `34.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 `35.0.0` is selected.
 
 Finally, click "Apply" to download and install the Android SDK and related build tools.
 
@@ -87,7 +87,7 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li
 
 ![Android Studio AVD Manager](/docs/assets/GettingStartedAndroidStudioAVD.png)
 
-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 **UpsideDownCake** API Level 34 image.
+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.
 
 > 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.
 

docs/_getting-started-macos-android.md

@@ -34,7 +34,7 @@ brew info --cask zulu@17
 # Installed using the formulae.brew.sh API on 2024-06-06 at 10:00:00
 
 # Navigate to the folder
-finder /opt/homebrew/Caskroom/zulu@17/<version number> # or /usr/local/Caskroom/zulu@17/<version number>
+open /opt/homebrew/Caskroom/zulu@17/<version number> # or /usr/local/Caskroom/zulu@17/<version number>
 ```
 
 After opening Finder, double click the `Double-Click to Install Azul Zulu JDK 17.pkg` package to install the JDK.
@@ -71,20 +71,20 @@ Once setup has finalized and you're presented with the Welcome screen, proceed t
 
 <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 14 (UpsideDownCake)` 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 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".
 
 ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png)
 
 > 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 14 (UpsideDownCake)` 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 15 (VanillaIceCream)` entry, then make sure the following items are checked:
 
-- `Android SDK Platform 34`
+- `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 `34.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 `35.0.0` is selected.
 
 Finally, click "Apply" to download and install the Android SDK and related build tools.
 
@@ -120,7 +120,7 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li
 
 ![Android Studio AVD Manager](/docs/assets/GettingStartedAndroidStudioAVD.png)
 
-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 **UpsideDownCake** API Level 34 image.
+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.
 

docs/_getting-started-macos-ios.md

@@ -33,7 +33,7 @@ You will also need to install the Xcode Command Line Tools. Open Xcode, then cho
 
 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 than to install a simulator, open **Xcode > Settings > Platforms** tab, then click "+" icon and select **iOS…** option.
+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
 

docs/_getting-started-windows-android.md

@@ -45,20 +45,20 @@ Once setup has finalized and you're presented with the Welcome screen, proceed t
 
 <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 14 (UpsideDownCake)` 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 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".
 
 ![Android Studio Welcome](/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png)
 
 > 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 14 (UpsideDownCake)` 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 15 (VanillaIceCream)` entry, then make sure the following items are checked:
 
-- `Android SDK Platform 34`
+- `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 `34.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 `35.0.0` is selected.
 
 Finally, click "Apply" to download and install the Android SDK and related build tools.
 
@@ -118,7 +118,7 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li
 
 ![Android Studio AVD Manager](/docs/assets/GettingStartedAndroidStudioAVD.png)
 
-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 **UpsideDownCake** API Level 34 image.
+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.
 
 > 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.
 

docs/_integration-with-existing-apps-ios.md

@@ -467,10 +467,11 @@ class ViewController: UIViewController {
 +    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()
 +      }
-+      self?.present(reactViewController, animated: true)
++      present(reactViewController!, animated: true)
 +    }, for: .touchUpInside)
 +    self.view.addSubview(button)
 +

docs/_turbo-native-modules-components.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import IOSContent from "./turbo-native-modules-ios.md";
-import AndroidContent from "./turbo-native-modules-android.md";
+import React from 'react';
+import IOSContent from './turbo-native-modules-ios.md';
+import AndroidContent from './turbo-native-modules-android.md';
 
 export function TurboNativeModulesIOS() {
   return <IOSContent />;

docs/accessibility.md

@@ -163,6 +163,26 @@ In the above example method `addOne` changes the state variable `count`. When th
 - **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` <div class="label ios">iOS</div>
+
+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` <div class="label ios">iOS</div>
+
+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
+<View
+  accessibilityShowsLargeContentViewer={true}
+  accessibilityLargeContentTitle="Home Tab">
+  <Text>Home</Text>
+</View>
+```
+
 ### `accessibilityState`
 
 Describes the current state of a component to the assistive technology user.
@@ -340,7 +360,7 @@ In the above example, the `yellow` layout and its descendants are completely inv
 
 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`
+### `onAccessibilityTap` <div class="label ios">iOS</div>
 
 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.
 
@@ -363,6 +383,7 @@ Assign this property to a custom function which will be called when someone perf
 - **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.

docs/animated.md

@@ -13,14 +13,21 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho
 
 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, {useRef} from 'react';
-import {Animated, Text, View, StyleSheet, Button} from 'react-native';
+```SnackPlayer name=Animated%20Example&supportedPlatforms=ios,android
+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 = useRef(new Animated.Value(0)).current;
+  const fadeAnim = useAnimatedValue(0);
 
   const fadeIn = () => {
     // Will change fadeAnim value to 1 in 5 seconds
@@ -495,7 +502,7 @@ Stops any running animation and resets the value to its original.
 
 ### `Value`
 
-Standard value class for driving animations. Typically initialized with `new Animated.Value(0);`
+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).
 

docs/animatedvalue.md

@@ -5,7 +5,7 @@ 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 `new Animated.Value(0);`
+Typically initialized with `useAnimatedValue(0);` or `new Animated.Value(0);` in class components.
 
 ---