diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
index 447f2d35ee4ded..ae81e808011eaf 100644
--- a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
+++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
@@ -6,8 +6,6 @@
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.ReactRootView;
-import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
import org.wordpress.mobile.WPAndroidGlue.GutenbergProps;
@@ -27,11 +25,6 @@ protected String getMainComponentName() {
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
- @Override
- protected ReactRootView createRootView() {
- return new RNGestureHandlerEnabledRootView(MainActivity.this);
- }
-
@Nullable
@Override
protected Bundle getLaunchOptions() {
diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/newarchitecture/MainApplicationReactNativeHost.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/newarchitecture/MainApplicationReactNativeHost.java
new file mode 100644
index 00000000000000..5a3deee24f507c
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/newarchitecture/MainApplicationReactNativeHost.java
@@ -0,0 +1,116 @@
+package com.gutenberg.newarchitecture;
+
+import android.app.Application;
+import androidx.annotation.NonNull;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
+import com.facebook.react.bridge.JSIModulePackage;
+import com.facebook.react.bridge.JSIModuleProvider;
+import com.facebook.react.bridge.JSIModuleSpec;
+import com.facebook.react.bridge.JSIModuleType;
+import com.facebook.react.bridge.JavaScriptContextHolder;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.UIManager;
+import com.facebook.react.fabric.ComponentFactory;
+import com.facebook.react.fabric.CoreComponentsRegistry;
+import com.facebook.react.fabric.FabricJSIModuleProvider;
+import com.facebook.react.fabric.ReactNativeConfig;
+import com.facebook.react.uimanager.ViewManagerRegistry;
+import com.gutenberg.BuildConfig;
+import com.gutenberg.newarchitecture.components.MainComponentsRegistry;
+import com.gutenberg.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
+/**
+ * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both
+ * TurboModule delegates and the Fabric Renderer.
+ *
+ * Please note that this class is used ONLY if you opt-in for the New Architecture (see the
+ * `newArchEnabled` property). Is ignored otherwise.
+ */
+public class MainApplicationReactNativeHost extends ReactNativeHost {
+ public MainApplicationReactNativeHost(Application application) {
+ super(application);
+ }
+
+ @Override
+ public boolean getUseDeveloperSupport() {
+ return BuildConfig.DEBUG;
+ }
+
+ @Override
+ protected List getPackages() {
+ List packages = Arrays.asList();
+ // Packages that cannot be autolinked yet can be added manually here, for example:
+ // packages.add(new MyReactNativePackage());
+ // TurboModules must also be loaded here providing a valid TurboReactPackage implementation:
+ // packages.add(new TurboReactPackage() { ... });
+ // If you have custom Fabric Components, their ViewManagers should also be loaded here
+ // inside a ReactPackage.
+ return packages;
+ }
+
+ @Override
+ protected String getJSMainModuleName() {
+ return "index";
+ }
+
+ @NonNull
+ @Override
+ protected ReactPackageTurboModuleManagerDelegate.Builder
+ getReactPackageTurboModuleManagerDelegateBuilder() {
+ // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary
+ // for the new architecture and to use TurboModules correctly.
+ return new MainApplicationTurboModuleManagerDelegate.Builder();
+ }
+
+ @Override
+ protected JSIModulePackage getJSIModulePackage() {
+ return new JSIModulePackage() {
+ @Override
+ public List getJSIModules(
+ final ReactApplicationContext reactApplicationContext,
+ final JavaScriptContextHolder jsContext) {
+ final List specs = new ArrayList<>();
+
+ // Here we provide a new JSIModuleSpec that will be responsible of providing the
+ // custom Fabric Components.
+ specs.add(
+ new JSIModuleSpec() {
+ @Override
+ public JSIModuleType getJSIModuleType() {
+ return JSIModuleType.UIManager;
+ }
+
+ @Override
+ public JSIModuleProvider getJSIModuleProvider() {
+ final ComponentFactory componentFactory = new ComponentFactory();
+ CoreComponentsRegistry.register(componentFactory);
+
+ // Here we register a Components Registry.
+ // The one that is generated with the template contains no components
+ // and just provides you the one from React Native core.
+ MainComponentsRegistry.register(componentFactory);
+
+ final ReactInstanceManager reactInstanceManager = getReactInstanceManager();
+
+ ViewManagerRegistry viewManagerRegistry =
+ new ViewManagerRegistry(
+ reactInstanceManager.getOrCreateViewManagers(reactApplicationContext));
+
+ return new FabricJSIModuleProvider(
+ reactApplicationContext,
+ componentFactory,
+ ReactNativeConfig.DEFAULT_CONFIG,
+ viewManagerRegistry);
+ }
+ });
+ return specs;
+ }
+ };
+ }
+}
diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/newarchitecture/components/MainComponentsRegistry.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/newarchitecture/components/MainComponentsRegistry.java
new file mode 100644
index 00000000000000..4a613ac3a2bc3f
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/newarchitecture/components/MainComponentsRegistry.java
@@ -0,0 +1,36 @@
+package com.gutenberg.newarchitecture.components;
+
+import com.facebook.jni.HybridData;
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.react.fabric.ComponentFactory;
+import com.facebook.soloader.SoLoader;
+
+/**
+ * Class responsible to load the custom Fabric Components. This class has native methods and needs a
+ * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
+ * folder for you).
+ *
+ * Please note that this class is used ONLY if you opt-in for the New Architecture (see the
+ * `newArchEnabled` property). Is ignored otherwise.
+ */
+@DoNotStrip
+public class MainComponentsRegistry {
+ static {
+ SoLoader.loadLibrary("fabricjni");
+ }
+
+ @DoNotStrip private final HybridData mHybridData;
+
+ @DoNotStrip
+ private native HybridData initHybrid(ComponentFactory componentFactory);
+
+ @DoNotStrip
+ private MainComponentsRegistry(ComponentFactory componentFactory) {
+ mHybridData = initHybrid(componentFactory);
+ }
+
+ @DoNotStrip
+ public static MainComponentsRegistry register(ComponentFactory componentFactory) {
+ return new MainComponentsRegistry(componentFactory);
+ }
+}
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java
new file mode 100644
index 00000000000000..b80720e9bdd883
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java
@@ -0,0 +1,48 @@
+package com.gutenberg.newarchitecture.modules;
+
+import com.facebook.jni.HybridData;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.soloader.SoLoader;
+import java.util.List;
+
+/**
+ * Class responsible to load the TurboModules. This class has native methods and needs a
+ * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
+ * folder for you).
+ *
+ *
Please note that this class is used ONLY if you opt-in for the New Architecture (see the
+ * `newArchEnabled` property). Is ignored otherwise.
+ */
+public class MainApplicationTurboModuleManagerDelegate
+ extends ReactPackageTurboModuleManagerDelegate {
+
+ private static volatile boolean sIsSoLibraryLoaded;
+
+ protected MainApplicationTurboModuleManagerDelegate(
+ ReactApplicationContext reactApplicationContext, List packages) {
+ super(reactApplicationContext, packages);
+ }
+
+ protected native HybridData initHybrid();
+
+ native boolean canCreateTurboModule(String moduleName);
+
+ public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder {
+ protected MainApplicationTurboModuleManagerDelegate build(
+ ReactApplicationContext context, List packages) {
+ return new MainApplicationTurboModuleManagerDelegate(context, packages);
+ }
+ }
+
+ @Override
+ protected synchronized void maybeLoadOtherSoLibraries() {
+ if (!sIsSoLibraryLoaded) {
+ // If you change the name of your application .so file in the Android.mk file,
+ // make sure you update the name here as well.
+ SoLoader.loadLibrary("gutenberg_appmodules");
+ sIsSoLibraryLoaded = true;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/jni/Android.mk b/packages/react-native-editor/android/app/src/main/jni/Android.mk
new file mode 100644
index 00000000000000..633707fd916058
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/jni/Android.mk
@@ -0,0 +1,48 @@
+THIS_DIR := $(call my-dir)
+
+include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
+
+# If you wish to add a custom TurboModule or Fabric component in your app you
+# will have to include the following autogenerated makefile.
+# include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
+include $(CLEAR_VARS)
+
+LOCAL_PATH := $(THIS_DIR)
+
+# You can customize the name of your application .so file here.
+LOCAL_MODULE := gutenberg_appmodules
+
+LOCAL_C_INCLUDES := $(LOCAL_PATH)
+LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp)
+LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)
+
+# If you wish to add a custom TurboModule or Fabric component in your app you
+# will have to uncomment those lines to include the generated source
+# files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni)
+#
+# LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
+# LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
+# LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
+
+# Here you should add any native library you wish to depend on.
+LOCAL_SHARED_LIBRARIES := \
+ libfabricjni \
+ libfbjni \
+ libfolly_runtime \
+ libglog \
+ libjsi \
+ libreact_codegen_rncore \
+ libreact_debug \
+ libreact_nativemodule_core \
+ libreact_render_componentregistry \
+ libreact_render_core \
+ libreact_render_debug \
+ libreact_render_graphics \
+ librrc_view \
+ libruntimeexecutor \
+ libturbomodulejsijni \
+ libyoga
+
+LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall
+
+include $(BUILD_SHARED_LIBRARY)
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/jni/MainApplicationModuleProvider.cpp b/packages/react-native-editor/android/app/src/main/jni/MainApplicationModuleProvider.cpp
new file mode 100644
index 00000000000000..39de093d1136d6
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/jni/MainApplicationModuleProvider.cpp
@@ -0,0 +1,24 @@
+#include "MainApplicationModuleProvider.h"
+
+#include
+
+namespace facebook {
+namespace react {
+
+std::shared_ptr MainApplicationModuleProvider(
+ const std::string moduleName,
+ const JavaTurboModule::InitParams ¶ms) {
+ // Here you can provide your own module provider for TurboModules coming from
+ // either your application or from external libraries. The approach to follow
+ // is similar to the following (for a library called `samplelibrary`:
+ //
+ // auto module = samplelibrary_ModuleProvider(moduleName, params);
+ // if (module != nullptr) {
+ // return module;
+ // }
+ // return rncore_ModuleProvider(moduleName, params);
+ return rncore_ModuleProvider(moduleName, params);
+}
+
+} // namespace react
+} // namespace facebook
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/jni/MainApplicationModuleProvider.h b/packages/react-native-editor/android/app/src/main/jni/MainApplicationModuleProvider.h
new file mode 100644
index 00000000000000..2f2fb24a3a76c9
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/jni/MainApplicationModuleProvider.h
@@ -0,0 +1,16 @@
+#pragma once
+
+#include
+#include
+
+#include
+
+namespace facebook {
+namespace react {
+
+std::shared_ptr MainApplicationModuleProvider(
+ const std::string moduleName,
+ const JavaTurboModule::InitParams ¶ms);
+
+} // namespace react
+} // namespace facebook
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp b/packages/react-native-editor/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp
new file mode 100644
index 00000000000000..f2e4714dc93b67
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp
@@ -0,0 +1,45 @@
+#include "MainApplicationTurboModuleManagerDelegate.h"
+#include "MainApplicationModuleProvider.h"
+
+namespace facebook {
+namespace react {
+
+jni::local_ref
+MainApplicationTurboModuleManagerDelegate::initHybrid(
+ jni::alias_ref) {
+ return makeCxxInstance();
+}
+
+void MainApplicationTurboModuleManagerDelegate::registerNatives() {
+ registerHybrid({
+ makeNativeMethod(
+ "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid),
+ makeNativeMethod(
+ "canCreateTurboModule",
+ MainApplicationTurboModuleManagerDelegate::canCreateTurboModule),
+ });
+}
+
+std::shared_ptr
+MainApplicationTurboModuleManagerDelegate::getTurboModule(
+ const std::string name,
+ const std::shared_ptr jsInvoker) {
+ // Not implemented yet: provide pure-C++ NativeModules here.
+ return nullptr;
+}
+
+std::shared_ptr
+MainApplicationTurboModuleManagerDelegate::getTurboModule(
+ const std::string name,
+ const JavaTurboModule::InitParams ¶ms) {
+ return MainApplicationModuleProvider(name, params);
+}
+
+bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule(
+ std::string name) {
+ return getTurboModule(name, nullptr) != nullptr ||
+ getTurboModule(name, {.moduleName = name}) != nullptr;
+}
+
+} // namespace react
+} // namespace facebook
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h b/packages/react-native-editor/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h
new file mode 100644
index 00000000000000..2cd17d7a944c0c
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h
@@ -0,0 +1,38 @@
+#include
+#include
+
+#include
+#include
+
+namespace facebook {
+namespace react {
+
+class MainApplicationTurboModuleManagerDelegate
+ : public jni::HybridClass<
+ MainApplicationTurboModuleManagerDelegate,
+ TurboModuleManagerDelegate> {
+ public:
+ // Adapt it to the package you used for your Java class.
+ static constexpr auto kJavaDescriptor =
+ "Lcom/gutenberg/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;";
+
+ static jni::local_ref initHybrid(jni::alias_ref);
+
+ static void registerNatives();
+
+ std::shared_ptr getTurboModule(
+ const std::string name,
+ const std::shared_ptr jsInvoker) override;
+ std::shared_ptr getTurboModule(
+ const std::string name,
+ const JavaTurboModule::InitParams ¶ms) override;
+
+ /**
+ * Test-only method. Allows user to verify whether a TurboModule can be
+ * created by instances of this class.
+ */
+ bool canCreateTurboModule(std::string name);
+};
+
+} // namespace react
+} // namespace facebook
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/jni/MainComponentsRegistry.cpp b/packages/react-native-editor/android/app/src/main/jni/MainComponentsRegistry.cpp
new file mode 100644
index 00000000000000..c5188f4dc7b12c
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/jni/MainComponentsRegistry.cpp
@@ -0,0 +1,61 @@
+#include "MainComponentsRegistry.h"
+
+#include
+#include
+#include
+#include
+
+namespace facebook {
+namespace react {
+
+MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {}
+
+std::shared_ptr
+MainComponentsRegistry::sharedProviderRegistry() {
+ auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
+
+ // Custom Fabric Components go here. You can register custom
+ // components coming from your App or from 3rd party libraries here.
+ //
+ // providerRegistry->add(concreteComponentDescriptorProvider<
+ // AocViewerComponentDescriptor>());
+ return providerRegistry;
+}
+
+jni::local_ref
+MainComponentsRegistry::initHybrid(
+ jni::alias_ref,
+ ComponentFactory *delegate) {
+ auto instance = makeCxxInstance(delegate);
+
+ auto buildRegistryFunction =
+ [](EventDispatcher::Weak const &eventDispatcher,
+ ContextContainer::Shared const &contextContainer)
+ -> ComponentDescriptorRegistry::Shared {
+ auto registry = MainComponentsRegistry::sharedProviderRegistry()
+ ->createComponentDescriptorRegistry(
+ {eventDispatcher, contextContainer});
+
+ auto mutableRegistry =
+ std::const_pointer_cast(registry);
+
+ mutableRegistry->setFallbackComponentDescriptor(
+ std::make_shared(
+ ComponentDescriptorParameters{
+ eventDispatcher, contextContainer, nullptr}));
+
+ return registry;
+ };
+
+ delegate->buildRegistryFunction = buildRegistryFunction;
+ return instance;
+}
+
+void MainComponentsRegistry::registerNatives() {
+ registerHybrid({
+ makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid),
+ });
+}
+
+} // namespace react
+} // namespace facebook
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/jni/MainComponentsRegistry.h b/packages/react-native-editor/android/app/src/main/jni/MainComponentsRegistry.h
new file mode 100644
index 00000000000000..1046cfa3f2f738
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/jni/MainComponentsRegistry.h
@@ -0,0 +1,32 @@
+#pragma once
+
+#include
+#include
+#include
+#include
+
+namespace facebook {
+namespace react {
+
+class MainComponentsRegistry
+ : public facebook::jni::HybridClass {
+ public:
+ // Adapt it to the package you used for your Java class.
+ constexpr static auto kJavaDescriptor =
+ "Lcom/gutenberg/newarchitecture/components/MainComponentsRegistry;";
+
+ static void registerNatives();
+
+ MainComponentsRegistry(ComponentFactory *delegate);
+
+ private:
+ static std::shared_ptr
+ sharedProviderRegistry();
+
+ static jni::local_ref initHybrid(
+ jni::alias_ref,
+ ComponentFactory *delegate);
+};
+
+} // namespace react
+} // namespace facebook
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/jni/OnLoad.cpp b/packages/react-native-editor/android/app/src/main/jni/OnLoad.cpp
new file mode 100644
index 00000000000000..ae1ef007d15244
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/jni/OnLoad.cpp
@@ -0,0 +1,11 @@
+#include
+#include "MainApplicationTurboModuleManagerDelegate.h"
+#include "MainComponentsRegistry.h"
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
+ return facebook::jni::initialize(vm, [] {
+ facebook::react::MainApplicationTurboModuleManagerDelegate::
+ registerNatives();
+ facebook::react::MainComponentsRegistry::registerNatives();
+ });
+}
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/res/drawable/rn_edit_text_material.xml b/packages/react-native-editor/android/app/src/main/res/drawable/rn_edit_text_material.xml
new file mode 100644
index 00000000000000..986188ce0e448d
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/res/drawable/rn_edit_text_material.xml
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+