### Example Folder Structure for RTNCalculator

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This example demonstrates the recommended folder structure for a React Native Turbo Native Module project, named RTNCalculator. It includes separate directories for JavaScript, iOS, and Android implementations, promoting modularity and eventual open-source release.

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

--------------------------------

### Create New React Native Project

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-apps.md

Initializes a new React Native project with the latest version, skipping the initial installation to allow for subsequent setup steps.

```shell
npx react-native@latest init AwesomeProject --skip-install
cd AwesomeProject
yarn install
```

--------------------------------

### Initialize React Native App and Enable New Architecture

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules-xplat.md

Commands to create a new React Native application, install dependencies, and enable the New Architecture for Android and iOS. The Android configuration is done via `gradle.properties`, and iOS requires specific `pod install` flags.

```sh
npx react-native init CxxTurboModulesGuide
cd CxxTurboModulesGuide
yarn install

# On Android, modify android/gradle.properties:
# - newArchEnabled=false
# + newArchEnabled=true

# On iOS, run pod install with the flag:
# RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
```

--------------------------------

### Example: Generate iOS Native Code Artifacts

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/appendix.md

An example demonstrating the manual invocation of the Codegen scripts to generate native iOS interface code. It first generates a schema file from JavaScript sources located in './js' and then uses this schema to create native artifacts in the './ios' directory for a library named 'MyLibSpecs', specifically for modules.

```bash
# Generate schema - only needs to be done whenever JS specs change
node node_modules/react-native-codegen/lib/cli/combine/combine-js-to-schema-cli.js /tmp/schema.json ./js

# Generate native code artifacts
node node_modules/react-native/scripts/generate-specs-cli.js \
  --platform ios \
  --schemaPath /tmp/schema.json \
  --outputDir ./ios \
  --libraryName MyLibSpecs \
  --libraryType modules
```

--------------------------------

### Run Codegen CLI (Default)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/codegen.md

This example shows how to run the React Native Codegen CLI with default settings. It reads configuration from the current directory's package.json.

```sh
npx react-native codegen
```

--------------------------------

### Implement CalculatorPackage for React Native (Java/Kotlin)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This class implements the BaseReactPackage interface, which is essential for React Native to recognize and utilize native modules. An empty implementation is sufficient for Codegen.

```java
package com.rtncalculator;

import androidx.annotation.Nullable;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.module.model.ReactModuleInfoProvider;
import com.facebook.react.BaseReactPackage;

import java.util.Collections;
import java.util.List;

public class CalculatorPackage extends BaseReactPackage {

  @Nullable
  @Override
  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
          return null;
  }

  @Override
  public ReactModuleInfoProvider getReactModuleInfoProvider() {
      return null;
  }
}
```

```kotlin
package com.rtncalculator;

import com.facebook.react.BaseReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.module.model.ReactModuleInfoProvider

class CalculatorPackage : BaseReactPackage() {
  override fun getModule(name: String?, reactContext: ReactApplicationContext): NativeModule? = null

  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider? = null
}
```

--------------------------------

### Add `pod-install` Script to package.json

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-apps.md

Adds a script to `package.json` for easily running `pod install` with the New Architecture enabled for iOS. This simplifies the process of updating native dependencies.

```json
  "scripts": {
    "pod-install": "cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install"
  }
```

--------------------------------

### Configure build.gradle for Android (Java/Kotlin)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This Gradle configuration sets up the Android build environment for React Native, specifying dependencies and SDK versions. It's applicable for both Java and Kotlin projects.

```java
buildscript {
  ext.safeExtGet = {prop, fallback ->
    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
  }
  repositories {
    google()
    gradlePluginPortal()
  }
  dependencies {
    classpath("com.android.tools.build:gradle:7.3.1")
  }
}

apply plugin: 'com.android.library'
apply plugin: 'com.facebook.react'

android {
  compileSdkVersion safeExtGet('compileSdkVersion', 33)
  namespace "com.rtncalculator"
}

repositories {
  mavenCentral()
  google()
}

dependencies {
  implementation 'com.facebook.react:react-native'
}
```

```kotlin
buildscript {
  ext.safeExtGet = {prop, fallback ->
    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
  }
  repositories {
    google()
    gradlePluginPortal()
  }
  dependencies {
    classpath("com.android.tools.build:gradle:7.3.1")
    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.22")
  }
}

apply plugin: 'com.android.library'
apply plugin: 'com.facebook.react'
apply plugin: 'org.jetbrains.kotlin.android'

android {
  compileSdkVersion safeExtGet('compileSdkVersion', 33)
  namespace "com.rtncalculator"
}

repositories {
  mavenCentral()
  google()
}

dependencies {
  implementation 'com.facebook.react:react-native'
}
```

--------------------------------

### Enable New Architecture for iOS

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-apps.md

