Merge branch 'main' into feat/new-architecture-guide-refactoring

Author: Riccardo

.alexrc.js

@@ -18,6 +18,9 @@ exports.allow = [
 
   // host refers to host objects in native code
   'host-hostess',
+
+  // allowing this term to prevent reporting "primitive", which is a programming term
+  'savage',
 ];
 
 // Use a "maybe" level of profanity instead of the default "unlikely".

docs/debugging.md

@@ -193,8 +193,6 @@ On Android 5.0+ devices connected via USB, you can use the [`adb` command line t
 
 `adb reverse tcp:8081 tcp:8081`
 
-<!-- alex ignore host-hostess -->
-
 Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.
 
 > 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.

docs/image.md

@@ -397,7 +397,10 @@ More details about `resize` and `scale` can be found at http://frescolib.org/doc
 
 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).
+- `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).
 

docs/linking.md

@@ -315,9 +315,9 @@ The `Promise` will reject on Android if it was impossible to check if the URL ca
 
 > This method has limitations on iOS 9+. From [the official Apple documentation](https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl):
 >
-> - If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always return false. If the user reinstalls or upgrades the app, iOS resets the limit.
+> - If your app is linked against an earlier version of iOS but is running in iOS 9.0 or later, you can call this method up to 50 times. After reaching that limit, subsequent calls always resolve to `false`. If the user reinstalls or upgrades the app, iOS resets the limit.
 >
-> As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always return `false`.
+> As of iOS 9, your app also needs to provide the `LSApplicationQueriesSchemes` key inside `Info.plist` or `canOpenURL()` will always resolve to `false`.
 
 > When targeting Android 11 (SDK 30) you must specify the intents for the schemes you want to handle in `AndroidManifest.xml`. A list of common intents can be found [here](https://developer.android.com/guide/components/intents-common).
 >

docs/native-components-android.md

@@ -102,14 +102,10 @@ Properties that are to be reflected in JavaScript needs to be exposed as setter
 
 Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
 
-<!-- alex disable primitive -->
-
 Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding type (accordingly `boolean`, `int`, `float` in Java and `Boolean`, `Int`, `Float` in Kotlin) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, `null` will be provided as a default value in case when corresponding property gets removed.
 
 Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it. **IMPORTANT!** in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" value can be specified using `defaultBoolean`, `defaultFloat`, etc. arguments of `@ReactProp` annotation, for complex types setter will be called with value set to `null`).
 
-<!-- alex enable primitive -->
-
 <Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
 <TabItem value="kotlin">
 

docs/new-architecture-app-modules-android.md

@@ -4,6 +4,8 @@ title: Enabling TurboModule on Android
 ---
 
 import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
 
 <NewArchitectureWarning/>
 
@@ -154,11 +156,14 @@ You can now verify that everything works correctly by running your android app:
 yarn react-native run-android
 ```
 
-## 2. Java - Provide a `ReactPackageTurboModuleManagerDelegate`
+## 2. Java/Kotlin - Provide a `ReactPackageTurboModuleManagerDelegate`
 
 Now is time to actually use the TurboModule.
 First, we will need to create a `ReactPackageTurboModuleManagerDelegate` subclass, like the following:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 package com.awesomeproject;
 
