feat: support react-native-version for expo and update to sdk 55

satya164 · satya164 · commit 9eb88894f02d · 2026-04-13T17:38:36.000+02:00
previously, `--react-native-version` parameter was ignored for expo
example.
now it'll look-up appropriate expo sdk version for the given react
native version.

in addition, we now specify an explicit expo sdk version (currently sdk
55).
diff --git a/packages/create-react-native-library/src/constants.ts b/packages/create-react-native-library/src/constants.ts
@@ -2,3 +2,4 @@ export const FALLBACK_BOB_VERSION = '0.41.0';
 export const FALLBACK_NITRO_MODULES_VERSION = '0.35.3';
 export const SUPPORTED_MONOREPO_CONFIG_VERSION = '0.3.3';
 export const SUPPORTED_REACT_NATIVE_VERSION = '0.85.0';
+export const SUPPORTED_EXPO_SDK_VERSION = '55';
diff --git a/packages/create-react-native-library/src/exampleApp/generateExampleApp.ts b/packages/create-react-native-library/src/exampleApp/generateExampleApp.ts
@@ -1,9 +1,13 @@
 import dedent from 'dedent';
 import fs from 'fs-extra';
 import { getLatestVersion } from 'get-latest-version';
-import https from 'https';
+import kleur from 'kleur';
 import path from 'path';
-import { SUPPORTED_MONOREPO_CONFIG_VERSION } from '../constants';
+import {
+  SUPPORTED_EXPO_SDK_VERSION,
+  SUPPORTED_MONOREPO_CONFIG_VERSION,
+  SUPPORTED_REACT_NATIVE_VERSION,
+} from '../constants';
 import type { TemplateConfiguration } from '../template';
 import sortObjectKeys from '../utils/sortObjectKeys';
 import { spawn } from '../utils/spawn';
@@ -48,10 +52,75 @@ const PACKAGES_TO_ADD_DEV_EXPO_NATIVE = {
   'expo-dev-client': '~5.0.3',
 };
 
