refactor: drop backward compatible templates (#712)

As of React Native 0.76, the new architecture is now default. So this
moves the templates with new architecture up. New libraries should start
with new arch template.

For legacy usage, we still have the legacy template for now. Old
architecture libraries still work in new architecture via compat layer.
So the backward compatible templates are unnecessary. They are also
difficult to maintain and are currently broken, so I'm removing them.

Author: satya164

.github/workflows/build-templates.yml

@@ -31,10 +31,8 @@ jobs:
           - macos-14 # macos latest defaults to macos 12 at the moment.
         type:
           - module-legacy
-          - module-mixed
           - module-new
           - view-legacy
-          - view-mixed
           - view-new
         language:
           - kotlin-objc
@@ -44,41 +42,17 @@ jobs:
         exclude:
           - type: module-new
             language: kotlin-swift
-          - type: module-mixed
-            language: kotlin-swift
           - type: view-new
             language: kotlin-swift
-          - type: view-mixed
-            language: kotlin-swift
         include:
           - os: ubuntu-latest
             type: library
             language: js
             arch: auto
-          - os: ubuntu-latest
-            type: module-mixed
-            language: kotlin-objc
-            arch: new
-          - os: macos-14
-            type: module-mixed
-            language: kotlin-objc
-            arch: new
-          - os: ubuntu-latest
-            type: view-mixed
-            language: kotlin-objc
-            arch: new
-          - os: macos-14
-            type: view-mixed
-            language: kotlin-objc
-            arch: new
           - os: ubuntu-latest
             type: module-legacy
             language: cpp
             arch: auto
-          - os: ubuntu-latest
-            type: module-mixed
-            language: cpp
-            arch: auto
           - os: ubuntu-latest
             type: module-new
             language: cpp
@@ -87,10 +61,6 @@ jobs:
             type: module-legacy
             language: cpp
             arch: auto
-          - os: macos-14
-            type: module-mixed
-            language: cpp
-            arch: auto
           - os: macos-14
             type: module-new
             language: cpp

packages/create-react-native-library/src/exampleApp/generateExampleApp.ts

@@ -51,7 +51,7 @@ export default async function generateExampleApp({
 }: {
   type: ExampleApp;
   dest: string;
-  arch: 'new' | 'mixed' | 'legacy';
+  arch: 'new' | 'legacy';
   project: {
     slug: string;
     name: string;

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

@@ -21,11 +21,9 @@ export type ArgName =
 export type ProjectLanguages = 'kotlin-objc' | 'kotlin-swift' | 'cpp' | 'js';
 
 export type ProjectType =
-  | 'module-legacy'
   | 'module-new'
-  | 'module-mixed'
-  | 'view-mixed'
   | 'view-new'
+  | 'module-legacy'
   | 'view-legacy'
   | 'library';
 
@@ -37,14 +35,7 @@ const LANGUAGE_CHOICES: {
   {
     title: 'Kotlin & Objective-C',
     value: 'kotlin-objc',
-    types: [
-      'module-legacy',
-      'module-new',
-      'module-mixed',
-      'view-mixed',
-      'view-new',
-      'view-legacy',
-    ],
+    types: ['module-new', 'view-new', 'module-legacy', 'view-legacy'],
   },
   {
     title: 'Kotlin & Swift',
@@ -54,7 +45,7 @@ const LANGUAGE_CHOICES: {
   {
     title: 'C++ for Android & iOS',
     value: 'cpp',
-    types: ['module-legacy', 'module-mixed', 'module-new'],
+    types: ['module-new', 'module-legacy'],
   },
   {
     title: 'JavaScript for Android, iOS & Web',
@@ -88,48 +79,35 @@ const EXAMPLE_CHOICES = (
   ] as const
 ).filter((choice) => !choice.disabled);
 
-const NEWARCH_DESCRIPTION = 'requires new arch';
-const BACKCOMPAT_DESCRIPTION = 'supports new arch';
-
 const TYPE_CHOICES: {
   title: string;
   value: ProjectType;
   description: string;
 }[] = [
   {
-    title: 'JavaScript library',
-    value: 'library',
-    description: 'supports Expo Go and Web',
-  },
-  {
-    title: 'Native module',
-    value: 'module-legacy',
-    description: 'bridge for native APIs to JS',
-  },
-  {
-    title: 'Native view',
-    value: 'view-legacy',
-    description: 'bridge for native views to JS',
+    title: 'Turbo module',
+    value: 'module-new',
+    description: 'integration for native APIs to JS',
   },
   {
-    title: 'Turbo module with backward compat',
-    value: 'module-mixed',
-    description: BACKCOMPAT_DESCRIPTION,
+    title: 'Fabric view',
+    value: 'view-new',
+    description: 'integration for native views to JS',
   },
   {
-    title: 'Turbo module',
-    value: 'module-new',
-    description: NEWARCH_DESCRIPTION,
+    title: 'Legacy Native module',
+    value: 'module-legacy',
+    description: 'bridge for native APIs to JS (old architecture)',
   },
   {
-    title: 'Fabric view with backward compat',
-    value: 'view-mixed',
-    description: BACKCOMPAT_DESCRIPTION,
+    title: 'Legacy Native view',
+    value: 'view-legacy',
+    description: 'bridge for native views to JS (old architecture)',
   },
   {
-    title: 'Fabric view',
-    value: 'view-new',
-    description: NEWARCH_DESCRIPTION,
+    title: 'JavaScript library',
+    value: 'library',
+    description: 'supports Expo Go and Web',
   },
 ];
 
@@ -190,7 +168,7 @@ export const acceptedArgs: Record<ArgName, yargs.Options> = {
 } as const;
 
 export type Args = Record<ArgName | 'name', string>;
-export type SupportedArchitecture = 'new' | 'mixed' | 'legacy';
+export type SupportedArchitecture = 'new' | 'legacy';
 export type ExampleApp = 'none' | 'test-app' | 'expo' | 'vanilla';
 
 export type Answers = {

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

@@ -40,11 +40,21 @@ const BINARIES = [
 ];
 
 const COMMON_FILES = path.resolve(__dirname, '../templates/common');
-const COMMON_EXAMPLE_FILES = path.resolve(
+const COMMON_LOCAL_FILES = path.resolve(__dirname, '../templates/common-local');
+const EXAMPLE_COMMON_FILES = path.resolve(
   __dirname,
-  '../templates/common-example'
+  '../templates/example-common'
 );
-const COMMON_LOCAL_FILES = path.resolve(__dirname, '../templates/common-local');
+const EXAMPLE_MODULE_LEGACY_FILES = path.resolve(
+  __dirname,
+  '../templates/example-module-legacy'
+);
+const EXAMPLE_MODULE_NEW_FILES = path.resolve(
+  __dirname,
+  '../templates/example-module-new'
+);
+const EXAMPLE_VIEW_FILES = path.resolve(__dirname, '../templates/example-view');
+
 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');
@@ -60,25 +70,20 @@ const NATIVE_COMMON_EXAMPLE_FILES = path.resolve(
 const NATIVE_FILES = {
   module_legacy: path.resolve(__dirname, '../templates/native-library-legacy'),
   module_new: path.resolve(__dirname, '../templates/native-library-new'),
-  module_mixed: path.resolve(__dirname, '../templates/native-library-mixed'),
   view_legacy: path.resolve(__dirname, '../templates/native-view-legacy'),
-  view_mixed: path.resolve(__dirname, '../templates/native-view-mixed'),
   view_new: path.resolve(__dirname, '../templates/native-view-new'),
 } as const;
 
 const OBJC_FILES = {
   module_common: path.resolve(__dirname, '../templates/objc-library'),
   view_legacy: path.resolve(__dirname, '../templates/objc-view-legacy'),
-  view_mixed: path.resolve(__dirname, '../templates/objc-view-mixed'),
   view_new: path.resolve(__dirname, '../templates/objc-view-new'),
 } as const;
 
 const KOTLIN_FILES = {
   module_legacy: path.resolve(__dirname, '../templates/kotlin-library-legacy'),
   module_new: path.resolve(__dirname, '../templates/kotlin-library-new'),
-  module_mixed: path.resolve(__dirname, '../templates/kotlin-library-mixed'),
   view_legacy: path.resolve(__dirname, '../templates/kotlin-view-legacy'),
-  view_mixed: path.resolve(__dirname, '../templates/kotlin-view-mixed'),
   view_new: path.resolve(__dirname, '../templates/kotlin-view-new'),
 } as const;
 
@@ -99,11 +104,7 @@ export function generateTemplateConfiguration({
   const { slug, languages, type } = answers;
 
   const arch =
-    type === 'module-new' || type === 'view-new'
-      ? 'new'
-      : type === 'module-mixed' || type === 'view-mixed'
-      ? 'mixed'
-      : 'legacy';
+    type === 'module-legacy' || type === 'view-legacy' ? 'legacy' : 'new';
 
   const project = slug.replace(/^(react-native-|@[^/]+\/)/, '');
   let namespace: string | undefined;
@@ -169,7 +170,17 @@ export async function applyTemplates(
     await applyTemplate(config, COMMON_FILES, folder);
 
     if (config.example !== 'none') {
-      await applyTemplate(config, COMMON_EXAMPLE_FILES, folder);
+      await applyTemplate(config, EXAMPLE_COMMON_FILES, folder);
+
+      if (config.project.view) {
+        await applyTemplate(config, EXAMPLE_VIEW_FILES, folder);
+      } else {
+        if (config.project.arch === 'legacy') {
+          await applyTemplate(config, EXAMPLE_MODULE_LEGACY_FILES, folder);
+        } else {
+          await applyTemplate(config, EXAMPLE_MODULE_NEW_FILES, folder);
+        }
+      }
     }
   }
 

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

@@ -49,31 +49,6 @@ To run the example app on iOS:
 yarn example ios
 ```
 
-<% if (project.arch === 'mixed') { -%>
-By default, the example is configured to build with the old architecture. To run the example with the new architecture, you can do the following:
-
-1. For Android, run:
-
-   ```sh
-   ORG_GRADLE_PROJECT_newArchEnabled=true yarn example android
-   ```
-
-2. For iOS, run:
-
-   ```sh
-   cd example/ios
-   RCT_NEW_ARCH_ENABLED=1 pod install
-   cd -
-   yarn example ios
-   ```
-
-If you are building for a different architecture than your previous build, make sure to remove the build folders first. You can run the following command to cleanup all build folders:
-
-```sh
-yarn clean
-```
-
-<% } -%>
 <% if (project.arch !== 'legacy') { -%>
 To confirm that the app is running with the new architecture, you can check the Metro logs for a message like this:
 

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

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import { multiply } from '<%- project.slug -%>';
+
+export default function App() {
+  const [result, setResult] = useState<number | undefined>();
+
+  useEffect(() => {
+    multiply(3, 7).then(setResult);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Text>Result: {result}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});