Add TurboModule specs and codegen components to prepare RN new-arch migration

Prepare codebase for React Native new-architecture (TurboModules/codegen) by adding JS specs, codegen native components, and test mocks.

What changed and why:
- Added a TurboModule spec (NativeShopifyCheckoutSheetKit) and a codegen native component spec (RCTAcceleratedCheckoutButtonsNativeComponent) to declare the native API surface and typed component props. This moves JS to consume the new-arch API surface via TurboModuleRegistry and codegenNativeComponent instead of using NativeModules/requireNativeComponent directly.
- Updated AcceleratedCheckoutButtons to import codegenNativeComponent and use the generated native component type instead of requireNativeComponent.
- Added codegenConfig to the package.json to configure codegen generation for this module.
- Added Jest mocks for codegenNativeComponent and extended the react-native manual mock to provide TurboModuleRegistry.getEnforcing, getConstants, and event listener helpers so unit tests run against the new-arch surface.
- Added a moduleNameMapper entry to jest.config.js so tests resolve the codegenNativeComponent import to the new mock.
- Updated a linking test to assert TurboModuleRegistry behavior (throws when module not present) rather than the old NativeModules linking error.
- Adjusted runtime usage to read version via getConstants() and cast getConfig() return types for better typing with the spec.

Context and next steps:
- These changes are groundwork only: they enable the JS-side migration to the RN new architecture and allow tests to run against the new-arch signatures.
- Native implementations (iOS/Android) still need corresponding TurboModule and codegen native component implementations, and we must decide on compatibility strategy (clean break vs dual support). Dual support will add duplication (parallel native hooks, bridging shims) and phased rollout; a clean break requires coordinating release timelines for hosts consuming this module.
- Suggested next phases: (1) implement native TurboModule & codegen components on each platform, (2) add migration shims to continue supporting old NativeModules if dual-mode required, (3) integration testing & performance validation, (4) cutover and remove old-arch shims when safe.

This commit prepares the repository for the migration and makes future work (native bindings and compatibility strategy) easier to implement and test.

Author: kieran-osgood-shopify

__mocks__/codegenNativeComponent.ts

@@ -0,0 +1,11 @@
+const React = require('react');
+
+const codegenNativeComponent = (_name: string) => {
+  return (props: any) =>
+    React.createElement('View', {
+      ...props,
+      testID: props?.testID ?? 'accelerated-checkout-buttons',
+    });
+};
+
+export default codegenNativeComponent;

__mocks__/react-native.ts