Enables the New Architecture for iOS by running `bundle install` and `pod install` with the `RCT_NEW_ARCH_ENABLED=1` flag. This is for apps created from the React Native CLI.

```shell
# from `ios` directory
bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
```

--------------------------------

### Shared package.json Configuration for React Native Module

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/fabric-native-components.md

Defines the metadata, dependencies, and codegen configuration for a React Native module. It is used by yarn for installation and by Codegen for native component setup. Ensure placeholders like GitHub handle and author details are updated.

```json
{
  "name": "rtn-centered-text",
  "version": "0.0.1",
  "description": "Showcase a Fabric Native Component with a centered text",
  "react-native": "js/index",
  "source": "js/index",
  "files": [
    "js",
    "android",
    "ios",
    "rtn-centered-text.podspec",
    "!android/build",
    "!ios/build",
    "!**/__tests__",
    "!**/__fixtures__",
    "!**/__mocks__"
  ],
  "keywords": ["react-native", "ios", "android"],
  "repository": "https://github.com/<your_github_handle>/rtn-centered-text",
  "author": "<Your Name> <your_email@your_provider.com> (https://github.com/<your_github_handle>)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/<your_github_handle>/rtn-centered-text/issues"
  },
  "homepage": "https://github.com/<your_github_handle>/rtn-centered-text#readme",
  "devDependencies": {},
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "codegenConfig": {
    "name": "RTNCenteredTextSpecs",
    "type": "components",
    "jsSrcsDir": "js"
  }
}
```

--------------------------------

### Migrating dispatchViewManagerCommand with codegenNativeCommands (React Native)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-libraries-prerequisites.md

This example illustrates how to migrate away from `UIManager.dispatchViewManagerCommand` by using `codegenNativeCommands`. It defines a `NativeCommands` interface and uses it with `codegenNativeCommands` to generate the necessary command dispatching logic for a custom map component.

```js
// @flow strict-local

import codegenNativeCommands from "react-native/Libraries/Utilities/codegenNativeCommands";
import type { HostComponent } from "react-native/Libraries/Renderer/shims/ReactNativeTypes";

type MyCustomMapNativeComponentType = HostComponent<NativeProps>;

interface NativeCommands {
  +moveToRegion: (
    viewRef: React.ElementRef<MyCustomMapNativeComponentType>,
    region: MapRegion,
    duration: number
  ) => void;
}

export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  supportedCommands: ["moveToRegion"],
});

```

--------------------------------

### Enable New Architecture for Existing iOS Apps

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-apps.md

Reinstalls pods for an existing iOS app with the New Architecture enabled by running `pod install` using the `RCT_NEW_ARCH_ENABLED=1` flag.

```shell
# Run pod install with the flag:
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
```

--------------------------------

### package.json Configuration for React Native New Architecture

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This JSON file defines the metadata, dependencies, and Codegen configuration for a React Native module. It includes package details, peer dependencies like React and React Native, and specific settings for the Codegen, such as module name, type, and source directories. Ensure placeholders like GitHub handles and author information are updated.

```json
{
  "name": "rtn-calculator",
  "version": "0.0.1",
  "description": "Add numbers with Turbo Native Modules",
  "react-native": "js/index",
  "source": "js/index",
  "files": [
    "js",
    "android",
    "ios",
    "rtn-calculator.podspec",
    "!android/build",
    "!ios/build",
    "!**/__tests__",
    "!**/__fixtures__",
    "!**/__mocks__"
  ],
  "keywords": ["react-native", "ios", "android"],
  "repository": "https://github.com/<your_github_handle>/rtn-calculator",
  "author": "<Your Name> <your_email@your_provider.com> (https://github.com/<your_github_handle>)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/<your_github_handle>/rtn-calculator/issues"
  },
  "homepage": "https://github.com/<your_github_handle>/rtn-calculator#readme",
  "devDependencies": {},
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "codegenConfig": {
    "name": "RTNCalculatorSpec",
    "type": "modules",
    "jsSrcsDir": "js",
    "android": {
      "javaPackageName": "com.rtncalculator"
    }
  }
}
```

--------------------------------

### Install iOS Dependencies for New Architecture (Pod Install)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/fabric-native-components.md

This command installs the necessary iOS dependencies for your React Native project, specifically enabling the New Architecture by setting the `RCT_NEW_ARCH_ENABLED` environment variable. This ensures that Codegen operations are performed correctly for native component integration.

```sh
cd ios
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
```

--------------------------------

### Run Codegen CLI (Android, Custom Paths)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/codegen.md

This example demonstrates running the Codegen CLI for Android, specifying a custom path to package.json and a dedicated output directory for generated files.

```sh
npx react-native codegen \
    --path third-party/some-library \
    --platform android \
    --outputPath third-party/some-library/android/generated
```

