Dogfood preload observability in React Native sample

[markmur]

What changes

• Observe each cart preload in the React Native sample app and render its current lifecycle state.
• Start a fresh request-scoped observation when the cart screen gains focus or the cart URL/quantity changes.
• Remove the previous observer during effect cleanup without invalidating the cached checkout.
• Surface failure reasons and HTTP status codes when a preload fails.

Sample pattern

The sample demonstrates that the callback can be stable while the options object remains local to the effect; merchants do not need to memoize the options object.

const [preloadState, setPreloadState] = useState<PreloadState>({
  type: 'idle',
});
const {preload} = useShopifyCheckout();

useEffect(() => {
  if (
    !isFocused ||
    !checkoutPreloadingEnabled ||
    !checkoutUrl ||
    totalQuantity === 0
  ) {
    setPreloadState({type: 'idle'});
    return;
  }

  const subscription = preload(checkoutUrl, {
    onStateChange: setPreloadState,
  });

  return () => subscription.remove();
}, [
  checkoutPreloadingEnabled,
  checkoutUrl,
  isFocused,
  preload,
  totalQuantity,
]);

The cart UI then makes the observed state visible while dogfooding:

<Text>Checkout preload: {formatPreloadState(preloadState)}</Text>

[markmur]

• Refresh repeated Swift preloads #658
• Dogfood preload observability in React Native sample #656 👈 (View in Graphite)
• Replace deprecated React Native activity access #655
• Add React Native preload observability #654
• main

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

[github-actions]

React Native — Coverage Report

Lines	Statements	Branches	Functions
	90.97% (363/399)	87.29% (213/244)	100% (92/92)

[github-actions]

Package Size

Platform	Artifact	Base	Head	Delta
React Native	npm tarball	107.3 KiB	107.3 KiB	0 B

React Native file breakdown

File	Base	Head	Delta
node_modules/@shopify/checkout-kit-protocol/src/generated/Models.ts	85.4 KiB	85.4 KiB	0 B
node_modules/@shopify/checkout-kit-protocol/src/generated/Models.d.ts	53.0 KiB	53.0 KiB	0 B
android/src/main/java/com/shopify/reactnative/checkoutkit/ShopifyCheckoutKitModule.java	16.0 KiB	16.0 KiB	0 B
ios/ShopifyCheckoutKit.swift	15.9 KiB	15.9 KiB	0 B
ios/AcceleratedCheckoutButtons.swift	14.1 KiB	14.1 KiB	0 B
src/components/AcceleratedCheckoutButtons.tsx	13.0 KiB	13.0 KiB	0 B
src/index.ts	12.7 KiB	12.7 KiB	0 B
lib/commonjs/index.js	12.4 KiB	12.4 KiB	0 B
lib/commonjs/components/AcceleratedCheckoutButtons.js	11.4 KiB	11.4 KiB	0 B
src/index.d.ts	11.1 KiB	11.1 KiB	0 B
lib/commonjs/components/AcceleratedCheckoutButtons.js.map	10.4 KiB	10.4 KiB	0 B
lib/module/index.js	10.4 KiB	10.4 KiB	0 B
lib/module/components/AcceleratedCheckoutButtons.js	10.2 KiB	10.2 KiB	0 B
node_modules/@shopify/checkout-kit-protocol/src/generated/ProtocolNotifications.ts	9.5 KiB	9.5 KiB	0 B
lib/module/components/AcceleratedCheckoutButtons.js.map	9.1 KiB	9.1 KiB	0 B
lib/module/index.js.map	8.1 KiB	8.1 KiB	0 B
src/present-dispatcher.ts	8.0 KiB	8.0 KiB	0 B
lib/commonjs/index.js.map	7.9 KiB	7.9 KiB	0 B
node_modules/@shopify/checkout-kit-protocol/src/generated/ProtocolNotifications.d.ts	7.6 KiB	7.6 KiB	0 B
node_modules/@shopify/checkout-kit-protocol/src/generated/ProtocolRenameMap.ts	7.2 KiB	7.2 KiB	0 B
…and 117 smaller files

Measured from the PR base SHA and PR head SHA. The file breakdown shows uncompressed sizes within each package artifact, so individual files do not sum to the compressed artifact total. This comment reports package artifact sizes only; it is not a final app binary-size report.

[bitrise]

Install this build

Open Tophat, select your target device, then click Install. Links open on the Mac running Tophat.

SDK	Install
React Native	Install with Tophat

Checkout Kit E2E results

Status	Suite	Target	Platform	OS version tag	Device
✅	react-native-ios	react-native	ios	latest	iPhone 15 iOS 27 Beta
✅	react-native-android	react-native	android	latest	Google Pixel 10 Android 16.0