Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/turbo-native-modules-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import com.facebook.react.bridge.ReactApplicationContext;

public class NativeLocalStorageModule extends NativeLocalStorageSpec {

// NOTE: This should match the module name passed to TurboModuleRegistry.getEnforcing in the spec's file
public static final String NAME = "NativeLocalStorage";

public NativeLocalStorageModule(ReactApplicationContext reactContext) {
Expand Down Expand Up @@ -105,6 +106,7 @@ class NativeLocalStorageModule(reactContext: ReactApplicationContext) : NativeLo
}

companion object {
// NOTE: This should match the module name passed to TurboModuleRegistry.getEnforcing in the spec's file
const val NAME = "NativeLocalStorage"
}
}
Expand Down
10 changes: 10 additions & 0 deletions docs/turbo-native-modules-ios.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,15 @@ NS_ASSUME_NONNULL_BEGIN
@end
```

First, we import the **codegen-generated header** for the spec; codegen creates it under
`ios/build/generated/ios/<codegenConfig.name>/<codegenConfig.name>.h`.

Next we inherit the `NativeLocalStorageSpec` protocol generated by Codegen.

:::note
If you have used different name for your spec's file, the protocol that is generated by the codegen is `<spec_file_name>Spec` or you can open the header file and check the generated protocol.
:::

Then update our implementation to use `NSUserDefaults` with a custom [suite name](https://developer.apple.com/documentation/foundation/nsuserdefaults/1409957-initwithsuitename).

```objc title="NativeLocalStorage/RCTNativeLocalStorage.mm"
Expand Down Expand Up @@ -120,6 +129,7 @@ static NSString *const RCTNativeLocalStorageKey = @"local-storage";
Important things to note:
- You can use Xcode to jump to the Codegen `@protocol NativeLocalStorageSpec`. You can also use Xcode to generate stubs for you.
- When using a different spec file name, replace `NativeLocalStorageSpecJSI` with the JSI class generated from your spec name. i.e `<spec_file_name>SpecJSI`
## Register the Native Module in your app
Expand Down
28 changes: 26 additions & 2 deletions docs/turbo-native-modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,12 @@ You can see all of the types you can use in your specification and the native ty
:::

:::info
If you want to change the name of your module and the related specs file, make sure to always use 'Native' as prefix (e.g. `NativeStorage` or `NativeUsersDefault`).
:::
The spec file must meet following requirements:

1. The file must be suffixed with `Native`. (e.g. `NativeStorage` or `NativeUsersDefault`)
2. This interface type must be named `Spec` for a Turbo Native Module.
3. The file must export a TurboModuleRegistrySpec object.
:::

Here is an implementation of the `localStorage` specification:

Expand Down Expand Up @@ -113,6 +117,17 @@ The specification is used by the React Native Codegen tools to generate platform
"dependencies": {
```

:::info
In Android, codegen uses `codegenConfig.android.javaPackageName` to determine the Java package for generated code, and the generated **interface file name** and **interface name** are derived from the Spec file name, suffixed with `Spec`.

In iOS, codegen uses `codegenConfig.name` to determine the names of the generated files/folders, while the generated protocol, base class, and JSI bindings are derived from the Spec file name, suffixed with `Spec`.

To keep the naming consistent, it is recommended to use spec's file name as `codegenConfig.name` suffixed with `Spec`.

Eg. In this case, our spec file is named as `NativeLocalStorage` and `codegenConfig.name` is set to `NativeLocalStorageSpec`

:::

With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.

<Tabs groupId="platforms" queryString defaultValue={constants.defaultPlatform}>
Expand All @@ -128,6 +143,11 @@ BUILD SUCCESSFUL in 837ms
```

This is automatically run when you build your Android application.

:::note
For this native module, you can see the generated file at `android/app/build/generated/source/codegen/java/com/nativelocalstorage/NativeLocalStorageSpec.java`
:::

</TabItem>
<TabItem value="ios" label="iOS">
Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.
Expand All @@ -153,6 +173,10 @@ Framework build type is static library
...
```
:::note
For this native module, you can see the generated files at `ios/build/generated/ios/NativeLocalStorageSpec`.
:::
</TabItem>
</Tabs>
Expand Down