feat: add fabric option

packages/create-react-native-library/src/index.ts

@@ -18,9 +18,9 @@ const JS_FILES = path.resolve(__dirname, '../templates/js-library');
 const EXPO_FILES = path.resolve(__dirname, '../templates/expo-library');
 const CPP_FILES = path.resolve(__dirname, '../templates/cpp-library');
 const EXAMPLE_FILES = path.resolve(__dirname, '../templates/example');
-const EXAMPLE_TURBO_FILES = path.resolve(
+const EXAMPLE_NEW_ARCH_FILES = path.resolve(
   __dirname,
-  '../templates/example-turbo'
+  '../templates/example-new-arch'
 );
 const NATIVE_COMMON_FILES = path.resolve(
   __dirname,
@@ -29,21 +29,30 @@ const NATIVE_COMMON_FILES = path.resolve(
 
 const NATIVE_FILES = {
   module_legacy: path.resolve(__dirname, '../templates/native-library-legacy'),
-  module_turbo: path.resolve(__dirname, '../templates/native-library-turbo'),
+  module_new_arch: path.resolve(
+    __dirname,
+    '../templates/native-library-new-arch'
+  ),
   module_mixed: path.resolve(__dirname, '../templates/native-library-mixed'),
   view: path.resolve(__dirname, '../templates/native-view-library'),
+  view_mixed: path.resolve(__dirname, '../templates/native-view-mixed-library'),
 };
 
 const JAVA_FILES = {
   module_legacy: path.resolve(__dirname, '../templates/java-library-legacy'),
-  module_turbo: path.resolve(__dirname, '../templates/java-library-turbo'),
+  module_new_arch: path.resolve(
+    __dirname,
+    '../templates/java-library-new-arch'
+  ),
   module_mixed: path.resolve(__dirname, '../templates/java-library-mixed'),
   view: path.resolve(__dirname, '../templates/java-view-library'),
+  view_mixed: path.resolve(__dirname, '../templates/java-view-mixed-library'),
 };
 
 const OBJC_FILES = {
   module: path.resolve(__dirname, '../templates/objc-library'),
   view: path.resolve(__dirname, '../templates/objc-view-library'),
+  view_mixed: path.resolve(__dirname, '../templates/objc-view-mixed-library'),
 };
 
 const KOTLIN_FILES = {
@@ -80,7 +89,13 @@ type Answers = {
     | 'kotlin-objc'
     | 'kotlin-swift'
     | 'cpp';
-  type?: 'module-legacy' | 'module-turbo' | 'module-mixed' | 'view' | 'library';
+  type?:
+    | 'module-legacy'
+    | 'module-new-arch'
+    | 'module-mixed'
+    | 'view'
+    | 'view-mixed'
+    | 'library';
   example?: 'expo' | 'native';
 };
 
@@ -120,6 +135,7 @@ const args: Record<ArgName, yargs.Options> = {
       'js',
     ],
   },
+  // TODO: update those types
   'type': {
     description: 'Type of library you want to develop',
     choices: ['module', 'view'],
@@ -246,21 +262,26 @@ async function create(argv: yargs.Arguments<any>) {
         },
         {
           title: 'Turbo module (experimental)',
-          value: 'module-turbo',
+          value: 'module-new-arch',
         },
         {
           title: 'Native module',
           value: 'module-legacy',
         },
         { title: 'Native view', value: 'view' },
+        {
+          title: 'Native fabric view with backward compat (experimental)',
+          value: 'view-mixed',
+        },
         { title: 'JavaScript library', value: 'library' },
       ],
     },
     'languages': {
       type: (_, values) =>
         values.type === 'library' ||
-        values.type === 'module-turbo' ||
-        values.type === 'module-mixed'
+        values.type === 'module-new-arch' ||
+        values.type === 'module-mixed' ||
+        values.type === 'view-mixed'
           ? null
           : 'select',
       name: 'languages',
@@ -339,16 +360,21 @@ async function create(argv: yargs.Arguments<any>) {
     version = FALLBACK_BOB_VERSION;
   }
 
-  const moduleType = type === 'view' ? 'view' : 'module';
+  const moduleType = type.startsWith('view') ? 'view' : 'module';
 
   const architecture =
-    type === 'module-turbo'
-      ? 'turbo'
-      : type === 'module-mixed'
+    type === 'module-new-arch'
+      ? 'new_arch'
+      : type === 'module-mixed' || type === 'view-mixed'
       ? 'mixed'
       : 'legacy';
 
-  const turbomodule = architecture === 'turbo' || architecture === 'mixed';
+  const newArchitecture =
+    architecture === 'new_arch' || architecture === 'mixed';
+  const turbomodule =
+    (architecture === 'new_arch' || architecture === 'mixed') &&
+    moduleType === 'module';
+  const fabricView = architecture === 'mixed' && moduleType === 'view';
 
   const options = {
     bob: {
@@ -365,10 +391,12 @@ async function create(argv: yargs.Arguments<any>) {
       native: languages !== 'js',
       architecture,
       turbomodule,
+      fabricView,
+      newArchitecture,
       cpp: languages === 'cpp',
       kotlin: languages === 'kotlin-objc' || languages === 'kotlin-swift',
       swift: languages === 'java-swift' || languages === 'kotlin-swift',
-      view: type === 'view',
+      view: moduleType === 'view',
     },
     author: {
       name: authorName,
@@ -426,9 +454,9 @@ async function create(argv: yargs.Arguments<any>) {
       path.join(folder, 'example')
     );
 
-    if (turbomodule) {
+    if (newArchitecture) {
       await copyDir(
-        path.join(EXAMPLE_TURBO_FILES, 'example'),
+        path.join(EXAMPLE_NEW_ARCH_FILES, 'example'),
         path.join(folder, 'example')
       );
     }
@@ -438,13 +466,23 @@ async function create(argv: yargs.Arguments<any>) {
     if (moduleType === 'module') {
       await copyDir(NATIVE_FILES[`${moduleType}_${architecture}`], folder);
     } else {
-      await copyDir(NATIVE_FILES[moduleType], folder);
+      await copyDir(
+        NATIVE_FILES[`${moduleType}${newArchitecture ? '_mixed' : ''}`],
+        folder
+      );
     }
 
     if (options.project.swift) {
       await copyDir(SWIFT_FILES[moduleType], folder);
     } else {
-      await copyDir(OBJC_FILES[moduleType], folder);
+      if (moduleType === 'module') {
+        await copyDir(OBJC_FILES[moduleType], folder);
+      } else {
+        await copyDir(
+          OBJC_FILES[`${moduleType}${newArchitecture ? '_mixed' : ''}`],
+          folder
+        );
+      }
     }
 
     if (options.project.kotlin) {
@@ -453,7 +491,10 @@ async function create(argv: yargs.Arguments<any>) {
       if (moduleType === 'module') {
         await copyDir(JAVA_FILES[`${moduleType}_${architecture}`], folder);
       } else {
-        await copyDir(JAVA_FILES[moduleType], folder);
+        await copyDir(
+          JAVA_FILES[`${moduleType}${newArchitecture ? '_mixed' : ''}`],
+          folder
+        );
       }
     }
 

packages/create-react-native-library/templates/common/$package.json

@@ -53,7 +53,7 @@
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.21",
-    "@types/react-native": "0.68.0",
+    "@types/react-native": <%-/* TODO: bump version of rn to 0.69.0 */ project.newArchitecture ? '"0.69.5"':'"0.68.0"'-%>,
     "commitlint": "^17.0.2",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.5.0",
@@ -147,13 +147,13 @@
         }
       ]
     ]
-<% if (project.turbomodule) { -%>
+<% if (project.newArchitecture) { -%>
   },
   "codegenConfig": {
     "libraries": [
       {
-        "name": "RN<%- project.name -%>Spec",
-        "type": "modules",
+        "name": "RN<%- project.name -%><%- project.view ? 'View': '' -%>Spec",
+        "type": <%- project.view ? '"components"': '"modules"' %>,
         "jsSrcsDir": "src"
       }
     ]

packages/create-react-native-library/templates/common/README.md

@@ -18,7 +18,7 @@ import { <%- project.name -%>View } from "<%- project.slug -%>";
 
 <<%- project.name -%>View color="tomato" />
 ```
-<% } else if (project.architecture == 'turbo') { -%>
+<% } else if (project.architecture == 'new_arch') { -%>
 ```js
 import { multiply } from "<%- project.slug -%>";
 

packages/create-react-native-library/templates/common/example/src/App.tsx

@@ -16,7 +16,7 @@ export default function App() {
     </View>
   );
 }
-<% } else if (project.architecture == 'turbo') { -%>
+<% } else if (project.architecture === "new_arch" && project.turbomodule) { -%>
 const result = multiply(3, 7);
 
 export default function App() {

packages/create-react-native-library/templates/example/example/android/app/src/main/jni/Android.mk

@@ -5,7 +5,7 @@ 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
-<% if (project.turbomodule) { -%>
+<% if (project.newArchitecture) { -%>
 include $(THIS_DIR)/../../../../../../android//build/generated/source/codegen/jni/Android.mk
 <% } -%>
 include $(CLEAR_VARS)
@@ -36,8 +36,8 @@ LOCAL_SHARED_LIBRARIES := \
   libglog \
   libjsi \
   libreact_codegen_rncore \
-<% if (project.turbomodule) { -%>
-  libreact_codegen_<%- project.name -%> \
+<% if (project.newArchitecture) { -%>
+  libreact_codegen_<%- project.view ? project.name+'View': project.name -%> \
 <% } -%>
   libreact_debug \
   libreact_nativemodule_core \

packages/create-react-native-library/templates/example/example/android/app/src/main/jni/MainComponentsRegistry.cpp

@@ -4,6 +4,9 @@
 #include <fbjni/fbjni.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/rncore/ComponentDescriptors.h>
+<% if (project.fabricView) { -%>
+#include <react/renderer/components/<%- project.name -%>View/ComponentDescriptors.h>
+<% } -%>
 
 namespace facebook {
 namespace react {
@@ -19,6 +22,9 @@ MainComponentsRegistry::sharedProviderRegistry() {
   //
   // providerRegistry->add(concreteComponentDescriptorProvider<
   //        AocViewerComponentDescriptor>());
+  <% if (project.fabricView) { -%>
+  providerRegistry->add(concreteComponentDescriptorProvider<<%- project.name -%>ViewComponentDescriptor>());
+  <% } -%>
   return providerRegistry;
 }
 

packages/create-react-native-library/templates/example/example/android/gradle.properties

@@ -37,4 +37,4 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=<%- project.turbomodule ? true : false -%>
+newArchEnabled=<%- project.newArchitecture ? true : false -%>

packages/create-react-native-library/templates/java-view-mixed-library/android/src/legacy/{%- project.name %}ViewManager.java

@@ -0,0 +1,61 @@
+package com.<%- project.package -%>;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.bridge.ReactApplicationContext;
+
+import java.util.Map;
+
+
+public class <%- project.name -%>ViewManager extends SimpleViewManager<<%- project.name -%>View> {
+
+  ReactApplicationContext mCallerContext;
+
+  public <%- project.name -%>ViewManager(ReactApplicationContext reactContext) {
+    mCallerContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return <%- project.name -%>ViewManagerImpl.NAME;
+  }
+
+  @Override
+  public <%- project.name -%>View createViewInstance(ThemedReactContext context) {
+    return <%- project.name -%>ViewManagerImpl.createViewInstance(context);
+  }
+
+  @Override
+  public Map<String, Integer> getCommandsMap() {
+    return MapBuilder.of("changeBackgroundColor", 1);
+  }
+
+  @Override
+  public void receiveCommand(
+    @NonNull <%- project.name -%>View view,
+    String commandId,
+    @Nullable ReadableArray args
+  ) {
+    super.receiveCommand(view, commandId, args);
+    String color = args.getString(0);
+
+    switch (commandId) {
+      case "changeBackgroundColor":
+        setColor(view, color);
+        break;
+      default: {}
+    }
+  }
+
+
+  @ReactProp(name = "color")
+  public void setColor(<%- project.name -%>View view, String color) {
+    <%- project.name -%>ViewManagerImpl.setColor(view, color);
+  }
+}

packages/create-react-native-library/templates/java-view-mixed-library/android/src/main/java/com/{%- project.package %}/{%- project.name %}View.java

@@ -0,0 +1,23 @@
+package com.<%- project.package -%>;
+
+import androidx.annotation.Nullable;
+import android.content.Context;
+import android.util.AttributeSet;
+
+import android.view.View;
+
+public class <%- project.name -%>View extends View {
+
+  public <%- project.name -%>View(Context context) {
+    super(context);
+  }
+
+  public <%- project.name -%>View(Context context, @Nullable AttributeSet attrs) {
+    super(context, attrs);
+  }
+
+  public <%- project.name -%>View(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
+    super(context, attrs, defStyleAttr);
+  }
+
+}

packages/create-react-native-library/templates/java-view-mixed-library/android/src/main/java/com/{%- project.package %}/{%- project.name %}ViewManagerImpl.java

@@ -0,0 +1,17 @@
+package com.<%- project.package -%>;
+
+import com.facebook.react.uimanager.ThemedReactContext;
+import android.graphics.Color;
+
+public class <%- project.name -%>ViewManagerImpl {
+
+  public static final String NAME = "<%- project.name -%>View";
+
+  public static <%- project.name -%>View createViewInstance(ThemedReactContext context) {
+    return new <%- project.name -%>View(context);
+  }
+
+  public static void setColor(<%- project.name -%>View view, String color) {
+    view.setBackgroundColor(Color.parseColor(color));
+  }
+}