turbo-native-modules: Enhance docs

docs/turbo-native-modules-android.md

@@ -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) {
@@ -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"
   }
 }

docs/turbo-native-modules-ios.md

@@ -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 you 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"
@@ -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
 

docs/turbo-native-modules.md

@@ -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:
 
@@ -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}>
@@ -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.
@@ -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>