fix(nav): tab bar hitSlop + pointerEvents on inner badge

Touch targets on the bottom tabs were too small near the top edge of the
bar, making it easy to miss the tap when reaching for an icon. Add
hitSlop on the Pressable and pointerEvents="none" on the active-state
badge so taps always land on the parent button.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yanis 2026-05-01 11:31:27 +02:00
parent 086de7c05c
commit 4d9c1a0a28

View file

@ -69,6 +69,7 @@ function MyCustomTabBar({ state, descriptors, navigation }: any) {
activeOpacity={0.8} activeOpacity={0.8}
accessibilityRole="button" accessibilityRole="button"
accessibilityLabel={label} accessibilityLabel={label}
hitSlop={{ top: 50, bottom: 0, left: 12, right: 12 }}
style={{ style={{
flex: 1, flex: 1,
alignItems: "center", alignItems: "center",
@ -78,6 +79,7 @@ function MyCustomTabBar({ state, descriptors, navigation }: any) {
}} }}
> >
<View <View
pointerEvents="none"
style={{ style={{
position: "absolute", position: "absolute",
bottom: 18, bottom: 18,