@@ -198,6 +203,52 @@ public class MyApplicationTurboModuleManagerDelegate extends ReactPackageTurboMo
 }
 ```
 
+</TabItem>
+
+<TabItem value="kotlin">
+
+```kotlin
+package com.awesomeproject
+
+import com.facebook.jni.HybridData
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactPackageTurboModuleManagerDelegate
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.soloader.SoLoader
+
+class MyApplicationTurboModuleManagerDelegate
+protected constructor(
+    reactApplicationContext: ReactApplicationContext,
+    packages: List<ReactPackage>
+) : ReactPackageTurboModuleManagerDelegate(reactApplicationContext, packages) {
+
+    override protected external fun initHybrid(): HybridData?
+    class Builder : ReactPackageTurboModuleManagerDelegate.Builder() {
+        override protected fun build(
+            context: ReactApplicationContext,
+            packages: List<ReactPackage>
+        ): MyApplicationTurboModuleManagerDelegate =
+            MyApplicationTurboModuleManagerDelegate(context, packages)
+    }
+
+    @Synchronized
+    override protected fun maybeLoadOtherSoLibraries() {
+        // Prevents issues with initializer interruptions.
+        if (!isSoLibraryLoaded) {
+            SoLoader.loadLibrary("myapplication_appmodules")
+            isSoLibraryLoaded = true
+        }
+    }
+
+    companion object {
+        @Volatile private var isSoLibraryLoaded = false
+    }
+}
+```
+
+</TabItem>
+</Tabs>
+
 Please note that the `SoLoader.loadLibrary` parameter (in this case `"myapplication_appmodules")` should be the same as the one specified for `LOCAL_MODULE :=` inside the `Android.mk` file you created before.
 
 This class will then be responsible of loading the TurboModules and will take care of loading the native library build with the NDK at runtime.
@@ -208,6 +259,9 @@ Then, you can provide the class you created to your `ReactNativeHost`. You can l
 
 Once you located it, you need to add the `getReactPackageTurboModuleManagerDelegateBuilder` method as from the snippet below:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 public class MyApplication extends Application implements ReactApplication {
 
@@ -231,10 +285,43 @@ public class MyApplication extends Application implements ReactApplication {
 }
 ```
 
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+class MyApplication : Application(), ReactApplication {
+    private val reactNativeHost: ReactNativeHost =
+        object : ReactNativeHost(this) {
+
+            override fun getUseDeveloperSupport(): Boolean {
+                /* ... */
+            }
+
+            override fun getPackages(): List<ReactPackage?>? {
+                /* ... */
+            }
+
+            override fun getJSMainModuleName(): String? {
+                /* ... */
+            }
+
+            @NonNull
+            override fun getReactPackageTurboModuleManagerDelegateBuilder() =
+                ReactPackageTurboModuleManagerDelegate.Builder()
+        }
+}
+```
+
+</TabItem>
+</Tabs>
+
 ## 4. Extend the `getPackages()` from your `ReactNativeHost` to use the TurboModule
 
 Still on the `ReactNativeHost` , we need to extend the the `getPackages()` method to include the newly created TurboModule. Update the method to include the following:
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 public class MyApplication extends Application implements ReactApplication {
 
@@ -291,8 +378,72 @@ public class MyApplication extends Application implements ReactApplication {
                 return new MyApplicationTurboModuleManagerDelegate.Builder();
             }
         };
+}
+```
+
+</TabItem>
+<TabItem value="kotlin">
+
+```kotlin
+class MyApplication() : Application(), ReactApplication {
+
+    private val reactNativeHost: ReactNativeHost =
+        object : ReactNativeHost(this) {
+            override fun getUseDeveloperSupport(): Boolean {
+                /* ... */
+            }
+
+            override protected fun getPackages(): List<ReactPackage>? {
+                val packages: MutableList<ReactPackage> = PackageList(this).getPackages()
+
+                // Add those lines
+                packages.add(
+                    object : TurboReactPackage() {
+                        @Nullable
+                        override fun getModule(
+                            name: String,
+                            reactContext: ReactApplicationContext?
+                        ): NativeModule? =
+                            if ((name == NativeAwesomeManager.NAME)) {
+                                NativeAwesomeManager(reactContext)
+                            } else {
+                                null
+                            }
+
+                        override fun getReactModuleInfoProvider() =
+                            mutableMapOf<String, ReactModuleInfo>(
+                                NativeAwesomeManager.NAME,
+                                ReactModuleInfo(
+                                    NativeAwesomeManager.NAME,
+                                    "NativeAwesomeManager",
+                                    false, // canOverrideExistingModule
+                                    false, // needsEagerInit
+                                    true, // hasConstants
+                                    false, // isCxxModule
+                                    true // isTurboModule
+                                )
+                            )
+                    }
+                )
+                return packages
+            }
+
+            override protected fun getJSMainModuleName(): String? {
+                /* ... */
+            }
+
+            @NonNull
+            override protected fun getReactPackageTurboModuleManagerDelegateBuilder():
+                ReactPackageTurboModuleManagerDelegate.Builder? {
+                return Builder()
+            }
+        }
+}
 ```
 
+</TabItem>
+</Tabs>
+
 ## 5. C++ Provide a native implementation for the methods in your `*TurboModuleDelegate` class
 
 If you take a closer look at the class `MyApplicationTurboModuleManagerDelegate` that you created before, you will notice how some of the methods are `native`.
@@ -441,6 +592,9 @@ JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
 
 Now you can finally enable the `TurboModule `support in your Application. To do so, you need to turn on the `useTurboModule` flag inside your Application `onCreate` method.
 
+<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
+<TabItem value="java">
+
 ```java
 public class MyApplication extends Application implements ReactApplication {
 
@@ -449,8 +603,26 @@ public class MyApplication extends Application implements ReactApplication {
         ReactFeatureFlags.useTurboModules = true;
         //...
     }
+}
+```
+
+</TabItem>
+
+<TabItem value="kotlin">
+
+```kotlin
+class MyApplication : Application(), ReactApplication {
+
+    override fun onCreate() {
+        ReactFeatureFlags.useTurboModules = true
+        // ...
+    }
+}
 ```
 
