Merge pull request #27850 from bernhardoj/fix/27396-stacked-avatar-tr…

…ansparent

Fix stacked avatar is transparent when long press on Android

src/components/LHNOptionsList/OptionRowLHN.js

@@ -177,6 +177,7 @@ function OptionRowLHN(props) {
                         ]}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         accessibilityLabel={translate('accessibilityHints.navigatesToChat')}
+                        needsOffscreenAlphaCompositing={props.optionItem.icons.length >= 2}
                     >
                         <View style={sidebarInnerRowStyle}>
                             <View style={[styles.flexRow, styles.alignItemsCenter]}>

src/components/OpacityView.js

@@ -3,6 +3,7 @@ import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-nati
 import PropTypes from 'prop-types';
 import variables from '../styles/variables';
 import * as StyleUtils from '../styles/StyleUtils';
+import shouldRenderOffscreen from '../libs/shouldRenderOffscreen';
 
 const propTypes = {
     /**
@@ -27,11 +28,15 @@ const propTypes = {
      * @default 0.5
      */
     dimmingValue: PropTypes.number,
+
+    /** Whether the view needs to be rendered offscreen (for Android only) */
+    needsOffscreenAlphaCompositing: PropTypes.bool,
 };
 
 const defaultProps = {
     style: [],
     dimmingValue: variables.hoverDimValue,
+    needsOffscreenAlphaCompositing: false,
 };
 
 function OpacityView(props) {
@@ -48,7 +53,14 @@ function OpacityView(props) {
         }
     }, [props.shouldDim, props.dimmingValue, opacity]);
 
-    return <Animated.View style={[opacityStyle, ...StyleUtils.parseStyleAsArray(props.style)]}>{props.children}</Animated.View>;
+    return (
+        <Animated.View
+            style={[opacityStyle, ...StyleUtils.parseStyleAsArray(props.style)]}
+            needsOffscreenAlphaCompositing={shouldRenderOffscreen ? props.needsOffscreenAlphaCompositing : undefined}
+        >
+            {props.children}
+        </Animated.View>
+    );
 }
 
 OpacityView.displayName = 'OpacityView';

src/components/OptionRow.js

@@ -212,6 +212,7 @@ class OptionRow extends Component {
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                             hoverDimmingValue={1}
                             hoverStyle={this.props.hoverStyle}
+                            needsOffscreenAlphaCompositing={this.props.option.icons.length >= 2}
                         >
                             <View style={sidebarInnerRowStyle}>
                                 <View style={[styles.flexRow, styles.alignItemsCenter]}>

src/components/Pressable/PressableWithFeedback.js

@@ -7,7 +7,7 @@ import OpacityView from '../OpacityView';
 import variables from '../../styles/variables';
 import useSingleExecution from '../../hooks/useSingleExecution';
 
-const omittedProps = ['wrapperStyle'];
+const omittedProps = ['wrapperStyle', 'needsOffscreenAlphaCompositing'];
 
 const PressableWithFeedbackPropTypes = {
     ...GenericPressablePropTypes.pressablePropTypes,
@@ -27,6 +27,9 @@ const PressableWithFeedbackPropTypes = {
      *  Used to locate this view from native classes.
      */
     nativeID: propTypes.string,
+
+    /** Whether the view needs to be rendered offscreen (for Android only) */
+    needsOffscreenAlphaCompositing: propTypes.bool,
 };
 
 const PressableWithFeedbackDefaultProps = {
@@ -35,10 +38,11 @@ const PressableWithFeedbackDefaultProps = {
     hoverDimmingValue: variables.hoverDimValue,
     nativeID: '',
     wrapperStyle: [],
+    needsOffscreenAlphaCompositing: false,
 };
 
 const PressableWithFeedback = forwardRef((props, ref) => {
-    const propsWithoutWrapperStyles = _.omit(props, omittedProps);
+    const propsWithoutWrapperProps = _.omit(props, omittedProps);
     const {isExecuting, singleExecution} = useSingleExecution();
     const [isPressed, setIsPressed] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
@@ -49,11 +53,12 @@ const PressableWithFeedback = forwardRef((props, ref) => {
             shouldDim={Boolean(!isDisabled && (isPressed || isHovered))}
             dimmingValue={isPressed ? props.pressDimmingValue : props.hoverDimmingValue}
             style={props.wrapperStyle}
+            needsOffscreenAlphaCompositing={props.needsOffscreenAlphaCompositing}
         >
             <GenericPressable
                 ref={ref}
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...propsWithoutWrapperStyles}
+                {...propsWithoutWrapperProps}
                 disabled={isDisabled}
                 isExecuting={isExecuting}
                 onHoverIn={() => {

src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js

@@ -48,6 +48,9 @@ const propTypes = {
 
     /** Used to apply styles to the Pressable */
     style: stylePropTypes,
+
+    /** Whether the view needs to be rendered offscreen (for Android only) */
+    needsOffscreenAlphaCompositing: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -59,6 +62,7 @@ const defaultProps = {
     withoutFocusOnSecondaryInteraction: false,
     activeOpacity: 1,
     enableLongPressWithHover: false,
+    needsOffscreenAlphaCompositing: false,
 };
 
 export {propTypes, defaultProps};