--------------------------------

### RTNCalculator Native Header Interface (iOS)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This Objective-C header file defines the interface for the RTNCalculator native module. It conforms to the NativeRTNCalculatorSpec protocol, which is generated by Codegen. This file is used to declare native methods that can be invoked from JavaScript. For this example, the interface is empty as no specific methods are required.

```objc
#import <RTNCalculatorSpec/RTNCalculatorSpec.h>

NS_ASSUME_NONNULL_BEGIN

@interface RTNCalculator : NSObject <NativeRTNCalculatorSpec>

@end

NS_ASSUME_NONNULL_END
```

--------------------------------

### Use Turbo Native Module Calculator in React Native App (Flow)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Example of an App.js file using the `add` method from a Turbo Native Module 'RTNCalculator'. This snippet requires the 'rtn-calculator' package and demonstrates basic asynchronous method invocation and state updates in React Native.

```typescript
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import React from "react";
import { useState } from "react";
import type { Node } from "react";
import { SafeAreaView, StatusBar, Text, Button } from "react-native";
import RTNCalculator from "rtn-calculator/js/NativeCalculator";

const App: () => Node = () => {
  const [result, setResult] = useState<number | null>(null);
  return (
    <SafeAreaView>
      <StatusBar barStyle = {"dark-content"} />
      <Text style={{ marginLeft: 20, marginTop: 20 }}>
        3+7={result ?? "??"}
      </Text>
      <Button
        title="Compute"
        onPress={async () => {
          const value = await RTNCalculator.add(3, 7);
          setResult(value);
        }}
      />
    </SafeAreaView>
  );
};
export default App;

```

--------------------------------

### Use Turbo Native Module Calculator in React Native App (TypeScript)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Example of an App.tsx file using the `add` method from a Turbo Native Module 'RTNCalculator'. This snippet is similar to the Flow example but uses TypeScript syntax and handles potential null values from the asynchronous operation.

```typescript
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */
import React from "react";
import { useState } from "react";
import { SafeAreaView, StatusBar, Text, Button } from "react-native";
import RTNCalculator from "rtn-calculator/js/NativeRTNCalculator";

const App: () => JSX.Element = () => {
  const [result, setResult] = useState<number | null>(null);
  return (
    <SafeAreaView>
      <StatusBar barStyle = {"dark-content"} />
      <Text style={{ marginLeft: 20, marginTop: 20 }}>
        3+7={result ?? "??"}
      </Text>
      <Button
        title="Compute"
        onPress={async () => {
          const value = await RTNCalculator?.add(3, 7);
          setResult(value ?? null);
        }}
      />
    </SafeAreaView>
  );
};
export default App;

```

--------------------------------

### Android Native Module Implementation (Kotlin)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Implement the native Android Turbo Module in Kotlin by creating a `CalculatorModule.kt` file that extends the generated `NativeRTNCalculatorSpec`.

```kotlin
package com.rtncalculator

import com.facebook.react.bridge.Promise
import com.facebook.react.bridge.ReactApplicationContext
import com.rtncalculator.NativeRTNCalculatorSpec

class CalculatorModule(reactContext: ReactApplicationContext) : NativeRTNCalculatorSpec(reactContext) {

  override fun getName() = NAME

  override fun add(a: Double, b: Double, promise: Promise) {
    promise.resolve(a + b)
  }

  companion object {
    const val NAME = "RTNCalculator"
  }
}
```

--------------------------------

### Update CalculatorPackage in Kotlin for React Native New Architecture

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This snippet demonstrates the equivalent updates for `CalculatorPackage.kt` in Kotlin. It modifies the `getModule` function to return the `CalculatorModule` and provides an implementation for `getReactModuleInfoProvider` to define the module's metadata for the new architecture.

```diff
package com.rtncalculator;

import com.facebook.react.BaseReactPackage
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 : BaseReactPackage() {
- 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
+       false, // isCxxModule
+       true // isTurboModule
+     )
+   )
+ }
}

```

--------------------------------

### Update iOS Turbo Module Podspec with install_modules_dependencies

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat-turbo-modules.md

This Ruby code snippet demonstrates how to update an iOS Turbo Native Module's podspec to use the `install_modules_dependencies` function. This function handles the installation of necessary dependencies for the New Architecture, ensuring compatibility and avoiding installation when not needed.

