feat: add support for expo example in native libraries

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

@@ -5,6 +5,7 @@ import path from 'path';
 import type { TemplateConfiguration } from '../template';
 import sortObjectKeys from '../utils/sortObjectKeys';
 import { spawn } from '../utils/spawn';
+import dedent from 'dedent';
 
 const FILES_TO_DELETE = [
   '__tests__',
@@ -37,20 +38,24 @@ const PACKAGES_TO_REMOVE = [
   'react-native-safe-area-context',
 ];
 
-const PACKAGES_TO_ADD_WEB = {
+const PACKAGES_TO_ADD_EXPO_WEB = {
   '@expo/metro-runtime': '~5.0.4',
   'react-dom': '19.1.0',
   'react-native-web': '~0.21.1',
 };
 
+const PACKAGES_TO_ADD_DEV_EXPO_NATIVE = {
+  'expo-dev-client': '~5.0.3',
+};
+
 export default async function generateExampleApp({
   config,
   root,
   reactNativeVersion = 'latest',
 }: {
   config: TemplateConfiguration;
   root: string;
-  reactNativeVersion?: string;
+  reactNativeVersion: string | undefined;
 }) {
   const directory = path.join(root, 'example');
 
@@ -252,14 +257,39 @@ export default async function generateExampleApp({
       bundledNativeModules = {};
     }
 
-    Object.entries(PACKAGES_TO_ADD_WEB).forEach(([name, version]) => {
-      dependencies[name] = bundledNativeModules[name] || version;
-    });
+    if (config.project.native) {
+      Object.entries(PACKAGES_TO_ADD_DEV_EXPO_NATIVE).forEach(
+        ([name, version]) => {
+          devDependencies[name] = bundledNativeModules[name] || version;
+        }
+      );
+
+      scripts.start = 'expo start --dev-client';
+      scripts.android = 'expo run:android';
+      scripts.ios = 'expo run:ios';
 
-    scripts.web = 'expo start --web';
+      delete scripts.web;
+
+      await fs.writeFile(
+        path.join(directory, '.gitignore'),
+        dedent`
+        # These folders are generated with prebuild (CNG)
+        android/
+        ios/
+        `
+      );
+    } else {
+      Object.entries(PACKAGES_TO_ADD_EXPO_WEB).forEach(([name, version]) => {
+        dependencies[name] = bundledNativeModules[name] || version;
+      });
+
+      scripts.web = 'expo start --web';
+    }
 
     const app = await fs.readJSON(path.join(directory, 'app.json'));
 
+    app.expo.name = `${config.project.name} Example`;
+    app.expo.slug = `${config.project.slug}-example`;
     app.expo.android = app.expo.android || {};
     app.expo.android.package = `${config.project.package}.example`;
     app.expo.ios = app.expo.ios || {};

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

@@ -74,30 +74,23 @@ const LANGUAGE_CHOICES: {
   },
 ];
 
-const EXAMPLE_CHOICES = (
-  [
-    {
-      title: 'App with Community CLI',
-      value: 'vanilla',
-      description: "Provides access to app's native code",
-      disabled: false,
-    },
-    {
-      title: 'Test App by Microsoft',
-      value: 'test-app',
-      description: "App's native code is abstracted away",
-      // Test App currently doesn't work with React Native 0.79.2
-      // due to missing `Gemfile` in the template
-      disabled: !process.env.CRNL_ENABLE_TEST_APP,
-    },
-    {
-      title: 'App with Expo CLI',
-      value: 'expo',
-      description: 'Managed expo app with web support',
-      disabled: false,
-    },
-  ] as const
-).filter((choice) => !choice.disabled);
+const EXAMPLE_CHOICES = [
+  {
+    title: 'App with Community CLI',
+    value: 'vanilla',
+    description: 'Classic React Native app with native code access',
+  },
+  {
+    title: 'App with Expo CLI',
+    value: 'expo',
+    description: 'Managed Expo app for easier upgrades',
+  },
+  {
+    title: 'Test App by Microsoft',
+    value: 'test-app',
+    description: "Test app with app's native code abstracted",
+  },
+] as const;
 
 const validateDirectory = (input: string) => {
   if (!input) {
@@ -329,10 +322,8 @@ export const prompt = create(['[name]'], {
       skip: (): boolean => {
         const answers = prompt.read();
 
-        if (typeof answers.type === 'string') {
-          return answers.type === 'library'
-            ? choice.value !== 'expo'
-            : choice.value === 'expo';
+        if (answers.type === 'library') {
+          return choice.value !== 'expo';
         }
 
         return false;

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

@@ -61,9 +61,9 @@ const EXAMPLE_MODULE_NEW_FILES = path.resolve(
   '../templates/example-module-new'
 );
 const EXAMPLE_VIEW_FILES = path.resolve(__dirname, '../templates/example-view');
+const EXAMPLE_EXPO_FILES = path.resolve(__dirname, '../templates/example-expo');
 
 const JS_FILES = path.resolve(__dirname, '../templates/js-library');
-const EXPO_FILES = path.resolve(__dirname, '../templates/expo-library');
 const NATIVE_COMMON_FILES = path.resolve(
   __dirname,
   '../templates/native-common'
@@ -203,14 +203,18 @@ export async function applyTemplates(
 
   if (answers.languages === 'js') {
     await applyTemplate(config, JS_FILES, folder);
-    await applyTemplate(config, EXPO_FILES, folder);
+    await applyTemplate(config, EXAMPLE_EXPO_FILES, folder);
   } else {
     await applyTemplate(config, NATIVE_COMMON_FILES, folder);
 
     if (config.example != null) {
       await applyTemplate(config, NATIVE_COMMON_EXAMPLE_FILES, folder);
     }
 
+    if (config.example === 'expo') {
+      await applyTemplate(config, EXAMPLE_EXPO_FILES, folder);
+    }
+
     if (config.project.moduleConfig === 'nitro-modules') {
       await applyTemplate(config, NITRO_COMMON_FILES, folder);
       await applyTemplate(config, NATIVE_FILES['module_nitro'], folder);

packages/create-react-native-library/templates/native-common-example/example/react-native.config.js

@@ -15,7 +15,7 @@ module.exports = {
       automaticPodsInstallation: true,
     },
   }),
-<% } else { -%>
+<% } else if (example === 'vanilla') { -%>
   project: {
     ios: {
       automaticPodsInstallation: true,