Back button Android Ripple effect is not showing up on react-navigation 6

[hsjoberg]

Current behavior

The Android Ripple effect is not showing up when pressing the back button on react-navigation 6.

I suppose this is a bug and I've somewhat tracked it down, although I'm not experienced enough in react-navigation to fix it.

react-navigation/packages/elements/src/Header/HeaderBackButton.tsx

Lines 146 to 160 in 3aab9fd

	<PlatformPressable
	disabled={disabled}
	accessible
	accessibilityRole="button"
	accessibilityLabel={accessibilityLabel}
	testID={testID}
	onPress={disabled ? undefined : handlePress}
	pressColor={pressColor}
	pressOpacity={pressOpacity}
	android_ripple={{ borderless: true }}
	style={[styles.container, disabled && styles.disabled, style]}
	hitSlop={Platform.select({
	ios: undefined,
	default: { top: 16, right: 16, bottom: 16, left: 16 },
	})}

react-navigation/packages/elements/src/PlatformPressable.tsx

Lines 66 to 84 in 3aab9fd

	<AnimatedPressable
	onPressIn={handlePressIn}
	onPressOut={handlePressOut}
	android_ripple={
	ANDROID_SUPPORTS_RIPPLE
	? {
	color:
	pressColor !== undefined
	? pressColor
	: dark
	? 'rgba(255, 255, 255, .32)'
	: 'rgba(0, 0, 0, .32)',
	...android_ripple,
	}
	: undefined
	}
	style={[{ opacity: !ANDROID_SUPPORTS_RIPPLE ? opacity : 1 }, style]}
	{...rest}
	/>

Removing borderless: true makes it show up, but as a square. It looks like radius is missing or something.

I guess there is a reason, but why not just use react-native's TouchableNativeFeedback?
https://github.com/hsjoberg/blixt-wallet/blob/e1a689f5d8b9ddfc2950aec205b71748065acb64/src/components/NavigationButton.tsx

Expected behavior

Ripple effect should show up on supported Android devices.

Reproduction

https://github.com/hsjoberg/react-navigation-back

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack

Environment

package	version
@react-navigation/native	6.0.1
@react-navigation/stack	6.0.1
react-native-safe-area-context	3.2.0
react-native-screens	3.5.0
react-native-gesture-handler	1.10.3
react-native-reanimated	2.2.0
react-native	0.64.2
node	15.10.0
npm or yarn	npm

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.0.1, latest: 6.0.2)
• @react-navigation/stack (found: 6.0.1, latest: 6.0.3)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[SergioAN007]

Issue still exists

Packages:
"@react-navigation/drawer": "^6.1.8",
"@react-navigation/elements": "^1.2.1",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",
"react-native": "^0.66.2",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.9.0",

[hsjoberg]

Can confirm.
The code is still buggy, preventing the ripple effect to play out correctly.

[gaodeng]

any news? @satya164

[JerakRus]

Это до сих пор не поправлено ?

[diegolmello]

The same issue is going to happen if you use PlatformPressable with borderless: true to render header right buttons.
I could pinpoint the issue to the header background, which is an absolute positioned view

react-navigation/packages/elements/src/Header/Header.tsx

Line 225 in e662465

<HeaderBackground style={backgroundStyle} />

That also happens outside react-navigation.

Relevant to:

• fix: allow HeaderBackground's subViews to be touchable #8317