Implementing New Architecture

// In android/app/src/main/java/.../MainActivity.java
// Add this to your MainActivity class:
// public class MainActivity extends ReactActivity {
//   @Override
//   protected String getMainComponentName() {
//     return "YourApp";
//   }
//
//   @Override
//   protected boolean isBridgeless() {
//     return true;
//   }
// }

// In ios/YourApp/AppDelegate.mm
// Add this to your AppDelegate:
&#x2F;&#x2F; #import <React/RCTBridge.h>
&#x2F;&#x2F; #import <React/RCTRootView.h>
&#x2F;&#x2F; #import <React/RCTFabricSurface.h>

import { TurboModuleRegistry } from 'react-native';

const TurboModule = TurboModuleRegistry.getEnforcing('MyTurboModule');

export default TurboModule;

@objc(MyTurboModule)
class MyTurboModule: NSObject, TurboModule {
  @objc
  func getConstants() -> [String: Any]? {
    return [
      "version": "1.0"
    ]
  }

  @objc
  func fetchUser(id: String) -> String {
    return "User: \(id)"
  }
}

public class MyTurboModuleSpec extends NativeModuleSpec {
  @ReactMethod
  public void fetchUser(String id, Promise promise) {
    promise.resolve("User: " + id);
  }
}

newArchEnabled=true

public class MainApplication extends Application implements ReactApplication {
  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }

        // Enable New Architecture
        @Override
        protected boolean isNewArchEnabled() {
          return true;
        }
      };
}

#include <jsi/jsi.h>

using namespace facebook::jsi;

void callJSFunction(Runtime& runtime) {
  // Assume we have a JavaScript function named "myJSFunction"
  auto jsFunction = runtime global["myJSFunction"].asObject(runtime).asFunction(runtime);
  
  // Create arguments to pass to the function
  std::vector<Value> args;
  args.push_back(Value(42));
  args.push_back(Value("Hello"));
  
  // Call the JavaScript function
  jsFunction.call(runtime, args.data(), args.size());
}

#include <jsi/jsi.h>

using namespace facebook::jsi;

void createJSObject(Runtime& runtime) {
  // Create a new JavaScript object
  Object jsObject = Object(runtime);
  
  // Set properties on the object
  jsObject.setProperty(runtime, "name", String::createFromUtf8(runtime, "John"));
  jsObject.setProperty(runtime, "age", Value(30));
  
  // Access the object from JavaScript
  runtime global["myObject"] = jsObject;
}

// TurboModuleSpec.js
import type { TurboModule } from 'react-native';

export interface Spec extends TurboModule {
  +getConstants: () => {+foo: string};
  +getValue: (value: string) => Promise<string>;
}

export default (requireNativeComponent(&#x27;MyTurboModule&#x27;) : Spec);

// MyTurboModule.swift
import Foundation
import React

@objc(MyTurboModule)
class MyTurboModule: NSObject, RCTTurboModule {
  func getConstants() -> [String: Any] {
    return ['foo': 'bar']
  }

  func getValue(_ value: String) -> RCTPromiseResolveBlock {
    return { (result) in
      // Implementation here
    }
  }

  static let moduleName = 'MyTurboModule'
}

// MyTurboModule.java
package com.example;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.Promise;

public class MyTurboModule extends ReactContextBaseJavaModule {
  public MyTurboModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return 'MyTurboModule';
  }

  public Map<String, Object> getConstants() {
    return MapBuilder.of(&#x27;foo&#x27;, &#x27;bar&#x27;);
  }

  public void getValue(String value, Promise promise) {
    // Implementation here
  }
}

{
  "codegenConfig": {
    "name": "MyModule",
    "type": "module",
    "schema": "./schema.json",
    "output": "./generated"
  }
}

import React, { useState, useTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  const handleClick = () => {
    startTransition(() => {
      setCount(c => c + 1);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Loading...' : 'Increment'}
      </button>
      <p>Count: {count}</p>
    </div>
  );
}

// In your app's main component or configuration
import { Platform } from 'react-native';

const isBridgeless = Platform.OS === 'android' && Platform.Version >= 30;

// For Android, enable bridgeless mode in MainActivity.java
// Add to your MainActivity.java:
// public class MainActivity extends ReactActivity {
//   @Override
//   protected String getMainComponentName() {
//     return "YourApp";
//   }
//
//   @Override
//   protected boolean isBridgelessEnabled() {
//     return BuildConfig.BRIDGELESS_ENABLED;
//   }
// }

// In build.gradle (app level), set:
// buildConfigField "boolean", "BRIDGELESS_ENABLED", "true"

// Before New Architecture
const oldComponent = () => {
  return <View>
    <Text>Old rendering</Text>
  </View>;
};

// After New Architecture
const newComponent = () => {
  return <View>
    <Text>New rendering with Fabric</Text>
  </View>;
};