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