Skip to content

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

Closed
#11386
Closed
Back button Android Ripple effect is not showing up on react-navigation 6#9794
#11386
Labels
bugpackage:stackplatform:androidrepro provided
@hsjoberg

Description

@hsjoberg
hsjoberg
opened on Aug 6, 2021

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugpackage:stackplatform:androidrepro provided

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions