Small issue with panGestureAnimatedValue

Describe the bug When I use the prop “panGestureAnimatedValue” to animate a pitch black background from 1 to 0 doing this quickly after the modal opened, it looks like that animated value is set too late. I have attached a video to demonstrate the issue. If I wait a second before I drag down, everything is fine but when I start dragging instantly there is a issue. Things getting worse when there is a scale animation (which I’ve disabled for now).

I tried to write the value like in your example using a useRef and also tried to use a plain let for it. It didn’t change anything. You can see, that the value is missing sometimes for a second.

Reproduce https://streamable.com/ojmrvt

Dependencies:

• react-native-modalize 2.0.3
• react-native: EXPO SDK 37
• react-native-gesture-handler: EXPO SDK 37
• expo/react-navigation/react-native-navigation: [e.g. expo@37.0.11]

[lukeramsden]

@jeremybarbet I’ve done some debugging and I believe it is this block that is causing the issue:

    if (panGestureAnimatedValue && (alwaysOpenValue || snapPoint)) {
      toPanValue = 0;
    } else if (
      panGestureAnimatedValue &&
      !alwaysOpenValue &&
      (dest === 'top' || dest === 'default')
    ) {
      toPanValue = 1;
    }

Setting toPanValue to 1 in the first block fixes this specific issue. I haven’t had enough time to grasp what exactly this code is doing so I don’t know if that would break other things, but it fixes it for me (I’m also using alwaysOpen).

diff --git a/node_modules/react-native-modalize/lib/index.js b/node_modules/react-native-modalize/lib/index.js
index 2ff4332..f978cc2 100644
--- a/node_modules/react-native-modalize/lib/index.js
+++ b/node_modules/react-native-modalize/lib/index.js
@@ -159,7 +159,11 @@ onOpen, onOpened, onClose, onClosed, onBackButtonPress, onPositionChange, onOver
             toValue = (modalHeightValue || 0) - snapPoint;
         }
         if (panGestureAnimatedValue && (alwaysOpenValue || snapPoint)) {
-            toPanValue = 0;
+            if(dest === 'top') {
+                toPanValue = 1;
+            } else {
+                toPanValue = 0;
+            }
         }
         else if (panGestureAnimatedValue &&
             !alwaysOpenValue &&

Is this a valid solution?

[hirbod]

ping @jeremybarbet