+</TabItem>
+</Tabs>
+
 It’s now time to run again your Android app to verify that everything works correctly:
 
 ```bash

docs/new-architecture-library-intro.md

@@ -237,8 +237,6 @@ While we know that all deprecations are a hassle, this guide is intended to help
 
 ### Migrating `findNodeHandle` / getting a `HostComponent`
 
-<!-- alex ignore host -->
-
 Much of the migration work requires a HostComponent ref to access certain APIs that are only attached to host components (like View, Text, or ScrollView). HostComponents are the return value of calls to `requireNativeComponent`. `findNodeHandle` tunnels through multiple levels of component hierarchy to find the nearest native component.
 
 As a concrete example, this code uses `findNodeHandle` to tunnel from `ParentComponent` through to the `View` rendered by `ChildComponent`.

docs/running-on-device.md

@@ -87,8 +87,6 @@ You can also connect to the development server over Wi-Fi. You'll first need to
 
 You can find the IP address in **System Preferences** → **Network**.
 
-<!-- alex ignore host -->
-
 1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
 2. Open your React Native app on your device.
 3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
@@ -167,8 +165,6 @@ You can also connect to the development server over Wi-Fi. You'll first need to
 
 Open the command prompt and type `ipconfig` to find your machine's IP address ([more info](http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information)).
 
-<!-- alex ignore host -->
-
 1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
 2. Open your React Native app on your device.
 3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.
@@ -294,8 +290,6 @@ You can also connect to the development server over Wi-Fi. You'll first need to
 
 Open a terminal and type `/sbin/ifconfig` to find your machine's IP address.
 
-<!-- alex ignore host -->
-
 1. Make sure your laptop and your phone are on the **same** Wi-Fi network.
 2. Open your React Native app on your device.
 3. You'll see a [red screen with an error](debugging.md#in-app-errors-and-warnings). This is OK. The following steps will fix that.

docs/running-on-simulator-ios.md

@@ -9,6 +9,14 @@ Once you have your React Native project initialized, you can run `npx react-nati
 
 ## Specifying a device
 
-You can specify the device the simulator should run with the `--simulator` flag, followed by the device name as a string. The default is `"iPhone 13"`. If you wish to run your app on an iPhone SE (2nd generation), run `npx react-native run-ios --simulator="iPhone SE (2nd generation)"`.
+You can specify the device the simulator should run with the `--simulator` flag, followed by the device name as a string. The default is `"iPhone 13"`. If you wish to run your app on an iPhone SE (2nd generation), run `npx react-native run-ios --simulator='iPhone SE (2nd generation)'`.
 
 The device names correspond to the list of devices available in Xcode. You can check your available devices by running `xcrun simctl list devices` from the console.
+
+### Specifying a version of device
+
+If you have multiple iOS versions installed, you also need to specify it's appropiate version. E.g. run `npx react-native run-ios --simulator='iPhone 13 Pro (15.5)'` in order to specify the iOS version.
+
+## Specifying an UDID
+
+You can specify the device UDID returned from `xcrun simctl list devices` command. E.g. run `npx react-native run-ios --udid='AAAAAAAA-AAAA-AAAA-AAAA-AAAAAAAAAAAA'`.

docs/textinput.md

@@ -844,16 +844,12 @@ see [Issue#7070](https://github.com/facebook/react-native/issues/7070) for more
 
 ### `textBreakStrategy` <div class="label android">Android</div>
 
-<!-- alex disable simple -->
-
 Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced` The default value is `simple`.
 
 | Type                                      |
 | ----------------------------------------- |
 | enum('simple', 'highQuality', 'balanced') |
 
-<!-- alex enable simple -->
-
 ---
 
 ### `underlineColorAndroid` <div class="label android">Android</div>

package.json

@@ -17,17 +17,17 @@
   },
   "dependencies": {
     "babel-eslint": "^10.1.0",
-    "case-police": "^0.5.1",
-    "eslint": "^8.10.0",
+    "case-police": "^0.5.6",
+    "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-mdx": "^1.16.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-yaml": "^0.5.0",
     "husky": "^4.3.8",
     "netlify-plugin-cache": "^1.0.3",
-    "prettier": "^2.5.1",
+    "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
-    "yarn-deduplicate": "^3.1.0"
+    "yarn-deduplicate": "^5.0.0"
   },
   "resolutions": {
     "trim": "^1.0.1",

website/architecture/architecture-overview.md

@@ -21,5 +21,5 @@ Architecture Overview is intended to share conceptual overview of how React Nati
   - [View Flattening](view-flattening)
   - [Threading Model](threading-model)
 - Build Tools
-  - [Bundled Hermes](bundled-hermes)  
+  - [Bundled Hermes](bundled-hermes)
 - [Glossary](glossary)