fix: preserve sample checkout color overrides (#482)

### What changes are you making?

Fixes the React Native sample app configuration so custom checkout color overrides are preserved when building the final Checkout Sheet Kit config.

This also updates Metro resolution so the sample app resolves the local package source when testing workspace changes.

ANDROID

[Screen Recording 2026-05-06 at 9.16.04 AM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/12f47d81-ed84-4fbd-9be8-7115110f6ef8.mov" />](https://app.graphite.com/user-attachments/video/12f47d81-ed84-4fbd-9be8-7115110f6ef8.mov)

iOS

[Screen Recording 2026-05-06 at 9.21.08 AM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/847655f4-227d-42b1-9157-67d49bde7d0b.mov" />](https://app.graphite.com/user-attachments/video/847655f4-227d-42b1-9157-67d49bde7d0b.mov)

Author: kyle-schellen

metro.config.js

@@ -16,6 +16,23 @@ const config = mergeConfig(getDefaultConfig(__dirname), {
   watchFolders: [root],
 
   resolver: {
+    resolveRequest: (context, moduleName, platform) => {
+      if (
+        moduleName === '@shopify/checkout-sheet-kit' ||
+        moduleName.startsWith('@shopify/checkout-sheet-kit/')
+      ) {
+        const sub = moduleName.replace('@shopify/checkout-sheet-kit', '');
+        const target = path.resolve(
+          root,
+          'modules',
+          '@shopify/checkout-sheet-kit',
+          'src',
+          sub ? sub.replace(/^\//, '') : 'index.ts',
+        );
+        return {type: 'sourceFile', filePath: target};
+      }
+      return context.resolveRequest(context, moduleName, platform);
+    },
     extraNodeModules: {
       react: path.resolve(sample, 'node_modules', 'react'),
       'react-native': path.resolve(sample, 'node_modules', 'react-native'),

sample/src/App.tsx

@@ -406,6 +406,20 @@ function AppWithCheckoutKit({children}: PropsWithChildren) {
     return {
       ...checkoutKitConfigDefaults,
       ...checkoutKitThemeConfig,
+      colors: {
+        ...checkoutKitThemeConfig.colors,
+        ios: {
+          ...checkoutKitThemeConfig.colors?.ios,
+          ...checkoutKitConfigDefaults.colors?.ios,
+        },
+        android:
+          appConfig.colorScheme === ColorScheme.automatic
+            ? checkoutKitThemeConfig.colors?.android
+            : {
+                ...checkoutKitThemeConfig.colors?.android,
+                ...checkoutKitConfigDefaults.colors?.android,
+              },
+      },
       acceleratedCheckouts: {
         storefrontDomain: env.STOREFRONT_DOMAIN!,
         storefrontAccessToken: env.STOREFRONT_ACCESS_TOKEN!,