Merge branch 'main' into patch-1

Author: Jonnius00

.alexrc.js

@@ -21,6 +21,9 @@ exports.allow = [
 
   // allowing this term to prevent reporting "primitive", which is a programming term
   'savage',
+
+  // allowing this term, since it seems to be used not in insensitive cases
+  'straightforward',
 ];
 
 // Use a "maybe" level of profanity instead of the default "unlikely".

.gitignore

@@ -35,4 +35,8 @@ website/build/
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+
+# Generated file(s) for llms
+llms.txt

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

@@ -115,9 +115,7 @@ curl -O https://raw.githubusercontent.com/react-native-community/template/refs/h
 Please use the Community Template as a reference point for the [Gemfile](https://github.com/react-native-community/template/blob/0.78-stable/template/Gemfile) and for the [Podfile](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile).
 
 :::note
-Remember to change [this line](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile#L17) and [this line](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile#L26) of the Podfile to match the name of your app.
-
-If your app don't have tests, remember to remove [this block](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile#L26-L29).
+Remember to change [this line](https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile#L17).
 :::
 
 Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
@@ -258,6 +256,8 @@ Now open the `ReactViewController.m` file and apply the following changes
 +#import <React/RCTBundleURLProvider.h>
 +#import <RCTReactNativeFactory.h>
 +#import <RCTDefaultReactNativeFactoryDelegate.h>
++#import <RCTAppDependencyProvider.h>
+
 
 @interface ReactViewController ()
 
@@ -275,7 +275,8 @@ Now open the `ReactViewController.m` file and apply the following changes
  - (void)viewDidLoad {
      [super viewDidLoad];
      // Do any additional setup after loading the view.
-+    _factoryDelegate = [ReactNativeDelegate new];
++    _factoryDelegate = [ReactNativeFactoryDelegate new];
++    _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];
 +    _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];
 +    self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];
  }
@@ -311,6 +312,7 @@ Now open the `ReactViewController.swift` file and apply the following changes
 import UIKit
 +import React
 +import React_RCTAppDelegate
++import ReactAppDependencyProvider
 
 class ReactViewController: UIViewController {
 +  var reactNativeFactory: RCTReactNativeFactory?
@@ -319,6 +321,7 @@ class ReactViewController: UIViewController {
   override func viewDidLoad() {
     super.viewDidLoad()
 +    reactNativeFactoryDelegate = ReactNativeDelegate()
++    reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()
 +    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)
 +    view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")
 
@@ -513,6 +516,135 @@ REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
 
 Now, if you build your app for Release, it will work as expected.
 
-### Now what?
+## 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 (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+-       <View
+-         style={{
+-           backgroundColor: isDarkMode
+-             ? Colors.black
+-             : Colors.white,
+-           padding: 24,
+-         }}>
+-         <Text style={styles.title}>Step One</Text>
+-         <Text>
+-           Edit <Text style={styles.bold}>App.tsx</Text> to
+-           change this screen and see your edits.
+-         </Text>
+-         <Text style={styles.title}>See your changes</Text>
+-         <ReloadInstructions />
+-         <Text style={styles.title}>Debug</Text>
+-         <DebugInstructions />
++         <Text style={styles.title}>UserID: {props.userID}</Text>
++         <Text style={styles.title}>Token: {props.token}</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+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.
+
+<Tabs groupId="ios-language" queryString defaultValue={constants.defaultAppleLanguage} values={constants.appleLanguages}>
+<TabItem value="objc">
+
+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"
++  }];
+}
+```
+
+</TabItem>
+<TabItem value="swift">
+
+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"
++])
+
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+3. Run your app once again. You should see the following screen after you present the `ReactViewController`:
+
+<center>
+  <img src="/docs/assets/brownfield-with-initial-props.png" width="30%" height="30%"/>
+</center>
+
+## 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.

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

@@ -424,7 +424,7 @@ class MyReactActivity : ReactActivity() {
 </TabItem>
 </Tabs>
 
-As usual, here the [MainActivity.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt)
+As usual, here the [MainActivity.kt Community template file as reference](https://github.com/react-native-community/template/blob/0.80-stable/template/android/app/src/main/java/com/helloworld/MainActivity.kt)
 
 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:
 

docs/accessibility.md

@@ -14,18 +14,20 @@ Android and iOS differ slightly in their approaches, and thus the React Native i
 
 ### `accessible`
 
-When `true`, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are 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 acecssibility elements, or TalkBack opting to focus some parent element instead.
 
-On Android, `accessible={true}` property for a react-native View will be translated into native `focusable={true}`.
+By default, all touchable elements are accessible.
+
+On Android, `accessible` will be translated into native [`focusable`](<https://developer.android.com/reference/android/view/View#setFocusable(boolean)>). On iOS, it translates into native [`isAccessibilityElement`](https://developer.apple.com/documentation/uikit/uiaccessibilityelement/isaccessibilityelement?language=objc).
 
 ```tsx