```diff
require "json"

package = JSON.parse(File.read(File.join(__dir__, "package.json")))

-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'

Pod::Spec.new do |s|
  # Default fields for a valid podspec
  s.name            = "<TM Name>"
  s.version         = package["version"]
  s.summary         = package["description"]
  s.description     = package["description"]
  s.homepage        = package["homepage"]
  s.license         = package["license"]
  s.platforms       = { :ios => "11.0" }
  s.author          = package["author"]
  s.source          = { :git => package["repository"], :tag => "#{s.version}" }

  s.source_files    = "ios/**/*.{h,m,mm,swift}"
  # React Native Core dependency
+  install_modules_dependencies(s)
-  s.dependency "React-Core"
-
-  # The following lines are required by the New Architecture.
-  s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-  s.pod_target_xcconfig    = {
-      "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-      "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-  }
-
-  s.dependency "React-Codegen"
-  s.dependency "RCT-Folly"
-  s.dependency "RCTRequired"
-  s.dependency "RCTTypeSafety"
-  s.dependency "ReactCommon/turbomodule/core"
end

```

--------------------------------

### Android Native Module Implementation (Java)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Implement the native Android Turbo Module in Java by creating a `CalculatorModule.java` file that extends the generated `NativeRTNCalculatorSpec`.

```java
package com.rtncalculator;

import androidx.annotation.NonNull;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
import java.util.HashMap;
import com.rtncalculator.NativeRTNCalculatorSpec;

public class CalculatorModule extends NativeRTNCalculatorSpec {

    public static String NAME = "RTNCalculator";

    CalculatorModule(ReactApplicationContext context) {
        super(context);
    }

    @Override
    @NonNull
    public String getName() {
        return NAME;
    }

    @Override
    public void add(double a, double b, Promise promise) {
        promise.resolve(a + b);
    }
}
```

--------------------------------

### Using Instance Methods for UIManager APIs in React Native

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-libraries-prerequisites.md

In the New Architecture, many UIManager methods are now accessible as instance methods on native component refs. This example shows how to use `useRef` and `useEffect` to call the `measure` method on a native view.

```tsx
function MyComponent(props: Props) {
  const viewRef = useRef(null);

  useEffect(() => {
    viewRef.current.measure(((left, top, width, height, pageX, pageY) => {
      // ...
    }));
  }, []);

  return <View ref={viewRef} />;
}
```

--------------------------------

### iOS Podspec Configuration for React Native New Architecture

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This Ruby file configures the podspec for an iOS React Native module. It dynamically reads information from the package.json file, sets essential metadata like name, version, and license, and specifies source files. It also includes a crucial call to `install_modules_dependencies` which handles New Architecture compatibility.

```ruby
require "json"

package = JSON.parse(File.read(File.join(__dir__, "package.json")))

Pod::Spec.new do |s|
  s.name            = "rtn-calculator"
  s.version         = package["version"]
  s.summary         = package["description"]
  s.description     = package["description"]
  s.homepage        = package["homepage"]
  s.license         = package["license"]
  s.platforms       = { :ios => "11.0" }
  s.author          = package["author"]
  s.source          = { :git => package["repository"], :tag => "#{s.version}" }

  s.source_files    = "ios/**/*.{h,m,mm,swift}"

  install_modules_dependencies(s)
end
```

--------------------------------

### RTNCalculator Native Implementation (iOS)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This Objective-C++ implementation file provides the native logic for the RTNCalculator Turbo Native Module. It exports the module using RCT_EXPORT_MODULE(), defines an 'add' method matching the Codegen specification, and implements the getTurboModule method to provide an instance of the native module for JavaScript to interact with.

```objc
#import "RTNCalculator.h"

@implementation RTNCalculator

RCT_EXPORT_MODULE()

- (void)add:(double)a b:(double)b resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
    NSNumber *result = [[NSNumber alloc] initWithInteger:a+b];
    resolve(result);
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
    return std::make_shared<facebook::react::NativeRTNCalculatorSpecJSI>(params);
}

@end
```

--------------------------------

### Update CalculatorPackage in Java for React Native New Architecture

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This snippet shows the modifications to `CalculatorPackage.java` to support the React Native new architecture. It updates the `getModule` method to return the `CalculatorModule` and implements `getReactModuleInfoProvider` to provide module information, including that it's a Turbo Module.

```diff
package com.rtncalculator;

import androidx.annotation.Nullable;
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;
import com.facebook.react.BaseReactPackage;

import java.util.Collections;
import java.util.List;
+ import java.util.HashMap;
+ import java.util.Map;

public class CalculatorPackage extends BaseReactPackage {

  @Nullable
  @Override
  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
+      if (name.equals(CalculatorModule.NAME)) {
+          return new CalculatorModule(reactContext);
+      } else {
          return null;
+      }
  }


  @Override
  public ReactModuleInfoProvider getReactModuleInfoProvider() {
-      return null;
+      return () -> {
+          final Map<String, ReactModuleInfo> moduleInfos = new HashMap<>();
+          moduleInfos.put(
+                  CalculatorModule.NAME,
+                  new ReactModuleInfo(
+                          CalculatorModule.NAME,
+                          CalculatorModule.NAME,
+                          false, // canOverrideExistingModule
+                          false, // needsEagerInit
+                          false, // isCxxModule
+                          true // isTurboModule
+          ));
+          return moduleInfos;
+      };
  }
}

```

