fix(react-native): always assign checkout colors on setConfig

[kieran-osgood-shopify]

What am I fixing

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

Cause

Fix

The iOS bridge assigned a color only when setConfig supplied that key, this meant when configure was recalled with a null value, it keps the old value. ShopifyCheckoutKit.configuration is process wide, so an omitted key kept the previous value. The automatic and storefront branches of the sample send no colors.ios, so they inherited the last light or dark background. This behaviour came in with the v3 import and stayed latent, because the v3 sample always sent a static colors.ios block, including for automatic.

setConfig now calls ShopifyCheckoutKit.configure one time and always assigns tintColor, backgroundColor and closeButtonTintColor. When the config omits a color, the bridge writes the value the host application held before React Native first configured the library. A private static let captures that value, so it survives a Metro reload.

        if let backgroundColorHex = iosConfig?["backgroundColor"] as? String {
            ShopifyCheckoutKit.configuration.backgroundColor = UIColor(hex: backgroundColorHex)
        }

After

 config.backgroundColor = iosConfig?["backgroundColor"].map(UIColor.init(hex:))
                ?? initialConfiguration.backgroundColor

This matches the Android bridge, which already rebuilds the whole appearance per call.

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]

• fix(react-native): always assign checkout colors on setConfig #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