-<View accessible={true}>
-  <Text>text one</Text>
-  <Text>text two</Text>
+<View>
+  <View accessible={true} />
+  <View />
 </View>
 ```
 
-In the above example, accessibility focus is only available on the parent view with the `accessible` property, and not individually for 'text one' and 'text two'.
+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`
 
@@ -427,6 +429,8 @@ When adding support for standard actions, `name` must be one of the following:
 - `'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.
 

docs/build-speed.md

@@ -8,6 +8,12 @@ This can be problematic as your project grows and generally in bigger organizati
 
 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`.
@@ -50,6 +56,31 @@ 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:
+
+![gradle config caching](/docs/assets/gradle-config-caching.gif)
+
+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.
+
 ## Use a compiler cache
 
 If you're running frequent native builds (either C++ or Objective-C), you might benefit from using a **compiler cache**.

docs/fabric-native-components.md

@@ -60,17 +60,20 @@ Use this specification for our WebView Component:
 <TabItem value="typescript">
 
 ```typescript title="Demo/specs/WebViewNativeComponent.ts"
-import type {HostComponent, ViewProps} from 'react-native';
-import type {BubblingEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {
+  CodegenTypes,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
+import {codegenNativeComponent} from 'react-native';
 
 type WebViewScriptLoadedEvent = {
   result: 'success' | 'error';
 };
 
 export interface NativeProps extends ViewProps {
   sourceURL?: string;
-  onScriptLoaded?: BubblingEventHandler<WebViewScriptLoadedEvent> | null;
+  onScriptLoaded?: CodegenTypes.BubblingEventHandler<WebViewScriptLoadedEvent> | null;
 }
 
 export default codegenNativeComponent<NativeProps>(
@@ -84,9 +87,8 @@ export default codegenNativeComponent<NativeProps>(
 ```ts title="Demo/RCTWebView/js/RCTWebViewNativeComponent.js":
 // @flow strict-local
 
-import type {HostComponent, ViewProps} from 'react-native';
-import type {BubblingEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {CodegenTypes, HostComponent, ViewProps} from 'react-native';
+import {codegenNativeComponent} from 'react-native';
 
 type WebViewScriptLoadedEvent = $ReadOnly<{|
   result: "success" | "error",
@@ -95,7 +97,7 @@ type WebViewScriptLoadedEvent = $ReadOnly<{|
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
   sourceURL?: string;
-  onScriptLoaded?: BubblingEventHandler<WebViewScriptLoadedEvent>?;
+  onScriptLoaded?: CodegenTypes.BubblingEventHandler<WebViewScriptLoadedEvent>?;
 |}>;
 
 export default (codegenNativeComponent<NativeProps>(

docs/headless-js-android.md

@@ -76,7 +76,7 @@ import com.facebook.react.bridge.Arguments
 import com.facebook.react.jstasks.HeadlessJsTaskConfig
 
 class MyTaskService : HeadlessJsTaskService() {
-    override fun getTaskConfig(intent: Intent): HeadlessJsTaskConfig? {
+    override fun getTaskConfig(intent: Intent?): HeadlessJsTaskConfig? {
         return intent.extras?.let {
             HeadlessJsTaskConfig(
                 "SomeTaskName",