@@ -47,6 +47,7 @@ const exampleConfig = {preloading: true};
 
 const ShopifyCheckoutSheetKit = {
   version: '0.7.0',
+  getConstants: jest.fn(() => ({version: '0.7.0'})),
   preload: jest.fn(),
   present: jest.fn(),
   dismiss: jest.fn(),
@@ -58,6 +59,8 @@ const ShopifyCheckoutSheetKit = {
   initiateGeolocationRequest: jest.fn(),
   configureAcceleratedCheckouts: jest.fn(),
   isAcceleratedCheckoutAvailable: jest.fn(),
+  addListener: jest.fn(),
+  removeListeners: jest.fn(),
 };
 
 // CommonJS export for Jest manual mock resolution
@@ -68,6 +71,14 @@ module.exports = {
   },
   NativeEventEmitter: jest.fn(() => createMockEmitter()),
   requireNativeComponent,
+  TurboModuleRegistry: {
+    getEnforcing: jest.fn((name: string) => {
+      if (name === 'ShopifyCheckoutSheetKit') {
+        return ShopifyCheckoutSheetKit;
+      }
+      return null;
+    }),
+  },
   NativeModules: {
     ShopifyCheckoutSheetKit: {
       ...ShopifyCheckoutSheetKit,

jest.config.js

@@ -3,6 +3,10 @@ module.exports = {
   modulePathIgnorePatterns: ['modules/@shopify/checkout-sheet-kit/lib'],
   modulePaths: ['<rootDir>/sample/node_modules'],
   setupFiles: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper: {
+    'react-native/Libraries/Utilities/codegenNativeComponent':
+      '<rootDir>/__mocks__/codegenNativeComponent.ts',
+  },
   transform: {
     '\\.[jt]sx?$': 'babel-jest',
   },

modules/@shopify/checkout-sheet-kit/package.json

@@ -54,6 +54,14 @@
     "react-native-builder-bob": "^0.23.2",
     "typescript": "^5.9.2"
   },
+  "codegenConfig": {
+    "name": "RNShopifyCheckoutSheetKitSpec",
+    "type": "all",
+    "jsSrcsDir": "src/specs",
+    "android": {
+      "javaPackageName": "com.shopify.checkoutsheetkit"
+    }
+  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",

modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx

@@ -22,8 +22,9 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SO
 */
 
 import React, {useCallback, useMemo, useState} from 'react';
-import {requireNativeComponent, Platform} from 'react-native';
+import {Platform} from 'react-native';
 import type {ViewStyle} from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type {
   AcceleratedCheckoutWallet,
   CheckoutCompletedEvent,
@@ -164,7 +165,7 @@ interface NativeAcceleratedCheckoutButtonsProps {
 }
 
 const RCTAcceleratedCheckoutButtons =
-  requireNativeComponent<NativeAcceleratedCheckoutButtonsProps>(
+  codegenNativeComponent<NativeAcceleratedCheckoutButtonsProps>(
     'RCTAcceleratedCheckoutButtons',
   );
 

modules/@shopify/checkout-sheet-kit/src/index.ts

@@ -21,17 +21,13 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-import {
-  NativeModules,
-  NativeEventEmitter,
-  PermissionsAndroid,
-  Platform,
-} from 'react-native';
+import {NativeEventEmitter, PermissionsAndroid, Platform} from 'react-native';
 import type {
   EmitterSubscription,
   EventSubscription,
   PermissionStatus,
 } from 'react-native';
+import NativeShopifyCheckoutSheetKit from './specs/NativeShopifyCheckoutSheetKit';
 import {ShopifyCheckoutSheetProvider, useShopifyCheckoutSheet} from './context';
 import {ApplePayContactField, ColorScheme, LogLevel} from './index.d';
 import type {
@@ -64,14 +60,7 @@ import type {
   RenderStateChangeEvent,
 } from './components/AcceleratedCheckoutButtons';
 
-const RNShopifyCheckoutSheetKit = NativeModules.ShopifyCheckoutSheetKit;
-
-if (!('ShopifyCheckoutSheetKit' in NativeModules)) {
-  throw new Error(`
-  "@shopify/checkout-sheet-kit" is not correctly linked.
-
-  If you are building for iOS, make sure to run "pod install" first and restart the metro server.`);
-}
+const RNShopifyCheckoutSheetKit = NativeShopifyCheckoutSheetKit;
 
 const defaultFeatures: Features = {
   handleGeolocationRequests: true,
@@ -114,7 +103,8 @@ class ShopifyCheckoutSheet implements ShopifyCheckoutSheetKit {
     }
   }
 
-  public readonly version: string = RNShopifyCheckoutSheetKit.version;
+  public readonly version: string =
+    RNShopifyCheckoutSheetKit.getConstants().version;
 
   /**
    * Dismisses the currently displayed checkout sheet
@@ -151,7 +141,7 @@ class ShopifyCheckoutSheet implements ShopifyCheckoutSheetKit {
    * @returns Promise containing the current Configuration
    */
   public async getConfig(): Promise<Configuration> {
-    return RNShopifyCheckoutSheetKit.getConfig();
+    return RNShopifyCheckoutSheetKit.getConfig() as Promise<Configuration>;
   }
 
   /**

modules/@shopify/checkout-sheet-kit/src/specs/NativeShopifyCheckoutSheetKit.ts

@@ -0,0 +1,78 @@
+import type {TurboModule} from 'react-native';
+import {TurboModuleRegistry} from 'react-native';
+
+type IosColorsSpec = {
+  tintColor?: string;
+  backgroundColor?: string;
+  closeButtonColor?: string;
+};
+
+type AndroidColorsBaseSpec = {
+  progressIndicator?: string;
+  backgroundColor?: string;
+  headerBackgroundColor?: string;
+  headerTextColor?: string;
+  closeButtonColor?: string;
+};
+
+type AndroidColorsSpec = {
+  progressIndicator?: string;
+  backgroundColor?: string;
+  headerBackgroundColor?: string;
+  headerTextColor?: string;
+  closeButtonColor?: string;
+  light?: AndroidColorsBaseSpec;
+  dark?: AndroidColorsBaseSpec;
+};
+
+type ColorsSpec = {
+  ios?: IosColorsSpec;
+  android?: AndroidColorsSpec;
+};
+
+type ConfigurationSpec = {
+  preloading?: boolean;
+  title?: string;
+  colorScheme?: string;
+  logLevel?: string;
+  colors?: ColorsSpec;
+};
+
+type ConfigurationResultSpec = {
+  preloading: boolean;
+  colorScheme: string;
+  logLevel: string;
+  title?: string;
+  tintColor?: string;
+  backgroundColor?: string;
+  closeButtonColor?: string;
+};
+
+export interface Spec extends TurboModule {
+  present(checkoutUrl: string): void;
+  preload(checkoutUrl: string): void;
+  dismiss(): void;
+  invalidateCache(): void;
+  setConfig(configuration: ConfigurationSpec): void;
+  getConfig(): Promise<ConfigurationResultSpec>;
+  configureAcceleratedCheckouts(
+    storefrontDomain: string,
+    storefrontAccessToken: string,
+    customerEmail: string | null,
+    customerPhoneNumber: string | null,
+    customerAccessToken: string | null,
+    applePayMerchantIdentifier: string | null,
+    applyPayContactFields: string[],
+    supportedShippingCountries: string[],
+  ): Promise<boolean>;
+  isAcceleratedCheckoutAvailable(): Promise<boolean>;
+  isApplePayAvailable(): Promise<boolean>;
+  initiateGeolocationRequest(allow: boolean): void;
+  addListener(eventName: string): void;
+  removeListeners(count: number): void;
+  getConstants(): {version: string};
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'ShopifyCheckoutSheetKit',
+);

modules/@shopify/checkout-sheet-kit/src/specs/RCTAcceleratedCheckoutButtonsNativeComponent.ts

@@ -0,0 +1,69 @@
+import type {ViewProps} from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {
+  BubblingEventHandler,
+  DirectEventHandler,
+  Double,
+  Float,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+type FailEvent = Readonly<{
+  __typename: string;
+  message: string;
+  code?: string;
+  recoverable?: boolean;
+}>;
+
+type CompleteEvent = Readonly<{
+  orderDetails: {
+    id: string;
+    cart: {
+      token: string;
+      lines: ReadonlyArray<
+        Readonly<{
+          title: string;
+          quantity: Double;
+          merchandiseId?: string;
+          productId?: string;
+        }>
+      >;
+    };
+    email?: string;
+    phone?: string;
+  };
+}>;
+
+type RenderStateChangeEvent = Readonly<{
+  state: string;
+  reason?: string;
+}>;
+
+type ClickLinkEvent = Readonly<{url: string}>;
+type SizeChangeEvent = Readonly<{height: Double}>;
+
+type CheckoutIdentifierSpec = Readonly<{
+  cartId?: string;
+  variantId?: string;
+  quantity?: Double;
+}>;
+
+interface NativeProps extends ViewProps {
+  checkoutIdentifier: CheckoutIdentifierSpec;
+  cornerRadius?: Float;
+  wallets?: ReadonlyArray<string>;
+  applePayLabel?: string;
+  onFail?: BubblingEventHandler<FailEvent>;
+  onComplete?: BubblingEventHandler<CompleteEvent>;
+  onCancel?: BubblingEventHandler<null>;
+  onRenderStateChange?: BubblingEventHandler<RenderStateChangeEvent>;
+  onWebPixelEvent?: BubblingEventHandler<Readonly<{data: string}>>;
+  onClickLink?: BubblingEventHandler<ClickLinkEvent>;
+  onSizeChange?: DirectEventHandler<SizeChangeEvent>;
+  onShouldRecoverFromError?: DirectEventHandler<
+    Readonly<{recoverable: boolean}>
+  >;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RCTAcceleratedCheckoutButtons',
+);

modules/@shopify/checkout-sheet-kit/tests/linking.test.ts

@@ -1,31 +1,22 @@
-/**
- * Test for native module linking error
- */
-
-// Mock NativeModules without ShopifyCheckoutSheetKit
 jest.mock('react-native', () => ({
-  NativeModules: {
-    // Intentionally empty to trigger linking error
-  },
+  NativeModules: {},
   NativeEventEmitter: jest.fn(),
   Platform: {
     OS: 'ios',
   },
-  requireNativeComponent: jest.fn().mockImplementation(() => {
-    const mockComponent = (props: any) => {
-      // Use React.createElement with plain object instead
-      const mockReact = jest.requireActual('react');
-      return mockReact.createElement('View', props);
-    };
-    return mockComponent;
-  }),
+  TurboModuleRegistry: {
+    getEnforcing: jest.fn((name: string) => {
+      throw new Error(
+        `TurboModuleRegistry.getEnforcing(...): '${name}' could not be found.`,
+      );
+    }),
+  },
 }));
 
 describe('Native Module Linking', () => {
   it('throws error when native module is not linked', () => {
     expect(() => {
-      // This will trigger the linking check
       require('../src/index');
-    }).toThrow('@shopify/checkout-sheet-kit" is not correctly linked.');
+    }).toThrow('ShopifyCheckoutSheetKit');
   });
 });