From 824dceb8141c0c566455230b8705e2d6d734f481 Mon Sep 17 00:00:00 2001
From: Ilya Zayats <somebody32@gmail.com>
Date: Thu, 5 Aug 2021 16:45:43 +0200
Subject: [PATCH] fixes backdrop flash when content height is increasing

---
 .../BottomSheetBackdrop.tsx                   | 55 ++++++++++++++++---
 1 file changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
index 479cabd5c..bf858ea05 100644
--- a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
+++ b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
@@ -5,10 +5,13 @@ import Animated, {
   block,
   call,
   cond,
+  diff,
   eq,
   Extrapolate,
+  lessThan,
   neq,
   not,
+  proc,
   set,
   useCode,
 } from 'react-native-reanimated';
@@ -30,6 +33,15 @@ const {
   interpolateNode: interpolateV2,
 } = require('react-native-reanimated');
 const interpolate = interpolateV2 || interpolateV1;
+const interpolateOpacity = proc(
+  (animatedIndex, disappearsOnIndex, appearsOnIndex, opacity) => {
+    return interpolate(animatedIndex, {
+      inputRange: [disappearsOnIndex, appearsOnIndex],
+      outputRange: [0, opacity],
+      extrapolate: Extrapolate.CLAMP,
+    });
+  }
+);
 
 const AnimatedTouchableWithoutFeedback = Animated.createAnimatedComponent(
   TouchableWithoutFeedback
@@ -64,15 +76,40 @@ const BottomSheetBackdropComponent = ({
   const isTouchable = useReactiveValue(
     syntheticPressBehavior !== 'none' ? 1 : 0
   );
-  const animatedOpacity = useMemo(
-    () =>
-      interpolate(animatedIndex, {
-        inputRange: [disappearsOnIndex, appearsOnIndex],
-        outputRange: [0, opacity],
-        extrapolate: Extrapolate.CLAMP,
-      }),
-    [animatedIndex, opacity, appearsOnIndex, disappearsOnIndex]
-  );
+  const gotToMaxIndex = useReactiveValue(0);
+  const animatedOpacity = useMemo(() => {
+    return block([
+      cond([eq(animatedIndex, appearsOnIndex)], [set(gotToMaxIndex, 1)]),
+      cond(
+        [eq(gotToMaxIndex, 1)],
+        cond(
+          [lessThan(diff(animatedIndex), 0)],
+          [
+            set(gotToMaxIndex, 0),
+            interpolateOpacity(
+              animatedIndex,
+              disappearsOnIndex,
+              appearsOnIndex,
+              opacity
+            ),
+          ],
+          opacity
+        ),
+        interpolateOpacity(
+          animatedIndex,
+          disappearsOnIndex,
+          appearsOnIndex,
+          opacity
+        )
+      ),
+    ]);
+  }, [
+    animatedIndex,
+    gotToMaxIndex,
+    disappearsOnIndex,
+    appearsOnIndex,
+    opacity,
+  ]);
   //#endregion
 
   //#region styles