--------------------------------

### Generate Android Code with Codegen

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Manually invoke Codegen for Android by adding the package and running a Gradle task. Ensure the New Architecture is enabled in `gradle.properties` by setting `newArchEnabled` to `true`.

```sh
cd MyApp
yarn add ../RTNCalculator
cd android
./gradlew generateCodegenArtifactsFromSchema
```

--------------------------------

### Listen for Event in JS with useEffect

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Demonstrates how to listen for native events in JavaScript using React's useEffect hook. It sets up a listener for `onValueChanged` events from the native module and includes a cleanup function to remove the listener when the component unmounts, preventing memory leaks.

```typescript
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */
import React from "react";
import { useState } from "react";
- import { SafeAreaView, StatusBar, Text, Button } from "react-native";
+ import { Alert, EventSubscription, SafeAreaView, StatusBar, Text, Button } from "react-native";
import RTNCalculator from "rtn-calculator/js/NativeRTNCalculator";

const App: () => JSX.Element = () => {
  const [result, setResult] = useState<number | null>(null);
+  const listenerSubscription = React.useRef<null | EventSubscription>(null);

+  React.useEffect(() => {
+    listenerSubscription.current = RTNCalculator.onValueChanged((data) => { Alert.alert(`Result: ${data}`) });

+    return  () => {
+      listenerSubscription.current?.remove();
+      listenerSubscription.current = null;
+    }
+  }, [])


  return (
    <SafeAreaView>
      <StatusBar barStyle ="dark-content" />
      <Text style={{ marginLeft: 20, marginTop: 20 }}>
        3+7={result ?? "??"}
      </Text>
      <Button
        title="Compute"
        onPress={async () => {
          const value = await RTNCalculator?.add(3, 7);
          setResult(value ?? null);
        }}
      />
    </SafeAreaView>
  );
};
export default App;
```

--------------------------------

### TypeScript TurboModule Specification for Native Calculator

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Defines the interface for a Turbo Native Module using TypeScript. It includes the necessary imports and specifies the 'add' function signature. This file is named Native<MODULE_NAME>.ts.

```typescript
import { TurboModule, TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
  add(a: number, b: number): Promise<number>;
}

export default TurboModuleRegistry.get<Spec>("RTNCalculator") as Spec | null;
```

--------------------------------

### Clean iOS Build Directory

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This command is used to clean the build directory for an iOS React Native project. It is necessary when regenerating Codegen artifacts, especially if the Spec name has changed, to prevent retaining old files. This ensures a clean build process for the native code.

```shell
cd MyApp/ios
rm -rf build
```

--------------------------------

### Generate Codegen Artifacts for iOS

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

This command generates native code artifacts for the iOS platform using React Native's Codegen. It involves adding a native module to a React Native project and then running the Codegen script with specified paths. The output includes generated header and implementation files for Turbo Native Modules and Fabric Components.

```shell
cd MyApp
yarn add ../RTNCalculator
cd ..
node MyApp/node_modules/react-native/scripts/generate-codegen-artifacts.js \
  --targetPlatform ios \
  --path MyApp/ \
  --outputPath RTNCalculator/generated/
```

--------------------------------

### Update Podspec with install_modules_dependencies (Diff - Ruby)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat-fabric-component.md

This Ruby diff shows how to update a podspec file to use the `install_modules_dependencies` function. This function simplifies dependency management for the New Architecture by automatically installing necessary components when enabled and avoiding them when not. This replaces several manual dependency and configuration lines with a single function call.

```diff
require "json"

package = JSON.parse(File.read(File.join(__dir__, "package.json")))

- folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'

Pod::Spec.new do |s|
  # Default fields for a valid podspec
  s.name            = "<FC Name>"
  s.version         = package["version"]
  s.summary         = package["description"]
  s.description     = package["description"]
  s.homepage        = package["homepage"]
  s.license         = package["license"]
  s.platforms       = { :ios => "11.0" }
  s.author          = package["author"]
  s.source          = { :git => package["repository"], :tag => "#{s.version}" }

  s.source_files    = "ios/**/*.{h,m,mm,swift}"
  # React Native Core dependency
+  install_modules_dependencies(s)
-  s.dependency "React-Core"
-  # 
The following lines are required by the New Architecture.
-  s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-  s.pod_target_xcconfig    = {
-      "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-      "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
-      "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-  }
-
-  s.dependency "React-RCTFabric"
-  s.dependency "React-Codegen"
-  s.dependency "RCT-Folly"
-  s.dependency "RCTRequired"
-  s.dependency "RCTTypeSafety"
-  s.dependency "ReactCommon/turbomodule/core"
end

```

