[RNMobile] Add ripple effect to BottomSheet cells on Android (#22169)

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 (
-			<TouchableOpacity
+			<TouchableRipple
 				accessible={
 					accessible !== undefined
 						? accessible
@@ -300,6 +302,7 @@ class BottomSheetCell extends Component {
 				activeOpacity={ opacity }
 				onPress={ onCellPress }
 				style={ [ styles.clipToBounds, style ] }
+				borderless={ borderless }
 			>
 				{ drawTopSeparator && <View style={ separatorStyle() } /> }
 				<View
@@ -348,7 +351,7 @@ class BottomSheetCell extends Component {
 					{ children }
 				</View>
 				{ ! drawTopSeparator && <View style={ separatorStyle() } /> }
-			</TouchableOpacity>
+			</TouchableRipple>
 		);
 	}
 }

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 (
+			<TouchableNativeFeedback
+				{ ...touchableProps }
+				onPress={ onPress }
+				disabled={ disabled }
+				useForeground={ useForeground }
+				background={ TouchableNativeFeedback.Ripple(
+					rippleColor,
+					borderless
+				) }
+			>
+				<View style={ [ borderless && rippleStyles.overflow, style ] }>
+					{ children }
+				</View>
+			</TouchableNativeFeedback>
+		);
+	}
+
+	return (
+		<TouchableOpacity
+			{ ...touchableProps }
+			onPress={ onPress }
+			disabled={ disabled }
+			activeOpacity={ activeOpacity }
+			style={ style }
+		>
+			{ children }
+		</TouchableOpacity>
+	);
+};
+
+export default withPreferredColorScheme( TouchableRipple );

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;
+}