diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
index 7514c208efe157..cf89a2b2dacfc7 100644
--- a/packages/components/src/mobile/bottom-sheet/cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -25,6 +25,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
*/
import styles from './styles.scss';
import platformStyles from './cellStyles.scss';
+import TouchableRipple from './ripple.native.js';
class BottomSheetCell extends Component {
constructor( props ) {
@@ -110,6 +111,7 @@ class BottomSheetCell extends Component {
customActionButton,
type,
step,
+ borderless,
...valueProps
} = this.props;
@@ -282,7 +284,7 @@ class BottomSheetCell extends Component {
: get( platformStyles, 'activeOpacity.opacity' );
return (
-
{ drawTopSeparator && }
{ ! drawTopSeparator && }
-
+
);
}
}
diff --git a/packages/components/src/mobile/bottom-sheet/ripple.native.js b/packages/components/src/mobile/bottom-sheet/ripple.native.js
new file mode 100644
index 00000000000000..5eda8f682c1d1f
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/ripple.native.js
@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import {
+ Platform,
+ TouchableOpacity,
+ TouchableNativeFeedback,
+ View,
+} from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { withPreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import rippleStyles from './ripple.native.scss';
+
+const ANDROID_VERSION_LOLLIPOP = 21;
+const ANDROID_VERSION_PIE = 28;
+
+const TouchableRipple = ( {
+ style,
+ onPress,
+ disabled: disabledProp,
+ children,
+ activeOpacity,
+ getStylesFromColorScheme,
+ borderless = false,
+ ...touchableProps
+} ) => {
+ const isTouchableNativeSupported =
+ Platform.OS === 'android' &&
+ Platform.Version >= ANDROID_VERSION_LOLLIPOP;
+
+ const disabled = disabledProp || ! onPress;
+ const rippleColor = getStylesFromColorScheme(
+ rippleStyles.ripple,
+ rippleStyles.rippleDark
+ ).backgroundColor;
+
+ if ( isTouchableNativeSupported ) {
+ // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
+ // https://github.com/facebook/react-native/issues/6480
+ const useForeground =
+ Platform.OS === 'android' &&
+ Platform.Version >= ANDROID_VERSION_PIE &&
+ borderless;
+
+ return (
+
+
+ { children }
+
+
+ );
+ }
+
+ return (
+
+ { children }
+
+ );
+};
+
+export default withPreferredColorScheme( TouchableRipple );
diff --git a/packages/components/src/mobile/bottom-sheet/ripple.native.scss b/packages/components/src/mobile/bottom-sheet/ripple.native.scss
new file mode 100644
index 00000000000000..710950093fdcea
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/ripple.native.scss
@@ -0,0 +1,11 @@
+.ripple {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+
+.rippleDark {
+ background-color: rgba(255, 255, 255, 0.2);
+}
+
+.overflow {
+ overflow: hidden;
+}