--------------------------------

### Integrating AppTurboModuleProvider (C++)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules-xplat.md

Demonstrates the integration of the AppTurboModuleProvider within React Native's new architecture. This snippet shows how to instantiate the provider and use its getTurboModule method to retrieve modules in platform-specific entry points like OnLoad.cpp for Android and AppDelegate.mm for iOS.

```cpp
static facebook::react::AppTurboModuleProvider appTurboModuleProvider;
return appTurboModuleProvider.getTurboModule(name, jsInvoker);
```

--------------------------------

### NativeSampleModule Implementation File (C++)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules-xplat.md

Provides the implementation for the NativeSampleModule's methods, including the `reverseString` function. This file contains the core logic of the native module.

```cpp
#include "NativeSampleModule.h"

namespace facebook::react {

NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
    : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}

std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
  return std::string(input.rbegin(), input.rend());
}

} // namespace facebook::react
```

--------------------------------

### Project Folder Structure for Fabric Native Component

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/fabric-native-components.md

Illustrates the recommended folder structure for a new Fabric Native Component, separating JavaScript, iOS, and Android native code.

```shell
.
├── MyApp
└── RTNCenteredText
    ├── android
    ├── ios
    └── js
```

--------------------------------

### TurboModule Implementation in Java

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat-turbo-modules.md

Demonstrates how to implement a TurboModule using the Impl module in Java. This involves declaring and initializing an instance of the implementation class and using it to execute module functions. It adheres to the module's spec for method signatures and return types.

```java
public class MyModule extends MyModuleSpec {
    // declare an instance of the implementation
    private MyModuleImpl implementation;

    MyModule(ReactApplicationContext context) {
        super(context);
        // initialize the implementation of the module
        implementation = MyModuleImpl();
    }

    @Override
    @NonNull
    public String getName() {
        // NAME is a static variable, so we can access it using the class name.
        return MyModuleImpl.NAME;
    }

    @Override
    public void foo(double a, double b, Promise promise) {
        // Use the implementation instance to execute the function.
        implementation.foo(a, b, promise);
    }

}
```

--------------------------------

### Initialize React Native App

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/codegen.md

Creates a new React Native project using the React Native CLI. This is a prerequisite for using Codegen, ensuring a proper development environment is set up. Assumes React Native version 0.70.0 or greater.

```sh
npx react-native init SampleApp --version 0.70.0
```

--------------------------------

### Handle 'moveToRegion' Command in Android Native Implementation (Java)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-libraries-prerequisites.md

This Java snippet demonstrates handling the 'moveToRegion' command in the Android native code. It overrides the `receiveCommand` method and uses a switch statement to identify the command, then extracts the region and duration from the provided arguments for native execution.

```java
// receiveCommand signature has changed to receive String commandId
@Override
  public void receiveCommand(
      ReactMapDrawerView view, String commandId, @Nullable ReadableArray args) {
    switch (commandId) {
      case "moveToRegion":
        if (args == null) {
          break;
        }

        ReadableMap region = args.getMap(0);
        int durationMs = args.getInt(1);
        // ... act on the view...
        break;
    }
  }
```

--------------------------------

### Android Generated Code Structure

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

The generated code for the Android side of a Turbo Native Module is stored in a specific directory structure, including Java, JNI, and schema files.

```tree
codegen
├── java
│   └── com
│       └── rtncalculator
│           └── NativeRTNCalculatorSpec.java
├── jni
│   ├── Android.mk
│   ├── CMakeLists.txt
│   ├── RTNCalculator-generated.cpp
│   ├── RTNCalculator.h
│   └── react
│       └── renderer
│           └── components
│               └── RTNCalculator
│                   ├── ComponentDescriptors.h
│                   ├── EventEmitters.cpp
│                   ├── EventEmitters.h
│                   ├── Props.cpp
│                   ├── Props.h
│                   ├── ShadowNodes.cpp
│                   └── ShadowNodes.h
└── schema.json
```

--------------------------------

### Define Turbo Native Module Spec in JavaScript (TypeScript)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-libraries-prerequisites.md

This code defines a basic JavaScript specification for a Turbo Native Module using TypeScript. It exports a `Spec` object that extends `TurboModule` and declares module methods like `getConstants` and `getString`. The spec is registered using `TurboModuleRegistry.get`. This serves as the source of truth for native module APIs.

```typescript
import { TurboModule, TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
  readonly getConstants: () => {};

  // your module methods go here, for example:
  getString(id: string): Promise<string>;
}

export default TurboModuleRegistry.get<Spec>("<MODULE_NAME>");
```

--------------------------------

### Handle 'moveToRegion' Command in Android Native Implementation (Kotlin)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-libraries-prerequisites.md

This Kotlin snippet illustrates how to handle the 'moveToRegion' command within the Android native implementation. It overrides the `receiveCommand` method to parse the incoming command ID and arguments, extracting region data and duration for further processing.

```kotlin
fun receiveCommand(
        view: ReactMapDrawerView?, commandId: String?, args: ReadableArray? 
    ) {
        when (commandId) {
            "moveToRegion" -> {
                if (args != null) {
                    val region: ReadableMap = args.getMap(0)
                    val durationMs: Int = args.getInt(1)
                    // ... act on the view...
                }
            }
        }
    }
```

--------------------------------

### Configure Codegen with package.json

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-libraries-prerequisites.md

This JSON snippet shows how to configure the Codegen tool within a library's package.json file. It specifies the library name, module type, source directory, output directories for iOS and Android, and Android-specific package name for generated code. This configuration is essential for Codegen to generate the necessary native interface code.

```json
{
  "codegenConfig": {
    "name": "<library name>",
    "type": "all",
    "jsSrcsDir": ".",
    "outputDir": {
      "ios": "ios/generated",
      "android": "android/generated"
    },
    "includesGeneratedCode": true,
    "android": {
      "javaPackageName": "com.facebook.fbreact.specs"
    }
  }
}
```

--------------------------------

### iOS: Get CallInvoker from TurboModule

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-libraries.md

In bridgeless mode on iOS, accessing `bridge.jsCallInvoker` directly can lead to crashes as it might be nil. This snippet shows the recommended approach to obtain the `callInvoker` by querying a TurboModule.

```objective-c
#import <React/RCTNativeModules.h>

// Assume 'bridge' is your RCTBridge instance
// and 'TurboModuleRegistry' is accessible

id<RCTTurboModule> turboModule = TurboModuleRegistry_getModule("MyTurboModule");
id<RCTCallInvoker> callInvoker = nil;

if (turboModule && [turboModule conformsToProtocol:@protocol(RCTTurboModule)]) {
    callInvoker = RCTNativeModulesProvider.callInvokerProvider(turboModule);
}

if (callInvoker) {
    // Use the callInvoker
} else {
    // Handle the case where callInvoker is not available
}
```

--------------------------------

### Objective-C/C++: Fabric Native Component Implementation File

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat-fabric-component.md

Provides the implementation file for a Fabric Native Component, `RNMyComponentView.mm`. This file includes necessary React Native renderer imports, defines the component descriptor provider, initializes the view, and handles prop updates. It uses C++ namespaces for React Native's internal types.

```objectivec
#import "RNMyComponentView.h"

// <react/renderer imports>

#import "RCTFabricComponentsPlugins.h"

using namespace facebook::react;

@interface RNMyComponentView () <RCTMyComponentViewViewProtocol>

@end

@implementation RNMyComponentView {
    UIView * _view;
}

+ (ComponentDescriptorProvider)componentDescriptorProvider
{
    // ... return the descriptor ...
}

- (instancetype)initWithFrame:(CGRect)frame
{
  // ... initialize the object ...
}

- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
{
  // ... set up the props ...

  [super updateProps:props oldProps:oldProps];
}

Class<RCTComponentViewProtocol> MyComponentViewCls(void)
{
  return RNMyComponentView.class;
}

@end
```

--------------------------------

### Update Android CalculatorModule.java with Event Emitter

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Modifies the CalculatorModule.java file on Android to emit a value change event after the addition operation is completed. This sends the result of the addition operation back to the JavaScript listener.

```java
public class CalculatorModule extends NativeCalculatorSpec {

    public static String NAME = "RTNCalculator";

    CalculatorModule(ReactApplicationContext context) {
        super(context);
    }

    @Override
    @NonNull
    public String getName() {
        return NAME;
    }

    @Override
    public void add(double a, double b, Promise promise) {
        promise.resolve(a + b);
+       emitOnValueChanged(a + b);
    }
}
```

--------------------------------

### Android CMakeLists.txt for TurboModule and Application Linking

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules-xplat.md

Appends directives to the Android CMakeLists.txt file to include the TurboModules directory and link the application against the 'tm' library. This is crucial for enabling the New Architecture's native module system.

```diff
// ...

# This file includes all the necessary to let you build your application with the New Architecture.
include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)

+ # App needs to add and link against tm (TurboModules) folder
+ add_subdirectory(${REACT_ANDROID_DIR}/../../../tm/ tm_build)
+ target_link_libraries(${CMAKE_PROJECT_NAME} tm)
```

--------------------------------

### Implement Native Interface for New Architecture

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-libraries-ios.md

This Objective-C snippet illustrates how a native module should be updated to conform to the protocols generated by Codegen for the New Architecture. It shows extending a spec and implementing required methods.