+async function fetchReactNativeVersion(version: string) {
+  const matchedReactNativeVersion = /(\d+\.\d+[-.0-9a-z]*)/.test(version)
+    ? version
+    : await getLatestVersion('react-native', {
+        range: version,
+      });
+
+  if (!matchedReactNativeVersion) {
+    throw new Error(
+      `Could not find a matching version for react-native: ${version}`
+    );
+  }
+
+  return matchedReactNativeVersion;
+}
+
+async function fetchCompatibleExpoSDK(reactNativeVersion: string) {
+  const matchedReactNativeVersion =
+    await fetchReactNativeVersion(reactNativeVersion);
+
+  const res = await fetch('https://api.expo.dev/v2/versions/latest');
+
+  if (!res.ok) {
+    throw new Error(
+      `Failed to fetch Expo SDK versions: ${String(res.status)} ${res.statusText}`
+    );
+  }
+
+  const result = await res.json();
+
+  const sdkVersion = Object.entries(result.data.sdkVersions)
+    .find(([, sdkVersionInfo]) => {
+      if (
+        typeof sdkVersionInfo === 'object' &&
+        sdkVersionInfo != null &&
+        'facebookReactNativeVersion' in sdkVersionInfo &&
+        typeof sdkVersionInfo.facebookReactNativeVersion === 'string'
+      ) {
+        const requested = matchedReactNativeVersion.split('.');
+        const supported = sdkVersionInfo.facebookReactNativeVersion.split('.');
+
+        return (
+          requested[0] === supported[0] &&
+          requested[1] === supported[1] &&
+          (requested[2] ? requested[2] === supported[2] : true)
+        );
+      }
+
+      return false;
+    })?.[0]
+    // Get major SDK version (e.g. "55" from "55.0.0")
+    .split('.')[0];
+
+  if (sdkVersion == null) {
+    throw new Error(
+      `Couldn't find a compatible Expo SDK for react-native@${reactNativeVersion}`
+    );
+  }
+
+  return {
+    sdkVersion,
+    reactNativeVersion: matchedReactNativeVersion,
+  };
+}
+
 export default async function generateExampleApp({
   config,
   root,
-  reactNativeVersion = 'latest',
+  reactNativeVersion,
 }: {
   config: TemplateConfiguration;
   root: string;
@@ -63,6 +132,17 @@ export default async function generateExampleApp({
 
   switch (config.example) {
     case 'vanilla':
+      if (
+        reactNativeVersion != null &&
+        reactNativeVersion !== SUPPORTED_REACT_NATIVE_VERSION
+      ) {
+        console.log(
+          `${kleur.blue('ℹ')} Using untested ${kleur.cyan(
+            `react-native@${reactNativeVersion}`
+          )} for the example`
+        );
+      }
+
       // `npx @react-native-community/cli init <projectName> --directory example --skip-install`
       args = [
         `@react-native-community/cli`,
@@ -73,7 +153,7 @@ export default async function generateExampleApp({
         '--directory',
         directory,
         '--version',
-        reactNativeVersion,
+        reactNativeVersion || SUPPORTED_REACT_NATIVE_VERSION,
         '--skip-install',
         '--skip-git-init',
         '--pm',
@@ -82,18 +162,19 @@ export default async function generateExampleApp({
       break;
     case 'test-app':
       {
-        // 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}`
+        // Test App doesn't support a semver range for the version
+        const matchedReactNativeVersion = reactNativeVersion
+          ? await fetchReactNativeVersion(reactNativeVersion)
+          : SUPPORTED_REACT_NATIVE_VERSION;
+
+        if (
+          reactNativeVersion != null &&
+          reactNativeVersion !== SUPPORTED_REACT_NATIVE_VERSION
+        ) {
+          console.log(
+            `${kleur.blue('ℹ')} Using untested ${kleur.cyan(
+              `react-native@${matchedReactNativeVersion}`
+            )} for the example`
           );
         }
 
@@ -115,16 +196,36 @@ export default async function generateExampleApp({
         ];
       }
       break;
-    case 'expo':
+    case 'expo': {
       // `npx create-expo-app example --no-install --template blank`
+      const { sdkVersion, reactNativeVersion: matchedReactNativeVersion } =
+        reactNativeVersion
+          ? await fetchCompatibleExpoSDK(reactNativeVersion)
+          : {
+              sdkVersion: SUPPORTED_EXPO_SDK_VERSION,
+              reactNativeVersion: null,
+            };
+
+      if (
+        sdkVersion !== SUPPORTED_EXPO_SDK_VERSION &&
+        matchedReactNativeVersion
+      ) {
+        console.log(
+          `${kleur.blue('ℹ')} Using untested ${kleur.cyan(
+            `expo@${sdkVersion}`
+          )} with ${kleur.cyan(`react-native@${matchedReactNativeVersion}`)} for the example`
+        );
+      }
+
       args = [
         'create-expo-app@latest',
         directory,
         '--no-install',
         '--template',
-        'blank',
+        `blank@sdk-${sdkVersion}`,
       ];
       break;
+    }
     case undefined:
     case null: {
       // Do nothing
@@ -242,27 +343,26 @@ export default async function generateExampleApp({
     let bundledNativeModules: Record<string, string>;
 
     try {
-      bundledNativeModules = await new Promise((resolve, reject) => {
-        https
-          .get(
-            `https://raw.githubusercontent.com/expo/expo/sdk-${sdkVersion}/packages/expo/bundledNativeModules.json`,
-            (res) => {
-              let data = '';
-
-              res.on('data', (chunk: string) => (data += chunk));
-              res.on('end', () => {
-                try {
-                  resolve(JSON.parse(data));
-                } catch (e) {
-                  // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
-                  reject(e);
-                }
-              });
-            }
-          )
-          .on('error', reject);
-      });
+      const res = await fetch(
+        `https://raw.githubusercontent.com/expo/expo/sdk-${sdkVersion}/packages/expo/bundledNativeModules.json`
+      );
+
+      if (!res.ok) {
+        throw new Error(
+          `Failed to fetch bundled native modules for Expo SDK ${sdkVersion}: ${String(res.status)} ${res.statusText}`
+        );
+      }
+
+      bundledNativeModules = await res.json();
     } catch (e) {
+      console.warn(
+        `${kleur.yellow(
+          '⚠'
+        )} Failed to fetch compatibility data for Expo SDK ${sdkVersion}: ${kleur.cyan(
+          config.example
+        )}`
+      );
+
       bundledNativeModules = {};
     }
 
diff --git a/packages/create-react-native-library/src/index.ts b/packages/create-react-native-library/src/index.ts
@@ -6,15 +6,10 @@ import path from 'path';
 import {
   FALLBACK_BOB_VERSION,
   FALLBACK_NITRO_MODULES_VERSION,
-  SUPPORTED_REACT_NATIVE_VERSION,
 } from './constants';
 import { alignDependencyVersionsWithExampleApp } from './exampleApp/dependencies';
 import generateExampleApp from './exampleApp/generateExampleApp';
-import {
-  printLocalLibNextSteps,
-  printNonLocalLibNextSteps,
-  printUsedRNVersion,
-} from './inform';
+import { printLocalLibNextSteps, printNonLocalLibNextSteps } from './inform';
 import { prompt } from './prompt';
 import { applyTemplates, generateTemplateConfiguration } from './template';
 import { assertNpxExists } from './utils/assert';
@@ -72,13 +67,6 @@ async function create() {
 
   await fs.mkdirp(folder);
 
-  if (
-    answers.reactNativeVersion != null &&
-    answers.reactNativeVersion !== SUPPORTED_REACT_NATIVE_VERSION
-  ) {
-    printUsedRNVersion(answers.reactNativeVersion, config);
-  }
-
   const spinner = ora().start();
 
   if (config.example != null) {
@@ -89,6 +77,14 @@ async function create() {
       reactNativeVersion: answers.reactNativeVersion,
       config,
     });
+  } else {
+    if (answers.reactNativeVersion) {
+      console.warn(
+        `${kleur.yellow(
+          '⚠'
+        )} Ignoring --react-native-version for library without example app`
+      );
+    }
   }
 
   spinner.text = 'Copying files';
diff --git a/packages/create-react-native-library/src/inform.ts b/packages/create-react-native-library/src/inform.ts
@@ -102,30 +102,3 @@ export function printErrorHelp(message: string, error: Error) {
     throw error;
   }
 }
-
-export function printUsedRNVersion(
-  version: string,
-  config: TemplateConfiguration
-) {
-  if (config.example === 'vanilla' || config.example === 'test-app') {
-    console.log(
-      `${kleur.blue('ℹ')} Using untested ${kleur.cyan(
-        `react-native@${version}`
-      )} for the example`
-    );
-  } else if (config.example != null) {
-    console.warn(
-      `${kleur.yellow(
-        '⚠'
-      )} Ignoring --react-native-version for unsupported example type: ${kleur.cyan(
-        config.example
-      )}`
-    );
-  } else {
-    console.warn(
-      `${kleur.yellow(
-        '⚠'
-      )} Ignoring --react-native-version for library without example app`
-    );
-  }
-}
diff --git a/packages/create-react-native-library/src/prompt.ts b/packages/create-react-native-library/src/prompt.ts
@@ -5,7 +5,6 @@ import validateNpmPackage from 'validate-npm-package-name';
 import { spawn } from './utils/spawn';
 import githubUsername from 'github-username';
 import { AVAILABLE_TOOLS } from './utils/configureTools';
-import { SUPPORTED_REACT_NATIVE_VERSION } from './constants';
 
 export type Answers = NonNullable<Awaited<ReturnType<typeof prompt.show>>>;
 
@@ -388,11 +387,10 @@ export const prompt = create(['[name]'], {
     description: 'Version of React Native to use in the example app',
     message:
       'Which version of React Native do you want to use in the example app?',
-    default: SUPPORTED_REACT_NATIVE_VERSION,
     validate: (input) =>
       input === 'latest' ||
-      /^\d+\.\d+\.\d+(-.+)?$/.test(input) ||
-      'Must be a valid semver version',
+      /^\d+\.\d+(?:\.\d+)?(?:-.+)?$/.test(input) ||
+      'Must be a valid version',
     skip: true,
   },
 });
