From 17d07edfb8aea6c5b2c023f7503f168c22b38af4 Mon Sep 17 00:00:00 2001 From: Kyle Schellen Date: Tue, 20 Oct 2026 19:24:29 -0400 Subject: [PATCH] Fix AcceleratedCheckoutButtons touch area in bounded-height parents `flex: 1` gives the view a flex basis of 0. When the parent's height is bounded, React Native lays the view out from that basis instead of the height reported by the native view, so the view is shorter than the buttons it draws and taps outside it are dropped. Use `flexGrow: 1` so the view is sized from the reported height while still filling row and taller parents. --- .../src/components/AcceleratedCheckoutButtons.tsx | 2 +- .../tests/AcceleratedCheckoutButtons.test.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx b/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx index 782af21e..285595eb 100644 --- a/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx +++ b/modules/@shopify/checkout-sheet-kit/src/components/AcceleratedCheckoutButtons.tsx @@ -178,7 +178,7 @@ export type AcceleratedCheckoutButtonsProps = (CartProps | VariantProps) & * /> */ -const defaultStyles = {flex: 1}; +const defaultStyles = {flexGrow: 1}; export const AcceleratedCheckoutButtons: React.FC< AcceleratedCheckoutButtonsProps diff --git a/modules/@shopify/checkout-sheet-kit/tests/AcceleratedCheckoutButtons.test.tsx b/modules/@shopify/checkout-sheet-kit/tests/AcceleratedCheckoutButtons.test.tsx index 35d2fa2e..54830007 100644 --- a/modules/@shopify/checkout-sheet-kit/tests/AcceleratedCheckoutButtons.test.tsx +++ b/modules/@shopify/checkout-sheet-kit/tests/AcceleratedCheckoutButtons.test.tsx @@ -300,7 +300,7 @@ describe('AcceleratedCheckoutButtons', () => { }); nativeComponent = getByTestId('accelerated-checkout-buttons'); expect(nativeComponent.props.style).toEqual({ - flex: 1, + flexGrow: 1, height: 42, }); });