diff --git a/platforms/react-native/modules/@shopify/checkout-kit-react-native/android/src/main/java/com/shopify/reactnative/checkoutkit/ShopifyCheckoutKitModule.java b/platforms/react-native/modules/@shopify/checkout-kit-react-native/android/src/main/java/com/shopify/reactnative/checkoutkit/ShopifyCheckoutKitModule.java index 87fcb4940..3e2aeb9d1 100644 --- a/platforms/react-native/modules/@shopify/checkout-kit-react-native/android/src/main/java/com/shopify/reactnative/checkoutkit/ShopifyCheckoutKitModule.java +++ b/platforms/react-native/modules/@shopify/checkout-kit-react-native/android/src/main/java/com/shopify/reactnative/checkoutkit/ShopifyCheckoutKitModule.java @@ -76,7 +76,7 @@ public void removeListeners(double count) { public void present(String checkoutURL, ReadableArray subscribedMethods) { releaseCheckoutListener(); - Activity currentActivity = getCurrentActivity(); + Activity currentActivity = getReactApplicationContext().getCurrentActivity(); if (currentActivity instanceof ComponentActivity) { DispatchHandle dispatch = new DispatchHandle(json -> emitOnDispatch(json)); CustomCheckoutListener listener = new CustomCheckoutListener(dispatch); @@ -115,7 +115,7 @@ public void dismiss() { public void preload(String checkoutURL, String requestId) { releaseCheckoutPreload(); - Activity currentActivity = getCurrentActivity(); + Activity currentActivity = getReactApplicationContext().getCurrentActivity(); if (currentActivity instanceof ComponentActivity) { checkoutPreload = ShopifyCheckoutKit.preload( checkoutURL, diff --git a/platforms/react-native/sample/src/accessibility/accessibilityIdentifiers.ts b/platforms/react-native/sample/src/accessibility/accessibilityIdentifiers.ts index 176f8767d..320ccbf24 100644 --- a/platforms/react-native/sample/src/accessibility/accessibilityIdentifiers.ts +++ b/platforms/react-native/sample/src/accessibility/accessibilityIdentifiers.ts @@ -28,6 +28,7 @@ export class AccessibilityIdentifiers { emptyMessage: 'cart-empty-message', checkoutReady: 'cart-checkout-ready', checkoutButton: 'checkout-button', + preloadState: 'cart-preload-state', } as const; static readonly settings = { diff --git a/platforms/react-native/sample/src/screens/CartScreen.tsx b/platforms/react-native/sample/src/screens/CartScreen.tsx index cd2e93d72..05c75fdbf 100644 --- a/platforms/react-native/sample/src/screens/CartScreen.tsx +++ b/platforms/react-native/sample/src/screens/CartScreen.tsx @@ -19,6 +19,7 @@ import { ApplePayLabel, AcceleratedCheckoutWallet, } from '@shopify/checkout-kit-react-native'; +import type {PreloadState} from '@shopify/checkout-kit-react-native'; import {useIsFocused} from '@react-navigation/native'; import {useConfig} from '../context/Config'; import useShopify from '../hooks/useShopify'; @@ -37,6 +38,9 @@ function CartScreen(): React.JSX.Element { const {present, preload} = useShopifyCheckout(); const isFocused = useIsFocused(); const [refreshing, setRefreshing] = React.useState(false); + const [preloadState, setPreloadState] = React.useState({ + type: 'idle', + }); const { cartId, checkoutURL, @@ -91,10 +95,17 @@ function CartScreen(): React.JSX.Element { !checkoutURL || totalQuantity === 0 ) { + setPreloadState({type: 'idle'}); return; } - preload(checkoutURL); + const subscription = preload(checkoutURL, { + onStateChange: setPreloadState, + }); + + // Each call observes one preload request. Stop observing it when the cart + // changes or leaves focus; this does not invalidate the preloaded checkout. + return () => subscription?.remove(); }, [ preload, isFocused, @@ -239,6 +250,14 @@ function CartScreen(): React.JSX.Element { + {appConfig.checkoutPreloadingEnabled && ( + + Checkout preload: {formatPreloadState(preloadState)} + + )} + {/* Empty wallets, should not render anything */}