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
55 changes: 54 additions & 1 deletion docs/the-new-architecture/pillars-turbomodule.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,18 @@ export default TurboModuleRegistry.get<Spec>(
</TabItem>
</Tabs>

The final result should look like this:

```sh
TurboModulesGuide
├── MyApp
└── RTNCalculator
├── android
├── ios
└── js
└── NativeCalculator.js
```

At the beginning of the spec files are the imports:

- The `TurboModule` type, which defines the base interface for all Turbo Native Modules
Expand Down Expand Up @@ -160,6 +172,18 @@ The shared configuration is a `package.json` file used by yarn when installing y
}
```

The final result should look like this:

```sh
TurboModulesGuide
├── MyApp
└── RTNCalculator
├── android
├── ios
├── js
└── package.json
```

The upper part of the file contains some descriptive information like the name of the component, its version, and its source files. Make sure to update the various placeholders which are wrapped in `<>`: replace all the occurrences of the `<your_github_handle>`, `<Your Name>`, and `<your_email@your_provider.com>` tokens.

Then there are the dependencies for this package. For this guide, you need `react` and `react-native`.
Expand Down Expand Up @@ -199,6 +223,19 @@ Pod::Spec.new do |s|
end
```

The final result should look like this:

```sh
TurboModulesGuide
├── MyApp
└── RTNCalculator
├── android
├── ios
├── js
├── package.json
└── rtn-calculator.podspec
```

The `.podspec` file has to be a sibling of the `package.json` file, and its name is the one we set in the `package.json`'s `name` property: `rtn-calculator`.

The first part of the file prepares some variables that we use throughout the file. Then, there is a section that contains some information used to configure the pod, like its name, version, and description.
Expand Down Expand Up @@ -272,7 +309,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 Down Expand Up @@ -442,6 +479,21 @@ RCT_REMAP_METHOD(add, addA:(NSInteger)a
@end
```

The final result should look like this:
ismaelsousa marked this conversation as resolved.
Show resolved Hide resolved

```sh
TurboModulesGuide
├── MyApp
└── RTNCalculator
├── android
├── ios
│ ├── RTNCalculator.h
│ └── RTNCalculator.mm
├── js
├── package.json
└── rtn-calculator.podspec
```

The most important call is to the `RCT_EXPORT_MODULE`, which is required to export the module so that React Native can load the Turbo Native Module.

Then the `RCT_REMAP_METHOD` macro is used to expose the `add` method.
Expand Down Expand Up @@ -536,6 +588,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