Merge branch 'facebook-main' into production

Author: sunnylqm

.github/workflows/pre-merge.yml

@@ -12,20 +12,21 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-
-      - name: Enable Corepack
-        run: corepack enable
+          cache: "yarn"
 
       - name: Check dependencies
         run: yarn dedupe --check
 
       - name: Install dependencies
         run: yarn install --immutable
-    
+
       - name: Run Lint
         run: yarn ci:lint
         working-directory: website
@@ -36,13 +37,14 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Enable Corepack
+        run: corepack enable
+
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-
-      - name: Enable Corepack
-        run: corepack enable
+          cache: "yarn"
 
       - name: Install dependencies
         run: yarn install --immutable

.husky/pre-commit

@@ -0,0 +1 @@
+pretty-quick --staged

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

@@ -490,11 +490,6 @@ Once you reach your React-powered Activity inside the app, it should load the Ja
 
 <center><img src="/docs/assets/EmbeddedAppIOS078.gif" width="300" /></center>
 
-:::note
-We are aware of a small limitation that prevent you to represent a view controller once it is dismissed.
-[This PR](https://github.com/facebook/react-native/pull/49300) fixes this issue and the limitation will be lifted in React Native 0.78.1.
-:::
-
 ### 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.

docs/backhandler.md

@@ -15,28 +15,34 @@ The event subscriptions are called in reverse order (i.e. the last registered su
 ## Pattern
 
 ```tsx
-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();
+const subscription = BackHandler.addEventListener(
+  'hardwareBackPress',
+  function () {
     /**
-     * When true is returned the event will not be bubbled up
-     * & no other back action will execute
+     * 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.
      */
-    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;
-});
+
+    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
@@ -126,14 +132,3 @@ static addEventListener(
 ```tsx
 static exitApp();
 ```
-
----
-
-### `removeEventListener()`
-
-```tsx
-static removeEventListener(
-  eventName: BackPressEventName,
-  handler: () => boolean | null | undefined,
-);
-```

docs/debugging.md

@@ -47,7 +47,7 @@ React Native DevTools is only available with the Hermes engine, and requires eit
 
 React Native DevTools replaces the previous Flipper, Experimental Debugger, and Hermes debugger (Chrome) frontends. If you are on an older version of React Native, please go to the docs [for your version](/versions).
 
-We continue to offer legacy debugging methods such as Direct JSC Debugging and Remote JS Debugging (deprecated) (see [Other Debugging Methods](./other-debugging-methods)).
+For apps using JavaScriptCore instead of Hermes, Direct JSC Debugging is still available (see [Other Debugging Methods](./other-debugging-methods)).
 
 React Native DevTools is designed for debugging React app concerns, and not to replace native tools. If you want to inspect React Native’s underlying platform layers (for example, while developing a Native Module), please use the debugging tools available in Xcode and Android Studio (see [Debugging Native Code](/docs/next/debugging-native-code)).
 

docs/flexbox.md

@@ -78,7 +78,7 @@ const FlexDirectionBasics = () => {
   return (
     <PreviewLayout
       label="flexDirection"
-      values={['column', 'row', 'row-reverse', 'column-reverse']}
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
       selectedValue={flexDirection}
       setSelectedValue={setflexDirection}>
       <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
@@ -178,7 +178,7 @@ const FlexDirectionBasics = () => {
   return (
     <PreviewLayout
       label="flexDirection"
-      values={['column', 'row', 'row-reverse', 'column-reverse']}
+      values={['column', 'row', 'column-reverse', 'row-reverse']}
       selectedValue={flexDirection}
       setSelectedValue={setflexDirection}>
       <View style={[styles.box, {backgroundColor: 'powderblue'}]} />

docs/handling-touches.md

@@ -69,7 +69,7 @@ export default ButtonBasics;
 
 ## Touchables
 
-If the basic button doesn't look right for your app, you can build your own button using any of the "Touchable" components provided by React Native. The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. These components do not provide any default styling, however, so you will need to do a bit of work to get them looking nicely in your app.
+If the basic button doesn't look right for your app, you can build your own button using any of the "Touchable" components provided by React Native. These components provide the capability to capture tapping gestures and can display feedback when a gesture is recognized. However, these components do not provide any default styling, so you will need to do a bit of work to get them looking nice in your app.
 
 Which "Touchable" component you use will depend on what kind of feedback you want to provide:
 

docs/other-debugging-methods.md

@@ -25,71 +25,12 @@ While source maps may not be enabled by default, you can follow [this guide](htt
 Every time the app is reloaded, a new JSContext is created. Choosing "Automatically Show Web Inspectors for JSContexts" saves you from having to select the latest JSContext manually.
 :::
 
-## Remote JavaScript Debugging (deprecated)
+## Remote JavaScript Debugging (removed)
 
-:::warning
-Remote JavaScript Debugging is deprecated in React Native 0.73 and will be removed in a future release.
-:::
-
-Remote JavaScript Debugging connects an external web browser (Chrome) to your app and runs your JavaScript code inside a web page. This allows you to use Chrome's debugger as you would with any web app. Note that the browser environment can be very different, and not all React Native modules will work when debugging this way.
-
-### Setup
-
-Since React Native 0.73, Remote JavaScript Debugging must be **manually enabled** using the `NativeDevSettings` module.
-
-```js
-import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';
-
-function MyApp() {
-  // Assign this to a dev-only button or useEffect call
-  const connectToRemoteDebugger = () => {
-    NativeDevSettings.setIsDebuggingRemotely(true);
-  };
-}
-```
-
-When `NativeDevSettings.setIsDebuggingRemotely(true)` is invoked, this will open a new tab at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui).
+:::warning Important
+Remote JavaScript Debugging has been removed as of React Native 0.79. See the original [deprecation announcement](https://github.com/react-native-community/discussions-and-proposals/discussions/734).
 
-From this page, open Chrome DevTools via:
-
-- View > Developer > Developer Tools
-- <kbd>⌥ Option</kbd> + <kbd>Cmd ⌘</kbd> + <kbd>I</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (Windows and Linux).
-
-The Console and Sources panels will allow you to inspect your React Native code.
-
-![The remote debugger window in Chrome](/docs/assets/debugging-chrome-remote-debugger.jpg)
-
-:::info
-Under Remote JavaScript Debugging, the web version of React DevTools in Chrome will not work with React Native. See the [React Native DevTools](./react-native-devtools) guide to explore how to use React DevTools in our integrated debugger.
+If you are on an older version of React Native, please go to the docs [for your version](/versions).
 :::
 
-:::note
-On Android, if the times between the debugger and device have drifted, things such as animations and event behavior might not work properly. This can be fixed by running ``adb shell "date `date +%m%d%H%M%Y.%S%3N`"``. Root access is required if using a physical device.
-:::
-
-### Debugging on a physical device
-
-:::info
-If you're using Expo CLI, this is configured for you already.
-:::
-
-<Tabs groupId="platform" defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
-<TabItem value="ios">
-
-On iOS devices, open the file [`RCTWebSocketExecutor.mm`](https://github.com/facebook/react-native/blob/master/packages/react-native/React/CoreModules/RCTWebSocketExecutor.mm) and change "localhost" to the IP address of your computer.
-
-</TabItem>
-<TabItem value="android">
-
-On Android 5.0+ devices connected via USB, you can use the [`adb` command line tool](http://developer.android.com/tools/help/adb.html) to set up port forwarding from the device to your computer:
-
-```sh
-adb reverse tcp:8081 tcp:8081
-```
-
-</TabItem>
-</Tabs>
-
-:::note
-If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
-:::
+![The remote debugger window in Chrome](/docs/assets/debugging-chrome-remote-debugger.jpg)

docs/react-native-gradle-plugin.md

@@ -150,6 +150,14 @@ The list of flags to pass to `hermesc`. By default is `["-O", "-output-source-ma
 hermesFlags = ["-O", "-output-source-map"]
 ```
 
+### `enableBundleCompression`
+
+Whether the Bundle Asset should be compressed when packaged into a `.apk`, or not.
+
+Disabling compression for the `.bundle` allows it to be directly memory-mapped to RAM, hence improving startup time - at the cost of a larger resulting app size on disk. Please note that the `.apk` download size will be mostly unaffected as the `.apk` files are compressed before downloading
+
+By default this is disabled, and you should not turn it on, unless you're really concerned about disk space for your application.
+
 ## Using Flavors & Build Variants
 
 When building Android apps, you might want to use [custom flavors](https://developer.android.com/studio/build/build-variants#product-flavors) to have different versions of your app starting from the same project.

docs/textinput.md

@@ -545,9 +545,13 @@ It is important to note that this aligns the text to the top on iOS, and centers
 
 ---
 
-### `numberOfLines` <div class="label android">Android</div>
+### `numberOfLines`
 
-Sets the number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+:::note
+`numberOfLines` on iOS is only available on the [New Architecture](/architecture/landing-page)
+:::
+
+Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
 
 | Type   |
 | ------ |