Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update pillars-turbomodule.md #3355

Merged
merged 9 commits into from
Oct 3, 2022
41 changes: 35 additions & 6 deletions docs/the-new-architecture/pillars-turbomodule.md
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ android
└── java
└── com
└── rtncalculator
└── RTNCalculatorPackage.java
└── CalculatorPackage.java
```

#### The `build.gradle` file
Expand Down Expand Up @@ -272,7 +272,7 @@ Second, create an `android/src/main` folder. Inside that folder, create a `Andro

```xml title="AndroidManifest.xml"
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.RTNCalculator">
package="com.rtncalculator">
</manifest>
```

Expand All @@ -282,9 +282,9 @@ This is a small manifest file that defines the package for your module.

Finally, you need a class that extends the `TurboReactPackage` 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/rtncalculator` folder and, inside that folder, create a `RTNCalculatorPackage.java` file.
Create an `android/src/main/java/com/rtncalculator` folder and, inside that folder, create a `CalculatorPackage.java` file.

```java title="RTNCalculatorPackage.java"
```java title="CalculatorPackage.java"
package com.RTNCalculator;

import androidx.annotation.Nullable;
Expand Down Expand Up @@ -504,8 +504,8 @@ codegen

The native code for the Android side of a Turbo Native Module requires:

1. to create a `RTNCalculatorModule.java` that implements the module.
2. to update the `RTNCalculatorPackage.java` created in the previous step.
1. to create a `CalculatorModule.java` that implements the module.
2. to update the `CalculatorPackage.java` created in the previous step.

The final structure within the Android library should look like this:

Expand Down Expand Up @@ -536,6 +536,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;

public class CalculatorModule extends NativeCalculatorSpec {

Expand Down Expand Up @@ -614,6 +615,34 @@ public class CalculatorPackage extends TurboReactPackage {

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

The final structure should look like this:

```sh
TurboModulesGuide
├── MyApp
└── RTNCalculator
├── android
│ ├── build.gradle
│ └── src
│ └── main
│ ├── AndroidManifest.xml
│ └── java
│ └── com
│ └── rtncalculator
│ ├── CalculatorPackage.java
│ └── CalculatorModule.java
├── generated
├── ios
│ ├── RTNCalculator.h
│ └── RTNCalculator.mm
├── js
│ └── NativeCalculator.js
├── package.json
└── rtn-calculator.podspec
```

## 5. Adding the Turbo Native Module to your App

Now you can install and use the Turbo Native Module in your app.
Expand Down