refactor: drop backward compatible templates

.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/CONTRIBUTING.md

@@ -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/example-module-legacy/example/src/App.tsx

@@ -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',
+  },
+});