Merge branch 'main' into patch-1

Author: aryanchoudharypro

.github/workflows/pre-merge.yml

@@ -5,24 +5,24 @@ on:
     branches:
       - main
 
+permissions:
+  contents: read
+
 jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Enable Corepack
-        run: corepack enable
-
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
           node-version: "22"
           cache: yarn
 
       - name: Check lock for duplications
-        run: yarn dedupe --check
+        run: yarn update-lock --fail
 
       - name: Install dependencies
         run: yarn install --immutable
@@ -36,14 +36,34 @@ jobs:
       - name: Run plugins lint
         run: yarn lint:plugins
 
-  lint-website:
+  check-vercel-redirects:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Enable Corepack
-        run: corepack enable
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "22"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Check Vercel redirects are in sync
+        run: |
+          yarn sync-redirects:vercel
+          if ! git diff --exit-code vercel.json; then
+            echo "::error::vercel.json redirects are out of sync with _redirects. Run 'yarn sync-redirects:vercel' and commit."
+            exit 1
+          fi
+
+  lint-website:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
 
       - name: Set up Node.js
         uses: actions/setup-node@v6
@@ -64,9 +84,6 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Enable Corepack
-        run: corepack enable
-
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:

.gitignore

@@ -33,3 +33,5 @@ website/build/
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+.vercel
+.env*.local

.yarnrc.yml

@@ -18,18 +18,13 @@ This repo contains the website configuration and documentation powering the [Rea
 
 1. [Git](https://git-scm.com/downloads).
 1. [Node](https://nodejs.org/en/download/) _(version 22 or greater)_.
-1. [Yarn](https://yarnpkg.com/getting-started/install) _(version 4)_.
+1. [Yarn Classic](https://classic.yarnpkg.com/en/docs/install) _(version 1)_.
 1. A fork and clone of the `react-native-website` repo _(for any contributions)_.
 
 ### Installation
 
 1. `cd react-native-website` to go into the project root.
-1. Run `corepack enable` to enable Corepack.
-
-   > If the command above fails, run `npm install -g corepack@latest` to install the latest version of [Corepack](https://yarnpkg.com/corepack#installation).
-
 1. Run `yarn` to install the website's workspace dependencies.
-   > If you want to retain the globally installed `yarn` classic, you can use `corepack yarn` instead.
 
 ### Running locally
 

README.md

@@ -1,4 +1,4 @@
-:::tip Canary 🧪
+:::tip[Canary 🧪]
 
 **This API is currently only available in React Native’s Canary and Experimental channels.**
 

docs/_canary-channel-api-warning.mdx

@@ -1,4 +1,4 @@
-:::important Experimental 🧪
+:::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.
 

docs/_experimental-api-warning.mdx

@@ -1,4 +1,4 @@
-:::tip Experimental Feature 🧪
+:::important[Experimental Feature 🧪]
 
 **This API is currently only available in React Native’s Experimental channels.**
 

docs/_experimental-channel-api-warning.mdx

@@ -3,6 +3,6 @@ id: alertios
 title: '❌ AlertIOS'
 ---
 
-:::danger Removed from React Native
+:::danger[Removed from React Native]
 Use [`Alert`](alert) instead.
 :::

docs/alertios.md

@@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 import {Appearance} from 'react-native';
 ```
 
-The `Appearance` module exposes information about the user's appearance preferences, such as their preferred color scheme (light or dark).
+The `Appearance` module exposes information about the user's appearance preferences, such as their preferred system color scheme (light or dark).
 
 #### Developer notes
 
@@ -53,7 +53,26 @@ if (colorScheme === 'dark') {
 }
 ```
 
-Although the color scheme is available immediately, this may change (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. For example, you may use the [`useColorScheme`](usecolorscheme) React hook as it provides and subscribes to color scheme updates, or you may use inline styles rather than setting a value in a `StyleSheet`.
+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 `'auto'` removes any override, restoring the system preference.
+
+```mermaid
+flowchart TD
+    USC["useColorScheme()"] --> GCS["getColorScheme()"]
+    GCS --> DEC{App override?}
+    DEC -- "NO / reset via setColorScheme('auto')" --> 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
+```
 
 ---
 
@@ -67,39 +86,34 @@ 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 application-level selected user interface style via `setColorScheme`) or on a schedule (e.g. light and dark themes that follow the day/night cycle).
+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()`.
 
-Supported color schemes:
+Return values:
 
-- `'light'`: The user prefers a light color theme.
-- `'dark'`: The user prefers a dark color theme.
-- `null`: The user has not indicated a preferred color theme.
+- `'light'`: The light color scheme is applied.
+- `'dark'`: The dark color scheme is applied.
+- `null`: May be returned if the native Appearance module is not available.
 
-See also: `useColorScheme` hook.
-
-:::note
-`getColorScheme()` will always return `light` when debugging with Chrome.
-:::
+See also: [`useColorScheme`](usecolorscheme) (hook).
 
 ---
 
 ### `setColorScheme()`
 
 ```tsx
-static setColorScheme('light' | 'dark' | null): void;
+static setColorScheme('light' | 'dark' | 'auto' | 'unspecified'): 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).
+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.).
 
-Supported color schemes:
+This is an app-level override — it does not affect the system's selected interface style or any style set in other applications.
 
-- `light`: Apply light user interface style.
-- `dark`: Apply dark user interface style.
-- null: Follow the system's interface style.
+Supported values:
 
-:::note
-The change will not affect the system's selected interface style or any style set in other applications.
-:::
+- `'light'`: Apply light color scheme.
+- `'dark'`: Apply dark color scheme.
+- `'auto'`: Follow the system color scheme (removes any override).
+- `'unspecified'` (**deprecated**): Follow the system color scheme (removes any override).
 
 ---
 
@@ -111,4 +125,4 @@ static addChangeListener(
 ): NativeEventSubscription;
 ```
 
-Add an event handler that is fired when appearance preferences change.
+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'`.

docs/appearance.md

@@ -13,7 +13,8 @@ AppState is frequently used to determine the intent and proper behavior when han
 - `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)
+  - [Android] on another `Activity`, including temporary system activities such
+    as autofill credential pickers (even if launched by your app or the system)
 - [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)