Repository navigation
Fix AcceleratedCheckoutButtons touch area in bounded-height parents - #548
Draft
kyle-schellen wants to merge 1 commit into
Draft
kyle-schellen wants to merge 1 commit into
kyle-schellen wants to merge 1 commit into
Conversation
Coverage Report
|
`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.
kyle-schellen
force-pushed
the
ks/accelerated-checkout-buttons-height
branch
from
October 20, 2026 23:37
962fc21 to
17d07ed
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changes are you making?
AcceleratedCheckoutButtonscan end up with a touch area smaller than the buttons it draws, so taps near the top or bottom edge of the buttons do nothing.The native view reports its height (48 pt per wallet, plus 8 pt between wallets), and the component applies it as
height. It also appliedflex: 1, which 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 ofheight. For example, aViewwith onlyminHeight: 48outside aScrollViewdoes this. The view ends up shorter than the buttons, and touches outside it never reach them.This replaces
flex: 1withflexGrow: 1, so the view is sized from the reportedheightand matches the buttons.Review focus
flexGrow: 1is what keeps the buttons full width in aflexDirection: 'row'parent. Without any flex style, they collapse to zero width there.How to test
On an iOS 16+ simulator, with an item in the cart:
sample/src/screens/CartScreen.tsx, move the Apple Pay and Shop PayAcceleratedCheckoutButtonsbelow theScrollViewand wrap them in aViewwithstyle={{minHeight: 48}}. Show the wrapper'sonLayoutheight and anonTouchStartcount on screen.main, the wrapper is 48 tall and neither tap is counted.{flexDirection: 'row'}. With this change, the buttons are full width and both taps are counted.The existing height test expects
flexGrow: 1, and fails againstmain.I ran
pnpm test(123 passed),pnpm module lintandpnpm sample lint, plus the steps above on iOS 18.6 and iOS 26.2 simulators.PR Checklist
Important
Releasing a new version of the kit?
package.jsonfile.