fix: fix handling react native version for test app

Author: satya164

packages/create-react-native-library/package.json

@@ -44,6 +44,7 @@
     "dedent": "^0.7.0",
     "ejs": "^3.1.8",
     "fs-extra": "^10.1.0",
+    "get-latest-version": "^5.1.0",
     "github-username": "^6.0.0",
     "kleur": "^4.1.4",
     "ora": "^5.4.1",

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

@@ -1,9 +1,10 @@
 import fs from 'fs-extra';
-import path from 'path';
+import getLatestVersion from 'get-latest-version';
 import https from 'https';
-import { spawn } from '../utils/spawn';
-import sortObjectKeys from '../utils/sortObjectKeys';
+import path from 'path';
 import type { TemplateConfiguration } from '../template';
+import sortObjectKeys from '../utils/sortObjectKeys';
+import { spawn } from '../utils/spawn';
 
 const FILES_TO_DELETE = [
   '__tests__',
@@ -51,60 +52,70 @@ export default async function generateExampleApp({
 }) {
   const directory = path.join(root, 'example');
 
-  // `npx --package react-native-test-app@latest init --name ${projectName}Example --destination example --version ${reactNativeVersion}`
-  const testAppArgs = [
-    '--package',
-    `react-native-test-app@latest`,
-    'init',
-    '--name',
-    `${config.project.name}Example`,
-    `--destination`,
-    directory,
-    ...(reactNativeVersion !== 'latest'
-      ? ['--version', reactNativeVersion]
-      : []),
-    '--platform',
-    'ios',
-    '--platform',
-    'android',
-  ];
-
-  // `npx @react-native-community/cli init <projectName> --directory example --skip-install`
-  const vanillaArgs = [
-    `@react-native-community/cli`,
-    'init',
-    `${config.project.name}Example`,
-    '--package-name',
-    `${config.project.package}.example`,
-    '--directory',
-    directory,
-    '--version',
-    reactNativeVersion,
-    '--skip-install',
-    '--pm',
-    'npm',
-  ];
-
-  // `npx create-expo-app example --no-install --template blank`
-  const expoArgs = [
-    'create-expo-app@latest',
-    directory,
-    '--no-install',
-    '--template',
-    'blank',
-  ];
-
   let args: string[] = [];
 
   switch (config.example) {
     case 'vanilla':
-      args = vanillaArgs;
+      // `npx @react-native-community/cli init <projectName> --directory example --skip-install`
+      args = [
+        `@react-native-community/cli`,
+        'init',
+        `${config.project.name}Example`,
+        '--package-name',
+        `${config.project.package}.example`,
+        '--directory',
+        directory,
+        '--version',
+        reactNativeVersion,
+        '--skip-install',
+        '--pm',
+        'npm',
+      ];
       break;
     case 'test-app':
-      args = testAppArgs;
+      {
+        // Test App requires React Native version to be a semver version
+        const matchedReactNativeVersion = /(\d+\.\d+[-.0-9a-z]*)/.test(
+          reactNativeVersion
+        )
+          ? reactNativeVersion
+          : await getLatestVersion('react-native', {
+              range: reactNativeVersion,
+            });
+
+        if (!matchedReactNativeVersion) {
+          throw new Error(
+            `Could not find a matching version for react-native: ${reactNativeVersion}`
+          );
+        }
+
+        // `npx --package react-native-test-app@latest init --name ${projectName}Example --destination example --version ${reactNativeVersion}`
+        args = [
+          '--package',
+          `react-native-test-app@latest`,
+          'init',
+          '--name',
+          `${config.project.name}Example`,
+          `--destination`,
+          directory,
+          '--version',
+          matchedReactNativeVersion,
+          '--platform',
+          'ios',
+          '--platform',
+          'android',
+        ];
+      }
       break;
     case 'expo':
-      args = expoArgs;
+      // `npx create-expo-app example --no-install --template blank`
+      args = [
+        'create-expo-app@latest',
+        directory,
+        '--no-install',
+        '--template',
+        'blank',
+      ];
       break;
   }
 

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

@@ -107,7 +107,7 @@ export function printUsedRNVersion(
   version: string,
   config: TemplateConfiguration
 ) {
-  if (config.example === 'vanilla') {
+  if (config.example === 'vanilla' || config.example === 'test-app') {
     console.log(
       `${kleur.blue('ℹ')} Using untested ${kleur.cyan(
         `react-native@${version}`

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

@@ -50,8 +50,8 @@ const EXAMPLE_CHOICES = (
       title: 'Test App by Microsoft',
       value: 'test-app',
       description: "app's native code is abstracted away",
-      // The test app is disabled for now until proper
-      // Codegen spec shipping is implemented
+      // 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,
     },
     {