[RN][Bug]: Unify RN color handling

[kieran-osgood-shopify]

What am I fixing

Closes: https://github.com/shop/issues-checkout-kit/issues/1260

1. iOS: The automatic color scheme showed the background color of whichever explicit scheme ran last. light dark & storefront.
2. When changing the system color scheme from light to dark on automatic, we'd be left in an inconsistent state with background color not adapting
3. Sample app was incorrectly reading a value in a non reactive manner (Appearance.getColorScheme) - this meant that re-renders weren't triggered in App.tsx when system scheme changed, leaving stale UI

Simulator Screen Recording - iPhone 15 Pro - 2026-08-06 at 13.33.22.mov (uploaded via Graphite)

How

Stacked on #970, which gives the Swift SDK the same CheckoutAppearance / ColorScheme / Colors model as Android. React Native now uses that model on both platforms instead of its own colorScheme + colors settings.

Cause	Fix
The iOS bridge only assigned a color when setConfig included that key. ShopifyCheckoutKit.configuration is process-wide, so an omitted key kept the previous value, and automatic and storefront inherited the last light or dark background.	Colors now live inside the appearance, and each setConfig with an appearance replaces it wholesale on both bridges (CheckoutAppearanceConfiguration.swift / .kt). Omitted colors fall back to the native defaults for that appearance.
RN exposed colorScheme with a storefront case plus a separate top-level colors key. Native has appearance, where storefront is its own appearance and ColorScheme is only light, dark or automatic.	Breaking: appearance: {type: CheckoutAppearanceType.app, colorScheme?, colors?} or {type: CheckoutAppearanceType.storefront, colors?} replaces colorScheme and colors. ColorScheme.storefront is removed. getConfig() returns appearance and no longer returns colors.
iOS and Android used different color key names.	Both platforms use the native names: webViewBackground, headerBackground, headerFont, progressIndicator, closeIconTint, headerBorderColor (plus dragHandleColor on Android).

The README has a migration table from the old keys. The sample app's Settings now has an Appearance section (Storefront / App automatic / App light / App dark), matching the Swift sample.

React Native CI resolves published native SDKs, so iOS CI stays red until a Swift release containing #970 is published and pinned. Test locally with dev rn ios --local.

How to test

Review the test video above and perform similar steps, alternating the theme toggle in settings and opening checkout, we should retain good contrast and match theme for the background color of the webview, the header, the title, and the close icon.

You can toggle the shortcut on simulator (ios) with cmd+shift+A - android doesn't have a keyboard shortcut but you can find it in the system tray

---

Before you merge

Important

• I've added tests to support my implementation
• I have read and agree with the Contribution Guidelines
• I have read and agree with the Code of Conduct
• I've updated the relevant platform README (platforms/react-native/README.md)

🤖 Generated with Claude Code

[kieran-osgood-shopify]

• [RN][Bug]: Unify RN color handling #597 👈 (View in Graphite)
• [ReactNative] Upgrade to alpha.3 native sdks - adds loglevel / colorscheme changes  #484 : 4 other dependent PRs (#485 , #575 , #584 and 1 other)
• [Android] Adds title to the configure {} method for runtime changes  #479
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[kieran-osgood-shopify]

this was a non-reactive value meaning it didn't trigger re-renders when system color scheme changed

[github-actions]

Bundle Size Budgets

Budget	Size	Limits	Result
React Native npm package (gzip)	116.29 KiB (+1.07 KiB)	130 KiB soft / 150 KiB hard	✅ Within budget

Bundle and package size

Web bundle sizes cover shipped runtime JavaScript. Package sizes cover the full published archive, including any source maps, declarations, and documentation it contains.

Platform	Measurement	Compression	Base	Head	Delta
React Native	npm package (.tgz)	gzip	115.2 KiB	116.3 KiB	+1.1 KiB

React Native package files (uncompressed)

These are uncompressed file sizes; they do not sum to the compressed package size above.

File	Base	Head	Delta
node_modules/@shopify/checkout-kit-protocol/src/generated/Models.ts	108.7 KiB	108.7 KiB	0 B
node_modules/@shopify/checkout-kit-protocol/src/generated/Models.d.ts	73.1 KiB	73.1 KiB	0 B
android/src/main/java/com/shopify/reactnative/checkoutkit/ShopifyCheckoutKitModule.java	17.7 KiB	11.0 KiB	-6.8 KiB
ios/AcceleratedCheckoutButtons.swift	14.8 KiB	14.8 KiB	0 B
ios/ShopifyCheckoutKit.swift	14.8 KiB	13.8 KiB	-1022 B
src/index.ts	14.2 KiB	14.4 KiB	+243 B
lib/commonjs/index.js	13.6 KiB	13.7 KiB	+150 B
lib/module/index.js	11.6 KiB	11.7 KiB	+48 B
src/index.d.ts	10.8 KiB	10.7 KiB	-52 B
node_modules/@shopify/checkout-kit-protocol/src/generated/ProtocolNotifications.ts	9.5 KiB	9.5 KiB	0 B
lib/module/index.js.map	9.4 KiB	9.5 KiB	+54 B
lib/commonjs/index.js.map	9.2 KiB	9.2 KiB	+7 B
node_modules/@shopify/checkout-kit-protocol/src/protocol_codec_runtime.ts	7.9 KiB	7.9 KiB	0 B
node_modules/@shopify/checkout-kit-protocol/src/generated/ProtocolRenameMap.ts	7.8 KiB	7.8 KiB	0 B
node_modules/@shopify/checkout-kit-protocol/src/generated/ProtocolNotifications.d.ts	7.6 KiB	7.6 KiB	0 B
src/components/AcceleratedCheckoutButtons.tsx	7.0 KiB	7.0 KiB	0 B
lib/commonjs/components/AcceleratedCheckoutButtons.js	6.9 KiB	6.9 KiB	0 B
android/src/main/java/com/shopify/reactnative/checkoutkit/CustomCheckoutListener.java	6.2 KiB	6.2 KiB	0 B
lib/commonjs/components/AcceleratedCheckoutButtons.js.map	5.9 KiB	5.9 KiB	0 B
lib/module/components/AcceleratedCheckoutButtons.js	5.7 KiB	5.7 KiB	0 B
…and 119 smaller files

How sizes are measured

Measured from the PR base SHA and PR head SHA. Web bundle rows sum shipped .js, .mjs, and .cjs files under dist/, excluding source maps and declarations. The gzip bundle size sums files compressed individually with gzip -n -9. npm package sizes are gzip-compressed .tgz archives; Android AAR sizes are ZIP archives. Package sizes are not final app binary sizes.