Merge pull request #15736 from bernhardoj/fix/15283

fix avatar border opacity
Expensify · Mar 20, 2023 · 80ad413 · 80ad413
2 parents a6b3a22 + e4be18d
commit 80ad413
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 3 deletions.
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
@@ -13,6 +13,7 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as StyleUtils from '../styles/StyleUtils';
 import DotIndicatorMessage from './DotIndicatorMessage';
+import shouldRenderOffscreen from '../libs/shouldRenderOffscreen';
 
 /**
  * This component should be used when we are using the offline pattern B (offline with feedback).
@@ -97,7 +98,14 @@ const OfflineWithFeedback = (props) => {
     return (
         <View style={props.style}>
             {!hideChildren && (
-                <View style={[needsOpacity ? styles.offlineFeedback.pending : {}, props.contentContainerStyle]}>
+                <View
+                    style={[needsOpacity ? styles.offlineFeedback.pending : {}, props.contentContainerStyle]}
+                    needsOffscreenAlphaCompositing={
+                        shouldRenderOffscreen
+                            ? (needsOpacity && props.needsOffscreenAlphaCompositing)
+                            : undefined
+                    }
+                >
                     {children}
                 </View>
             )}

diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
@@ -176,7 +176,7 @@ const IOUPreview = (props) => {
             onPressOut={() => ControlSelection.unblock()}
             onLongPress={showContextMenu}
         >
-            <View style={[styles.iouPreviewBox, ...props.containerStyles]}>
+            <View>
                 <OfflineWithFeedback
                     pendingAction={props.pendingAction}
                     errors={props.walletTerms.errors}
@@ -185,8 +185,9 @@ const IOUPreview = (props) => {
                         Report.clearIOUError(props.chatReportID);
                     }}
                     errorRowStyles={[styles.mbn1]}
+                    needsOffscreenAlphaCompositing
                 >
-                    <View>
+                    <View style={[styles.iouPreviewBox, ...props.containerStyles]}>
                         <View style={[styles.flexRow]}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                 <Text style={styles.h1}>

diff --git a/src/libs/shouldRenderOffscreen/index.android.js b/src/libs/shouldRenderOffscreen/index.android.js
@@ -0,0 +1,2 @@
+// Rendering offscreen on Android allows it to apply opacity to stacked components correctly.
+export default true;
diff --git a/src/libs/shouldRenderOffscreen/index.js b/src/libs/shouldRenderOffscreen/index.js
@@ -0,0 +1 @@
+export default false;
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -263,6 +263,7 @@ class ReportActionItem extends Component {
                                     pendingAction={this.props.draftMessage ? null : this.props.action.pendingAction}
                                     errors={this.props.action.errors}
                                     errorRowStyles={[styles.ml10, styles.mr2]}
+                                    needsOffscreenAlphaCompositing={this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU}
                                 >
                                     {!this.props.displayAsGroup
                                         ? (
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Rendering offscreen on Android allows it to apply opacity to stacked components correctly.
		export default true;