From 4e670b880631f4c078cc2bbf183e7dda64729127 Mon Sep 17 00:00:00 2001 From: Nicola Corti Date: Tue, 4 Oct 2022 14:17:22 +0100 Subject: [PATCH 1/2] Finalize the Kotlinization --- ...ackward-compatibility-fabric-components.md | 89 +++++++- .../backward-compatibility-turbomodules.md | 80 +++++++- .../pillars-fabric-components.md | 194 +++++++++++++++--- .../pillars-turbomodule.md | 118 ++++++++++- 4 files changed, 435 insertions(+), 46 deletions(-) diff --git a/docs/the-new-architecture/backward-compatibility-fabric-components.md b/docs/the-new-architecture/backward-compatibility-fabric-components.md index 188cd28c02f..574ae12b7a0 100644 --- a/docs/the-new-architecture/backward-compatibility-fabric-components.md +++ b/docs/the-new-architecture/backward-compatibility-fabric-components.md @@ -287,7 +287,7 @@ my-component │ │ ├── AndroidManifest.xml │ │ └── java │ │ └── com -│ │ └── MyComponent +│ │ └── mycomponent │ │ ├── MyComponentView.java │ │ ├── MyComponentViewManagerImpl.java │ │ └── MyComponentViewPackage.java @@ -306,8 +306,12 @@ my-component The code that should go in the `MyComponentViewManagerImpl.java` and that can be shared between the Native Component and the Fabric Native Component is, for example: + + + ```java title="example of MyComponentViewManager.java" -package com.MyComponent; +package com.mycomponent; + import androidx.annotation.Nullable; import com.facebook.react.uimanager.ThemedReactContext; @@ -325,10 +329,34 @@ public class MyComponentViewManagerImpl { } ``` + + + +```kotlin title="example of MyComponentViewManager.kt" +package com.mycomponent + +import com.facebook.react.uimanager.ThemedReactContext + +object MyComponentViewManagerImpl { + const val NAME = "MyComponent" + fun createViewInstance(context: ThemedReactContext?) = MyComponentView(context) + + fun setFoo(view: MyComponentView, param: String) { + // implement the logic of the foo function using the view and the param passed. + } +} +``` + + + + Then, the Native Component and the Fabric Native Component can be updated using the function declared in the shared manager. For example, for a Native Component: + + + ```java title="Native Component using the ViewManagerImpl" public class MyComponentViewManager extends SimpleViewManager { @@ -359,8 +387,34 @@ public class MyComponentViewManager extends SimpleViewManager { } ``` + + + +```kotlin title="Native Component using the ViewManagerImpl" +class MyComponentViewManager(var context: ReactApplicationContext) : SimpleViewManager() { + // Use the static NAME property from the shared implementation + override fun getName() = MyComponentViewManagerImpl.NAME + + public override fun createViewInstance(context: ThemedReactContext): MyComponentView = + // static createViewInstance function from the shared implementation + MyComponentViewManagerImpl.createViewInstance(context) + + @ReactProp(name = "foo") + fun setFoo(view: MyComponentView, param: String) { + // static custom function from the shared implementation + MyComponentViewManagerImpl.setFoo(view, param) + } +} +``` + + + + And, for a Fabric Native Component: + + + ```java title="Fabric Component using the ViewManagerImpl" // Use the static NAME property from the shared implementation @ReactModule(name = MyComponentViewManagerImpl.NAME) @@ -397,11 +451,40 @@ public class MyComponentViewManager extends SimpleViewManager @ReactProp(name = "foo") public void setFoo(MyComponentView view, @Nullable String param) { // static custom function from the shared implementation - MyComponentViewManagerImpl.setFoo(view, param]); + MyComponentViewManagerImpl.setFoo(view, param); } } ``` + + + +```kotlin title="Fabric Component using the ViewManagerImpl" +// Use the static NAME property from the shared implementation +@ReactModule(name = MyComponentViewManagerImpl.NAME) +class MyComponentViewManager(context: ReactApplicationContext) : SimpleViewManager(), MyComponentViewManagerInterface { + private val delegate: ViewManagerDelegate = MyComponentViewManagerDelegate(this) + + override fun getDelegate(): ViewManagerDelegate = delegate + + // Use the static NAME property from the shared implementation + override fun getName(): String = MyComponentViewManagerImpl.NAME + + override fun createViewInstance(context: ThemedReactContext): MyComponentView = + // static createViewInstance function from the shared implementation + MyComponentViewManagerImpl.createViewInstance(context) + + @ReactProp(name = "foo") + override fun setFoo(view: MyComponentView, text: String) { + // static custom function from the shared implementation + MyComponentViewManagerImpl.setFoo(view, param); + } +} +``` + + + + For a step-by-step example on how to achieve this, have a look at [this repo](https://github.com/react-native-community/RNNewArchitectureLibraries/tree/feat/back-fabric-comp). ## Unify the JavaScript specs diff --git a/docs/the-new-architecture/backward-compatibility-turbomodules.md b/docs/the-new-architecture/backward-compatibility-turbomodules.md index 70758ca9627..0ded326ca9b 100644 --- a/docs/the-new-architecture/backward-compatibility-turbomodules.md +++ b/docs/the-new-architecture/backward-compatibility-turbomodules.md @@ -234,7 +234,7 @@ my-module │ │ ├── AndroidManifest.xml │ │ └── java │ │ └── com -│ │ └── MyModule +│ │ └── mymodule │ │ ├── MyModuleImpl.java │ │ └── MyModulePackage.java │ ├── newarch @@ -252,8 +252,11 @@ my-module The code that should go in the `MyModuleImpl.java`, and that can be shared by the Legacy Native Module and the Turbo Native Module is, for example: -```java title="example of MyModuleImple.java" -package com.MyModule; + + + +```java title="example of MyModuleImpl.java" +package com.mymodule; import androidx.annotation.NonNull; import com.facebook.react.bridge.Promise; @@ -271,6 +274,29 @@ public class MyModuleImpl { } ``` + + + +```kotlin title="example of MyModuleImpl.kt" +package com.mymodule; + +import com.facebook.react.bridge.Promise + +class MyModuleImpl { + fun foo(a: Double, b: Double, promise: Promise) { + // implement the logic for foo and then invoke + // promise.resolve or promise.reject. + } + + companion object { + const val NAME = "MyModule" + } +} +``` + + + + Then, the Legacy Native Module and the Turbo Native Module can be updated with the following steps: 1. Create a private instance of the `MyModuleImpl` class. @@ -279,13 +305,16 @@ Then, the Legacy Native Module and the Turbo Native Module can be updated with t For example, for a Legacy Native Module: + + + ```java title="Native Module using the Impl module" public class MyModule extends ReactContextBaseJavaModule { // declare an instance of the implementation private MyModuleImpl implementation; - CalculatorModule(ReactApplicationContext context) { + MyModule(ReactApplicationContext context) { super(context); // initialize the implementation of the module implementation = MyModuleImpl(); @@ -305,8 +334,32 @@ public class MyModule extends ReactContextBaseJavaModule { } ``` + + + +```kotlin title="Native Module using the Impl module" +class MyModule(context: ReactApplicationContext) : ReactContextBaseJavaModule(context) { + // declare an instance of the implementation and use it in all the methods + private var implementation: MyModuleImpl = MyModuleImpl() + + override fun getName(): String = MyModuleImpl.NAME + + @ReactMethod + fun foo(a: Double, b: Double, promise: Promise) { + // Use the implementation instance to execute the function. + implementation.foo(a, b, promise) + } +} +``` + + + + And, for a Turbo Native Module: + + + ```java title="TurboModule using the Impl module" public class MyModule extends MyModuleSpec { // declare an instance of the implementation @@ -333,6 +386,25 @@ public class MyModule extends MyModuleSpec { } ``` + + + +```kotlin title="TurboModule using the Impl module" +class MyModule(reactContext: ReactApplicationContext) : MyModuleSpec(reactContext) { + // declare an instance of the implementation and use it in all the methods + private var implementation: MyModuleImpl = MyModuleImpl() + + override fun getName(): String = MyModuleImpl.NAME + + override fun add(a: Double, b: Double, promise: Promise) { + implementation.add(a, b, promise) + } +} +``` + + + + For a step-by-step example on how to achieve this, have a look at [this repo](https://github.com/react-native-community/RNNewArchitectureLibraries/tree/feat/back-turbomodule). ## Unify the JavaScript specs diff --git a/docs/the-new-architecture/pillars-fabric-components.md b/docs/the-new-architecture/pillars-fabric-components.md index e1268e213a2..8b5f9ebea11 100644 --- a/docs/the-new-architecture/pillars-fabric-components.md +++ b/docs/the-new-architecture/pillars-fabric-components.md @@ -3,6 +3,9 @@ id: pillars-fabric-components title: Fabric Native Components --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import constants from '@site/core/TabsConstants'; import NewArchitectureWarning from '../\_markdown-new-architecture-warning.mdx'; @@ -221,7 +224,7 @@ To prepare Android to run **Codegen** you have to create three files: 1. The `build.gradle` with the **Codegen** configuration 1. The `AndroidManifest.xml` file -1. A java class that implements the `ReactPackage` interface. +1. A Java/Kotlin class that implements the `ReactPackage` interface. At the end of these steps, the `android` folder should look like this: @@ -234,7 +237,7 @@ android └── java └── com └── rtncenteredtext - └── RTNCenteredTextPackage.java + └── CenteredTextPackage.java ``` #### The `build.gradle` file @@ -298,9 +301,12 @@ This is a small manifest file that defines the package for your module. Finally, you need a class that implements the `ReactPackage` interface. To run the **Codegen** process, you don't have to completely implement the Package class: an empty implementation is enough for the app to pick up the module as a proper React Native dependency and to try and generate the scaffolding code. -Create an `android/src/main/java/com/rtncenteredtext` folder and, inside that folder, create a `RTNCenteredTextPackage.java` file. +Create an `android/src/main/java/com/rtncenteredtext` folder and, inside that folder, create a `CenteredTextPackage.java` file. -```java title="RTNCenteredTextPackage" + + + +```java title="CenteredTextPackage.java" package com.rtncenteredtext; import com.facebook.react.ReactPackage; @@ -326,6 +332,29 @@ public class RTNCenteredTextPackage implements ReactPackage { } ``` + + + +```kotlin title="CenteredTextPackage.kt" +package com.rtncenteredtext + +import com.facebook.react.ReactPackage +import com.facebook.react.bridge.NativeModule +import com.facebook.react.bridge.ReactApplicationContext +import com.facebook.react.uimanager.ViewManager + +class CenteredTextPackage : ReactPackage { + override fun createViewManagers(reactContext: ReactApplicationContext): List> = + emptyList() + + override fun createNativeModules(reactContext: ReactApplicationContext): List = + emptyList() +} +``` + + + + The `ReactPackage` interface is used by React Native to understand what native classes the app has to use for the `ViewManager` and `Native Modules` exported by the library. ## 4. Native Code @@ -623,9 +652,9 @@ See the [Codegen](./pillars-codegen) section for further details on the generate The native code for the Android side of a Fabric Native Components requires three pieces: -1. A `RTNCenteredText.java` that represents the actual view. -2. A `RTNCenteredTextManager.java` to instantiate the view. -3. Finally, you have to fill the implementation of the `RTNCenteredTextPackage.java` created in the previous step. +1. A `CenteredText.java` that represents the actual view. +2. A `CenteredTextManager.java` to instantiate the view. +3. Finally, you have to fill the implementation of the `CenteredTextPackage.java` created in the previous step. The final structure within the Android library should be like this. @@ -638,14 +667,17 @@ android └── java └── com └── rtncenteredtext - ├── RTNCenteredText.java - ├── RTNCenteredTextManager.java - └── RTNCenteredTextPackage.java + ├── CenteredText.java + ├── CenteredTextManager.java + └── CenteredTextPackage.java ``` -##### RTNCenteredText.java +##### CenteredText.java -```java title="RTNCenteredText" + + + +```java title="CenteredText.java" package com.rtncenteredtext; import androidx.annotation.Nullable; @@ -656,19 +688,19 @@ import android.graphics.Color; import android.widget.TextView; import android.view.Gravity; -public class RTNCenteredText extends TextView { +public class CenteredText extends TextView { - public RTNCenteredText(Context context) { + public CenteredText(Context context) { super(context); this.configureComponent(); } - public RTNCenteredText(Context context, @Nullable AttributeSet attrs) { + public CenteredText(Context context, @Nullable AttributeSet attrs) { super(context, attrs); this.configureComponent(); } - public RTNCenteredText(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { + public CenteredText(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.configureComponent(); } @@ -680,17 +712,54 @@ public class RTNCenteredText extends TextView { } ``` + + + +```kotlin title="CenteredText.kt" +package com.rtncenteredtext; + +import android.content.Context +import android.graphics.Color +import android.util.AttributeSet +import android.view.Gravity +import android.widget.TextView + +class CenteredText : TextView { + constructor(context: Context?) : super(context) { + configureComponent() + } + + constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { + configureComponent() + } + + constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { + configureComponent() + } + + private fun configureComponent() { + setBackgroundColor(Color.RED) + gravity = Gravity.CENTER_HORIZONTAL + } +} +``` + + + + This class represents the actual view Android is going to represent on screen. It inherit from `TextView` and it configures the basic aspects of itself using a private `configureComponent()` function. -##### RTNCenteredTextManager.java +##### CenteredTextManager.java + + + -```java title="RTNCenteredTextManager.java" +```java title="CenteredTextManager.java" package com.rtncenteredtext; import androidx.annotation.NonNull; import androidx.annotation.Nullable; -import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.module.annotations.ReactModule; import com.facebook.react.uimanager.SimpleViewManager; @@ -700,16 +769,15 @@ import com.facebook.react.uimanager.annotations.ReactProp; import com.facebook.react.viewmanagers.RTNCenteredTextManagerInterface; import com.facebook.react.viewmanagers.RTNCenteredTextManagerDelegate; - -@ReactModule(name = RTNCenteredTextManager.NAME) -public class RTNCenteredTextManager extends SimpleViewManager +@ReactModule(name = CenteredTextManager.NAME) +public class CenteredTextManager extends SimpleViewManager implements RTNCenteredTextManagerInterface { private final ViewManagerDelegate mDelegate; static final String NAME = "RTNCenteredText"; - public RTNCenteredTextManager(ReactApplicationContext context) { + public CenteredTextManager(ReactApplicationContext context) { mDelegate = new RTNCenteredTextManagerDelegate<>(this); } @@ -722,7 +790,7 @@ public class RTNCenteredTextManager extends SimpleViewManager @NonNull @Override public String getName() { - return RTNCenteredTextManager.NAME; + return CenteredTextManager.NAME; } @NonNull @@ -739,15 +807,57 @@ public class RTNCenteredTextManager extends SimpleViewManager } ``` -The `RTNCenteredTextManager` is a class used by React Native to instantiate the native component. It is the class that implements the interfaces generated by **Codegen** (see the `RTNCenteredTextManagerInterface` interface in the `implements` clause) and it uses the `RTNCenteredTextManagerDelegate` class. + + + +```kotlin title="CenteredTextManager.kt" +package com.rtncenteredtext + +import com.facebook.react.bridge.ReactApplicationContext +import com.facebook.react.module.annotations.ReactModule +import com.facebook.react.uimanager.SimpleViewManager +import com.facebook.react.uimanager.ThemedReactContext +import com.facebook.react.uimanager.ViewManagerDelegate +import com.facebook.react.uimanager.annotations.ReactProp +import com.facebook.react.viewmanagers.RTNCenteredTextManagerInterface +import com.facebook.react.viewmanagers.RTNCenteredTextManagerDelegate + +@ReactModule(name = CenteredTextManager.NAME) +class CenteredTextManager(context: ReactApplicationContext) : SimpleViewManager(), RTNCenteredTextManagerInterface { + private val delegate: RTNCenteredTextManagerDelegate = RTNCenteredTextManagerDelegate(this) + + override fun getDelegate(): ViewManagerDelegate = delegate + + override fun getName(): String = NAME + + override fun createViewInstance(context: ThemedReactContext): CenteredText = CenteredText(context) + + @ReactProp(name = "text") + override fun setText(view: CenteredText, text: String?) { + view.text = text + } + + companion object { + const val NAME = "RTNCenteredText" + } +} +``` + + + + +The `CenteredTextManager` is a class used by React Native to instantiate the native component. It is the class that implements the interfaces generated by **Codegen** (see the `RTNCenteredTextManagerInterface` interface in the `implements` clause) and it uses the `RTNCenteredTextManagerDelegate` class. It is also responsible for exporting all the constructs required by React Native: the class itself is annotated with `@ReactModule` and the `setText` method is annotated with `@ReactProp`. -##### RTNCenteredTextPackage.java +##### CenteredTextPackage.java -Finally, open the `RTNCenteredTextPackage.java` file in the `android/src/main/java/com/rtncenteredtext` folder and update it with the following lines +Finally, open the `CenteredTextPackage.java` file in the `android/src/main/java/com/rtncenteredtext` folder and update it with the following lines -```diff title="RTNCenteredTextPackage update" + + + +```diff title="CenteredTextPackage.java update" package com.rtncenteredtext; import com.facebook.react.ReactPackage; @@ -758,11 +868,11 @@ import com.facebook.react.uimanager.ViewManager; import java.util.Collections; import java.util.List; -public class RTNCenteredTextPackage implements ReactPackage { +public class CenteredTextPackage implements ReactPackage { @Override public List createViewManagers(ReactApplicationContext reactContext) { -+ return Collections.singletonList(new RTNCenteredTextManager(reactContext));; ++ return Collections.singletonList(new CenteredTextManager(reactContext)); } @Override @@ -773,6 +883,30 @@ public class RTNCenteredTextPackage implements ReactPackage { } ``` + + + +```diff title="CenteredTextPackage.kt update" +package com.rtncenteredtext + +import com.facebook.react.ReactPackage +import com.facebook.react.bridge.NativeModule +import com.facebook.react.bridge.ReactApplicationContext +import com.facebook.react.uimanager.ViewManager + +class CenteredTextPackage : ReactPackage { + override fun createViewManagers(reactContext: ReactApplicationContext): List> = +- emptyList() ++ listOf(CenteredTextManager(reactContext)) + + override fun createNativeModules(reactContext: ReactApplicationContext): List = + emptyList() +} +``` + + + + The added lines instantiate a new `RTNCenteredTextManager` object so that the React Native runtime can use it to render our Fabric Native Component. ## 5. Adding the Fabric Native Component To Your App diff --git a/docs/the-new-architecture/pillars-turbomodule.md b/docs/the-new-architecture/pillars-turbomodule.md index 48f7c130eb0..ea022d62367 100644 --- a/docs/the-new-architecture/pillars-turbomodule.md +++ b/docs/the-new-architecture/pillars-turbomodule.md @@ -3,7 +3,9 @@ id: pillars-turbomodules title: Turbo Native Modules --- -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import constants from '@site/core/TabsConstants'; import NewArchitectureWarning from '../\_markdown-new-architecture-warning.mdx'; @@ -154,7 +156,7 @@ The shared configuration is a `package.json` file used by yarn when installing y "type": "modules", "jsSrcsDir": "js", "android": { - "javaPackageName": "com.calculator" + "javaPackageName": "com.rtncalculator" } } } @@ -211,7 +213,7 @@ To prepare Android to run **Codegen** you have to create three files: 1. The `build.gradle` with the **Codegen** configuration 1. The `AndroidManifest.xml` file -1. A java class that implements the `ReactPackage` interface +1. A Java/Kotlin class that implements the `ReactPackage` interface At the end of these steps, the `android` folder should look like this: @@ -284,8 +286,11 @@ Finally, you need a class that extends the `TurboReactPackage` interface. To run Create an `android/src/main/java/com/rtncalculator` folder and, inside that folder, create a `CalculatorPackage.java` file. + + + ```java title="CalculatorPackage.java" -package com.RTNCalculator; +package com.rtncalculator; import androidx.annotation.Nullable; import com.facebook.react.bridge.NativeModule; @@ -311,6 +316,27 @@ public class CalculatorPackage extends TurboReactPackage { } ``` + + + +```kotlin title="CalculatorPackage.kt" +package com.rtncalculator; + +import com.facebook.react.TurboReactPackage +import com.facebook.react.bridge.NativeModule +import com.facebook.react.bridge.ReactApplicationContext +import com.facebook.react.module.model.ReactModuleInfoProvider + +class CalculatorPackage : TurboReactPackage() { + override fun getModule(name: String?, reactContext: ReactApplicationContext): NativeModule? = null + + override fun getReactModuleInfoProvider(): ReactModuleInfoProvider? = null +} +``` + + + + React Native uses the `ReactPackage` interface to understand what native classes the app has to use for the `ViewManager` and `Native Modules` exported by the library. ## 4. Native Code @@ -479,7 +505,7 @@ The generated code is stored in the `MyApp/node_modules/rtn-calculator/android/b codegen ├── java │ └── com -│ └── RTNCalculator +│ └── rtncalculator │ └── NativeCalculatorSpec.java ├── jni │ ├── Android.mk @@ -517,15 +543,18 @@ android ├── AndroidManifest.xml └── java └── com - └── RTNCalculator + └── rtncalculator ├── CalculatorModule.java └── CalculatorPackage.java ``` ##### Creating the `CalculatorModule.java` + + + ```java title="CalculatorModule.java" -package com.RTNCalculator; +package com.rtncalculator; import androidx.annotation.NonNull; import com.facebook.react.bridge.NativeModule; @@ -536,7 +565,7 @@ import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; import java.util.Map; import java.util.HashMap; -import com.calculator.NativeCalculatorSpec; +import com.rtncalculator.NativeCalculatorSpec; public class CalculatorModule extends NativeCalculatorSpec { @@ -559,12 +588,42 @@ public class CalculatorModule extends NativeCalculatorSpec { } ``` + + + +```kotlin title="CalculatorModule.kt" +package com.rtncalculator + +import com.facebook.react.bridge.Promise +import com.facebook.react.bridge.ReactApplicationContext +import com.rtncalculator.NativeCalculatorSpec + +class CalculatorModule(reactContext: ReactApplicationContext) : NativeCalculatorSpec(reactContext) { + + override fun getName() = NAME + + override fun add(a: Double, b: Double, promise: Promise) { + promise.resolve(a + b) + } + + companion object { + const val NAME = "RTNCalculator" + } +} +``` + + + + This class implements the module itself, which extends the `NativeCalculatorSpec` that was generated from the `NativeCalculator` JavaScript specification file. ##### Updating the `CalculatorPackage.java` + + + ```diff title="CalculatorPackage.java" -package com.RTNCalculator; +package com.rtncalculator; import androidx.annotation.Nullable; import com.facebook.react.bridge.NativeModule; @@ -613,6 +672,47 @@ public class CalculatorPackage extends TurboReactPackage { } ``` + + + +```diff title="CalculatorPackage.kt" +package com.rtncalculator; + +import com.facebook.react.TurboReactPackage +import com.facebook.react.bridge.NativeModule +import com.facebook.react.bridge.ReactApplicationContext ++import com.facebook.react.module.model.ReactModuleInfo +import com.facebook.react.module.model.ReactModuleInfoProvider + +class CalculatorPackage : TurboReactPackage() { +- override fun getModule(name: String?, reactContext: ReactApplicationContext): NativeModule? = null ++ override fun getModule(name: String?, reactContext: ReactApplicationContext): NativeModule? = ++ if (name == CalculatorModule.NAME) { ++ CalculatorModule(reactContext) ++ } else { ++ null ++ } + +- override fun getReactModuleInfoProvider() = ReactModuleInfoProvider? = null ++ override fun getReactModuleInfoProvider() = ReactModuleInfoProvider { ++ mapOf( ++ CalculatorModule.NAME to ReactModuleInfo( ++ CalculatorModule.NAME, ++ CalculatorModule.NAME, ++ false, // canOverrideExistingModule ++ false, // needsEagerInit ++ true, // hasConstants ++ false, // isCxxModule ++ true // isTurboModule ++ ) ++ ) ++ } +} +``` + + + + This is the last piece of Native Code for Android. It defines the `TurboReactPackage` object that will be used by the app to load the module. ### Final structure From 758a5902e4f1e353758512f83fce1408aba12c78 Mon Sep 17 00:00:00 2001 From: Nicola Corti Date: Tue, 4 Oct 2022 17:05:58 +0100 Subject: [PATCH 2/2] Remove extra imports --- docs/the-new-architecture/pillars-fabric-components.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/the-new-architecture/pillars-fabric-components.md b/docs/the-new-architecture/pillars-fabric-components.md index 8b5f9ebea11..403dcc0b7f6 100644 --- a/docs/the-new-architecture/pillars-fabric-components.md +++ b/docs/the-new-architecture/pillars-fabric-components.md @@ -3,9 +3,6 @@ id: pillars-fabric-components title: Fabric Native Components --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import constants from '@site/core/TabsConstants'; import NewArchitectureWarning from '../\_markdown-new-architecture-warning.mdx';