fix: align @types/react version between example and root project

fixes #782

Author: satya164

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

@@ -11,40 +11,37 @@ export async function getDependencyVersionsFromExampleApp(
     path.join(folder, 'example', 'package.json')
   );
 
-  const react: string = examplePackageJson.dependencies?.react;
-  assert(
-    react !== undefined,
-    "The generated example app doesn't have React installed."
-  );
-  const reactNative: string = examplePackageJson.dependencies?.['react-native'];
-  assert(
-    reactNative !== undefined,
-    "The generated example app doesn't have React Native installed."
-  );
-
-  const devDependencies: Record<string, string> = {
-    react,
-    'react-native': reactNative,
-  };
+  const PACKAGES_TO_COPY = ['react', 'react-native', '@types/react'];
 
   if (
     config.example === 'vanilla' &&
     (config.project.moduleConfig === 'turbo-modules' ||
       config.project.viewConfig === 'fabric-view')
   ) {
     // React Native doesn't provide the community CLI as a dependency.
-    // We have to get read the version from the example app and put to the root package json
-    const exampleCommunityCLIVersion =
-      examplePackageJson.devDependencies['@react-native-community/cli'];
-    assert(
-      exampleCommunityCLIVersion !== undefined,
-      "The generated example app doesn't have community CLI installed"
-    );
-
-    devDependencies['@react-native-community/cli'] = exampleCommunityCLIVersion;
+    // We have to read the version from the example app and put to the root package json
+    PACKAGES_TO_COPY.push('@react-native-community/cli');
   }
 
+  const devDependencies: Record<string, string> = {};
+
+  PACKAGES_TO_COPY.forEach((name) => {
+    if (name) {
+      const version =
+        examplePackageJson.dependencies?.[name] ??
+        examplePackageJson.devDependencies?.[name];
+
+      assert(
+        version != null,
+        `Couldn't find the package "${name}" in the example app.`
+      );
+
+      devDependencies[name] = version;
+    }
+  });
+
   return {
+    dependencies: {},
     devDependencies,
   };
 }

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

@@ -23,7 +23,6 @@ const PACKAGES_TO_REMOVE = [
   '@react-native/eslint-config',
   '@tsconfig/react-native',
   '@types/jest',
-  '@types/react',
   '@types/react-test-renderer',
   '@typescript-eslint/eslint-plugin',
   '@typescript-eslint/parser',

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

@@ -1,24 +1,25 @@
-import path from 'path';
 import fs from 'fs-extra';
 import kleur from 'kleur';
-import yargs from 'yargs';
 import ora from 'ora';
-import { prompt } from './utils/prompt';
-import generateExampleApp from './exampleApp/generateExampleApp';
+import path from 'path';
+import yargs from 'yargs';
 import { addCodegenBuildScript } from './exampleApp/addCodegenBuildScript';
-import { createInitialGitCommit } from './utils/initialCommit';
-import { assertUserInput, assertNpxExists } from './utils/assert';
-import { resolveNpmPackageVersion } from './utils/resolveNpmPackageVersion';
-import { applyTemplates, generateTemplateConfiguration } from './template';
+import { getDependencyVersionsFromExampleApp } from './exampleApp/dependencies';
+import generateExampleApp from './exampleApp/generateExampleApp';
+import { printErrorHelp, printNextSteps, printUsedRNVersion } from './inform';
 import {
-  createQuestions,
+  acceptedArgs,
   createMetadata,
+  createQuestions,
   type Answers,
-  acceptedArgs,
   type Args,
 } from './input';
-import { getDependencyVersionsFromExampleApp } from './exampleApp/dependencies';
-import { printErrorHelp, printNextSteps, printUsedRNVersion } from './inform';
+import { applyTemplates, generateTemplateConfiguration } from './template';
+import { assertNpxExists, assertUserInput } from './utils/assert';
+import { createInitialGitCommit } from './utils/initialCommit';
+import { prompt } from './utils/prompt';
+import { resolveNpmPackageVersion } from './utils/resolveNpmPackageVersion';
+import sortObjectKeys from './utils/sortObjectKeys';
 
 const FALLBACK_BOB_VERSION = '0.38.3';
 const FALLBACK_NITRO_MODULES_VERSION = '0.22.1';
@@ -116,17 +117,18 @@ async function create(_argv: yargs.Arguments<Args>) {
   const rootPackageJson = await fs.readJson(path.join(folder, 'package.json'));
 
   if (config.example !== 'none') {
-    const { devDependencies } = await getDependencyVersionsFromExampleApp(
-      folder,
-      config
-    );
+    const { dependencies, devDependencies } =
+      await getDependencyVersionsFromExampleApp(folder, config);
 
-    rootPackageJson.devDependencies = rootPackageJson.devDependencies
-      ? {
-          ...rootPackageJson.devDependencies,
-          ...devDependencies,
-        }
-      : devDependencies;
+    rootPackageJson.dependencies = sortObjectKeys({
+      ...rootPackageJson.dependencies,
+      ...dependencies,
+    });
+
+    rootPackageJson.devDependencies = sortObjectKeys({
+      ...rootPackageJson.devDependencies,
+      ...devDependencies,
+    });
   }
 
   if (

packages/create-react-native-library/templates/common/$package.json

@@ -108,9 +108,6 @@
 <% } -%>
     "typescript": "^5.2.2"
   },
-  "resolutions": {
-    "@types/react": "^18.2.44"
-  },
   "peerDependencies": {
     "react": "*",
 <% if (project.moduleConfig === 'nitro-modules') { -%>