repository·main·Indexed 23 days ago
https://github.com/reactwg/react-native-new-architectureTechnical guides and migration workflows for the React Native New Architecture rollout. Includes documentation on enabling the New Architecture for apps and libraries, creating Fabric Native Components and Turbo Native Modules, using Codegen for type safety, and implementing backward compatibility for legacy components and modules.
The React Native New Architecture Working Group provides guides for enabling the New Architecture in apps and libraries, as well as workflows for creating Fabric Native Components and Turbo Native Modules.
Note: Many guides in this repository are marked as deprecated. For the most up-to-date information, always refer to the official React Native website.
A Fabric Native Component is a native component rendered using the Fabric Renderer. Using Fabric instead of Legacy Native Components provides several benefits of the New Architecture:
Fabric Native Components are created starting from a JavaScript specification. Codegen then generates C++ scaffolding code to connect your component-specific logic to the React Native infrastructure. This C++ scaffolding is shared across all platforms.
To avoid code duplication when adding multiple C++ Turbo Native Modules, you can implement an AppTurboModuleProvider. This provider acts as a factory that returns the appropriate module instance based on the requested name.
AppTurboModuleProvider with a getTurboModule method.getTurboModule to check the name and return a std::make_shared instance of your module.OnLoad.cpp for Android and AppDelegate.mm for iOS).#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::reactTo avoid duplicating business logic, create a shared implementation class (e.g., MyComponentViewManagerImpl) in the src/main directory. This class should contain the core logic for creating view instances and handling properties. Both the Legacy SimpleViewManager and the Fabric ViewManager can then call these shared methods.
package com.mycomponent;
import androidx.annotation.Nullable;
import com.facebook.react.uimanager.ThemedReactContext;
public class MyComponentViewManagerImpl {
public static final String NAME = "MyComponent";
public static MyComponentView createViewInstance(ThemedReactContext context) {
return new MyComponentView(context);
}
public static void setFoo(MyComponentView view, String param) {
// implement the logic of the foo function using the view and the param passed.
}
}package com.mycomponent;
import androidx.annotation.Nullable;
import com.facebook.react.uimanager.ThemedReactContext;
public class MyComponentViewManagerImpl {
public static final String NAME = "MyComponent";
public static MyComponentView createViewInstance(ThemedReactContext context) {
return new MyComponentView(context);
}
public static void setFoo(MyComponentView view, String param) {
// implement the logic of the foo function using the view and the param passed.
}
}When defining specs in Flow or TypeScript, you must use types that can be mapped one-to-one to native platform types.
Supported Types:
string, number, booleanUnsupported Types:
Constraint: All types must be read-only.
+ prefix, $ReadOnly<>, or {||} for objects.readonly for properties, Readonly<> for objects, and ReadonlyArray<> for arrays.To navigate guides for the New Architecture, use the following standard terminology:
Android Codegen generates files in both Java and C++ (JNI) to bridge the two environments.
java package with the same name as the TurboModule. This must be implemented by the JNI C++ implementation.jni folder. It includes an interface (e.g., MyTurbomodule.h) for JSI initialization and an implementation file (e.g., MyTurbomodule-generated.cpp) for JS/Native method invocation.MyFabricComponentManagerInterface.java and MyFabricComponentManagerDelegate.java in the java package. These are used by the native MyFabricComponentManager to load the component at runtime.ShadowNodes (representing the React entity), Props, EventEmitters, and ComponentDescriptors.h (required to get a handle on the component).Both Turbo Modules and Fabric Components include Android.mk and CMakeLists.txt in the jni folder, which are used by the Android app to build the external modules.
When running Codegen for iOS, the output is organized under build/generated/ios.
Each module generates a folder containing:
MyTurboModuleSpecs.h) used to initialize the JSI interface.-generated suffix (e.g., MyTurboModuleSpecs-generated.mm) containing the logic to invoke native methods between JS and native.Each component generates a folder containing:
ShadowNodes.h/cpp: Represents the node in the React abstract tree.Props.h/cpp: Defines the component's props.EventEmitters.h/cpp: Defines event emitters.ComponentDescriptors.h: Used by React Native and Fabric to obtain a reference to the component.RCTComponentViewHelpers.h: Contains helper methods and protocols for the Native View to respond to JSI invocations.RCTThirdPartyFabricComponentsProvider.h/mm: A registry used at runtime to retrieve the correct class for a required Fabric Native Component so React Native can instantiate it.Note: FBReactNativeSpec and rncore are core modules generated by React Native itself and will always be present.
React 18's concurrent features (like startTransition and Suspense) rely on a concurrent rendering engine that prepares multiple versions of the UI simultaneously.
To ensure a library works in both the Old Architecture and the New Architecture, you should minimize the changes required for users to adopt the new version. This allows users to migrate to the New Architecture smoothly when they are ready.
Achieving backward compatibility involves three main areas of focus:
By default, C++ Turbo Native Modules support most std:: standard types. To add support for new or custom types (e.g., folly::StringPiece, QString, boost::filesystem::path), you must provide a bridging header file that specializes the Bridging struct for your type.
Your bridging header must include:
Bridging struct for your custom type.fromJs function to convert from jsi:: types to your custom type.toJs function to convert from your custom type to jsi:: types.Note: Omitting fromJs makes the type read-only from JS; omitting toJs makes it write-only.
Turbo Native Modules are the next iteration of React Native Native Modules. Unlike the legacy bridge-based modules that rely on JSON serialization, Turbo Native Modules use the JavaScript Interface (JSI) for more efficient communication.
Key benefits include: