From bc58d7d038041f15daf21ed1d9ae30b0cac624de Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Mar 2023 07:54:51 -0800
Subject: [PATCH 1/3] fix avatar border opacity

---
 src/components/OfflineWithFeedback.js           | 6 +++++-
 src/components/ReportActionItem/IOUPreview.js   | 5 +++--
 src/libs/shouldRenderOffscreen/index.android.js | 2 ++
 src/libs/shouldRenderOffscreen/index.js         | 1 +
 src/pages/home/report/ReportActionItem.js       | 1 +
 5 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 src/libs/shouldRenderOffscreen/index.android.js
 create mode 100644 src/libs/shouldRenderOffscreen/index.js

diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index 64ce8b62170e..b91e470d95d6 100644
--- 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,10 @@ 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}
+                >
                     {children}
                 </View>
             )}
diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index 35105f13a9ad..0ced46a02ce7 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -168,7 +168,7 @@ const IOUPreview = (props) => {
             onPressOut={() => ControlSelection.unblock()}
             onLongPress={showContextMenu}
         >
-            <View style={[styles.iouPreviewBox, ...props.containerStyles]}>
+            <View>
                 <OfflineWithFeedback
                     pendingAction={props.pendingAction}
                     errors={props.walletTerms.errors}
@@ -177,8 +177,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
new file mode 100644
index 000000000000..af9756ca0de4
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/libs/shouldRenderOffscreen/index.js b/src/libs/shouldRenderOffscreen/index.js
new file mode 100644
index 000000000000..539b694686c1
--- /dev/null
+++ b/src/libs/shouldRenderOffscreen/index.js
@@ -0,0 +1 @@
+export default false;
\ No newline at end of file
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index fba00b0c1f8a..d51f14c71d38 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -238,6 +238,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
                                         ? (

From dbe97eb528aa20d22346bb5d336766992ef07a02 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 7 Mar 2023 18:30:33 -0800
Subject: [PATCH 2/3] fix lint

---
 src/components/OfflineWithFeedback.js           | 2 +-
 src/libs/shouldRenderOffscreen/index.android.js | 2 +-
 src/libs/shouldRenderOffscreen/index.js         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index b91e470d95d6..be036732fe9c 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -98,7 +98,7 @@ const OfflineWithFeedback = (props) => {
     return (
         <View style={props.style}>
             {!hideChildren && (
-                <View 
+                <View
                     style={[needsOpacity ? styles.offlineFeedback.pending : {}, props.contentContainerStyle]}
                     needsOffscreenAlphaCompositing={shouldRenderOffscreen && needsOpacity && props.needsOffscreenAlphaCompositing}
                 >
diff --git a/src/libs/shouldRenderOffscreen/index.android.js b/src/libs/shouldRenderOffscreen/index.android.js
index af9756ca0de4..c91ffa15894d 100644
--- a/src/libs/shouldRenderOffscreen/index.android.js
+++ b/src/libs/shouldRenderOffscreen/index.android.js
@@ -1,2 +1,2 @@
 // Rendering offscreen on Android allows it to apply opacity to stacked components correctly.
-export default true;
\ No newline at end of file
+export default true;
diff --git a/src/libs/shouldRenderOffscreen/index.js b/src/libs/shouldRenderOffscreen/index.js
index 539b694686c1..33136544dba2 100644
--- a/src/libs/shouldRenderOffscreen/index.js
+++ b/src/libs/shouldRenderOffscreen/index.js
@@ -1 +1 @@
-export default false;
\ No newline at end of file
+export default false;

From e4be18d1d18250123c026661c938c54fe276e96c Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 11 Mar 2023 05:17:51 -0800
Subject: [PATCH 3/3] set to undefined for non android

---
 src/components/OfflineWithFeedback.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index be036732fe9c..a4919f2cb406 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -100,7 +100,11 @@ const OfflineWithFeedback = (props) => {
             {!hideChildren && (
                 <View
                     style={[needsOpacity ? styles.offlineFeedback.pending : {}, props.contentContainerStyle]}
-                    needsOffscreenAlphaCompositing={shouldRenderOffscreen && needsOpacity && props.needsOffscreenAlphaCompositing}
+                    needsOffscreenAlphaCompositing={
+                        shouldRenderOffscreen
+                            ? (needsOpacity && props.needsOffscreenAlphaCompositing)
+                            : undefined
+                    }
                 >
                     {children}
                 </View>