diff --git a/packages/create-react-native-library/src/exampleApp/generateExampleApp.ts b/packages/create-react-native-library/src/exampleApp/generateExampleApp.ts index e998f2dfc..4295cd845 100644 --- a/packages/create-react-native-library/src/exampleApp/generateExampleApp.ts +++ b/packages/create-react-native-library/src/exampleApp/generateExampleApp.ts @@ -4,6 +4,7 @@ import https from 'https'; import { spawn } from '../utils/spawn'; import sortObjectKeys from '../utils/sortObjectKeys'; import type { TemplateConfiguration } from '../template'; +import dedent from 'dedent'; const FILES_TO_DELETE = [ '__tests__', @@ -35,12 +36,16 @@ const PACKAGES_TO_REMOVE = [ 'typescript', ]; -const PACKAGES_TO_ADD_WEB = { +const PACKAGES_TO_ADD_EXPO_WEB = { '@expo/metro-runtime': '~3.2.1', 'react-dom': '18.2.0', 'react-native-web': '~0.18.10', }; +const PACKAGES_TO_ADD_DEV_EXPO_NATIVE = { + 'expo-dev-client': '~5.0.3', +}; + export default async function generateExampleApp({ config, destination, @@ -48,7 +53,7 @@ export default async function generateExampleApp({ }: { config: TemplateConfiguration; destination: string; - reactNativeVersion?: string; + reactNativeVersion: string | undefined; }) { const directory = path.join(destination, 'example'); @@ -219,14 +224,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'; + + delete scripts.web; - scripts.web = 'expo start --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 || {}; diff --git a/packages/create-react-native-library/src/index.ts b/packages/create-react-native-library/src/index.ts index f109da151..dbe166706 100644 --- a/packages/create-react-native-library/src/index.ts +++ b/packages/create-react-native-library/src/index.ts @@ -103,9 +103,9 @@ async function create(_argv: yargs.Arguments) { spinner.text = 'Generating example app'; await generateExampleApp({ + config, destination: folder, reactNativeVersion: answers.reactNativeVersion, - config, }); } diff --git a/packages/create-react-native-library/src/input.ts b/packages/create-react-native-library/src/input.ts index 3d9c8f885..2cd13860d 100644 --- a/packages/create-react-native-library/src/input.ts +++ b/packages/create-react-native-library/src/input.ts @@ -57,6 +57,12 @@ const LANGUAGE_CHOICES: { const EXAMPLE_CHOICES = ( [ + { + title: 'App with Expo CLI', + value: 'expo', + description: 'managed expo app for easier upgrades', + disabled: false, + }, { title: 'App with Community CLI', value: 'vanilla', @@ -71,12 +77,6 @@ const EXAMPLE_CHOICES = ( // Codegen spec shipping is implemented 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); @@ -304,10 +304,15 @@ export async function createQuestions({ } return EXAMPLE_CHOICES.filter((choice) => { - if (values.type) { - return values.type === 'library' - ? choice.value === 'expo' - : choice.value !== 'expo'; + if (values.type === 'library') { + return choice.value === 'expo'; + } + + if ( + values.type === 'legacy-module' || + values.type === 'legacy-view' + ) { + return choice.value !== 'expo'; } return true; diff --git a/packages/create-react-native-library/src/template.ts b/packages/create-react-native-library/src/template.ts index c003891c1..7e597c560 100644 --- a/packages/create-react-native-library/src/template.ts +++ b/packages/create-react-native-library/src/template.ts @@ -71,9 +71,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 CPP_FILES = path.resolve(__dirname, '../templates/cpp-library'); const NATIVE_COMMON_FILES = path.resolve( __dirname, @@ -228,7 +228,7 @@ 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); @@ -236,6 +236,10 @@ export async function applyTemplates( 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, NATIVE_FILES['module_nitro'], folder); return; diff --git a/packages/create-react-native-library/templates/expo-library/example/babel.config.js b/packages/create-react-native-library/templates/example-expo/example/babel.config.js similarity index 100% rename from packages/create-react-native-library/templates/expo-library/example/babel.config.js rename to packages/create-react-native-library/templates/example-expo/example/babel.config.js diff --git a/packages/create-react-native-library/templates/expo-library/example/index.js b/packages/create-react-native-library/templates/example-expo/example/index.js similarity index 100% rename from packages/create-react-native-library/templates/expo-library/example/index.js rename to packages/create-react-native-library/templates/example-expo/example/index.js diff --git a/packages/create-react-native-library/templates/expo-library/example/metro.config.js b/packages/create-react-native-library/templates/example-expo/example/metro.config.js similarity index 100% rename from packages/create-react-native-library/templates/expo-library/example/metro.config.js rename to packages/create-react-native-library/templates/example-expo/example/metro.config.js diff --git a/packages/create-react-native-library/templates/expo-library/example/tsconfig.json b/packages/create-react-native-library/templates/example-expo/example/tsconfig.json similarity index 100% rename from packages/create-react-native-library/templates/expo-library/example/tsconfig.json rename to packages/create-react-native-library/templates/example-expo/example/tsconfig.json diff --git a/packages/create-react-native-library/templates/native-common-example/example/react-native.config.js b/packages/create-react-native-library/templates/native-common-example/example/react-native.config.js index ae95bd0a4..0dfbab88b 100644 --- a/packages/create-react-native-library/templates/native-common-example/example/react-native.config.js +++ b/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 === 'vanila') { -%> project: { ios: { automaticPodsInstallation: true, diff --git a/packages/create-react-native-library/templates/objc-library/ios/{%- project.name %}.h b/packages/create-react-native-library/templates/objc-library/ios/{%- project.name %}.h index d0e716c11..b5afb2921 100644 --- a/packages/create-react-native-library/templates/objc-library/ios/{%- project.name %}.h +++ b/packages/create-react-native-library/templates/objc-library/ios/{%- project.name %}.h @@ -5,7 +5,7 @@ <% } -%> <% if (project.arch === 'new') { -%> -#import "generated/RN<%- project.name -%>Spec/RN<%- project.name -%>Spec.h" +#import "RN<%- project.name -%>Spec/RN<%- project.name -%>Spec.h" @interface <%- project.name -%> : NSObject Spec> <% } else { -%> diff --git a/packages/create-react-native-library/templates/objc-view-new/ios/{%- project.name %}View.mm b/packages/create-react-native-library/templates/objc-view-new/ios/{%- project.name %}View.mm index 8387be445..8a4acc061 100644 --- a/packages/create-react-native-library/templates/objc-view-new/ios/{%- project.name %}View.mm +++ b/packages/create-react-native-library/templates/objc-view-new/ios/{%- project.name %}View.mm @@ -1,9 +1,9 @@ #import "<%- project.name -%>View.h" -#import "generated/RN<%- project.name -%>ViewSpec/ComponentDescriptors.h" -#import "generated/RN<%- project.name -%>ViewSpec/EventEmitters.h" -#import "generated/RN<%- project.name -%>ViewSpec/Props.h" -#import "generated/RN<%- project.name -%>ViewSpec/RCTComponentViewHelpers.h" +#import "RN<%- project.name -%>ViewSpec/ComponentDescriptors.h" +#import "RN<%- project.name -%>ViewSpec/EventEmitters.h" +#import "RN<%- project.name -%>ViewSpec/Props.h" +#import "RN<%- project.name -%>ViewSpec/RCTComponentViewHelpers.h" #import "RCTFabricComponentsPlugins.h"