```objc
#import <MyAwesomeSpecs/MyAwesomeSpecs.h>

@interface MyAwesomeModule () <StringGetterSpec>
@end

RCT_EXPORT_METHOD(getString:(NSString *)string
                   callback:(RCTResponseSenderBlock)callback)
{
  // Implement this method
}

- (std::shared_ptr<TurboModule>)getTurboModule:(const ObjCTurboModule::InitParams &)params
{
  return std::make_shared<StringGetterSpecJSI>(params);
}
```

--------------------------------

### Flow TurboModule Specification for Native Calculator

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Defines the interface for a Turbo Native Module using Flow. It includes the necessary imports and specifies the 'add' function signature. This file is named Native<MODULE_NAME>.js.

```typescript
// @flow
import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  add(a: number, b: number): Promise<number>;
}
export default (TurboModuleRegistry.get<Spec>(
  'RTNCalculator'
)): ?Spec;
```

--------------------------------

### Handle 'moveToRegion' Command in iOS Native Implementation

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-libraries-prerequisites.md

This Objective-C snippet shows how to export a method in the native iOS code that corresponds to the 'moveToRegion' command dispatched from JavaScript. This method receives the view tag, region data, and duration, allowing native operations to be performed.

```objectivec
RCT_EXPORT_METHOD(moveToRegion:(nonnull NSNumber *)reactTag
                        region:(NSDictionary *)region
                      duration:(double)duration
){
   ...
}
```

--------------------------------

### AppTurboModuleProvider Implementation (C++)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules-xplat.md

Implements the AppTurboModuleProvider in C++ for the React Native new architecture. This file provides the logic for the getTurboModule method, which checks for specific module names like 'NativeSampleModule' and returns corresponding TurboModule instances. It includes necessary headers for the module implementation.

```cpp
#include "AppTurboModuleProvider.h"
#include "NativeSampleModule.h"

namespace facebook::react {

std::shared_ptr<TurboModule> AppTurboModuleProvider::getTurboModule(
    const std::string& name,
    std::shared_ptr<CallInvoker> jsInvoker) const {
  if (name == "NativeSampleModule") {
    return std::make_shared<facebook::react::NativeSampleModule>(jsInvoker);
  }
  // Other C++ Turbo Native Modules for you app
  return nullptr;
}

} // namespace facebook::react
```

--------------------------------

### Update iOS RTNCalculator.mm with Event Emitter

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Updates the RTNCalculator.mm file in iOS to include the logic for emitting an event after a successful addition operation. This involves calling `emitOnValueChanged` with the computed result, sending data to the JavaScript side.

```objective-c
#import "RTNCalculator.h"

@implementation RTNCalculator

RCT_EXPORT_MODULE()

- (void)add:(double)a b:(double)b resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
    NSNumber *result = [[NSNumber alloc] initWithInteger:a+b];
    resolve(result);
+   [self emitOnValueChanged:@(result)];
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
    return std::make_shared<facebook::react::NativeRTNCalculatorSpecJSI>(params);
}

@end
```

--------------------------------

### Implementing Custom Type Function in C++

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/cxx-custom-types.md

Provides the C++ implementation for a function that processes a custom type. This example modifies the input 'CustomType' object's properties before returning it, demonstrating data manipulation within the native module.

```cpp
CustomType NativeSampleModule::passCustomType(jsi::Runtime& rt, CustomType input) {
  input.key = "1909";
  input.enabled = !input.enabled;
  input.time = 42;
  return input;
}

```

--------------------------------

### Add Event Emitter to JS Spec (TypeScript)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Updates the TypeScript specification for a Turbo Native Module to incorporate an EventEmitter for `onValueChanged`. This enables the native module to emit events, facilitating asynchronous updates and communication with the JavaScript layer.

```diff
import { TurboModule, TurboModuleRegistry } from "react-native";
+ import type {EventEmitter} from 'react-native/Libraries/Types/CodegenTypes';

export interface Spec extends TurboModule {
  add(a: number, b: number): Promise<number>;
+ readonly onValueChanged: EventEmitter<number>
}

export default TurboModuleRegistry.get<Spec>("RTNCalculator") as Spec | null;

```

--------------------------------

### Add Event Emitter to JS Spec (Flow)

Source: https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md

Modifies the JavaScript specification for a Turbo Native Module to include an EventEmitter for the `onValueChanged` event. This allows the native side to send events to the JavaScript layer, enhancing communication capabilities.

```diff
// @flow
import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
import {TurboModuleRegistry} from 'react-native';
+ import type {EventEmitter} from 'react-native/Libraries/Types/CodegenTypes';

export interface Spec extends TurboModule {
  add(a: number, b: number): Promise<number>;
+ onValueChanged: EventEmitter<number>
}
export default (TurboModuleRegistry.get<Spec>(
  'RTNCalculator'
): ?Spec);

```