Small issue with panGestureAnimatedValue

[hirbod]

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. [email protected]]

[jeremybarbet]

Hi,

Good catch!

First, the overlay opacity should be handled in the core and you shouldn't have to do it by yourself. But the issue you got would apply for any animation. I will try to take a look at it when I have some time.

[hirbod]

Hi @jeremybarbet the overlay opacity is handled in the core but not animated based on pan (it gets faded out when it's closed). Thats why I did that on my own (which is totally fine, since I am running my modal "withOverlay={false}" anyway. But as you said, the error happens whenever you try to rely on the "panGestureAnimatedValue". Thats why I removed my scale animation, because that glitched too heavy. I can live with the modal glitch for now (even though its burning in my chest :D).

[hirbod]

Maybe this is also helpful for you

{isModalOpen && (
        <Portal>
          <Animated.View
            style={{
              ...StyleSheet.absoluteFillObject,
              backgroundColor: "black",
              opacity: animated.interpolate({
                inputRange: [0, 0.8, 1],
                outputRange: [0, 0.5, 1],
              }),
            }}
          />
          <Modalize
            ref={modalRef}
            modalHeight={Dimensions.get("window").height}
            panGestureAnimatedValue={animated}
            withHandle={false}
            onClosed={onModalizeClosed}
            onOpened={onModalizeOpened}
            modalStyle={{ backgroundColor: "transparent", elevation: 0 }}
            withOverlay={false}
            scrollViewProps={{
              showsVerticalScrollIndicator: false,
              scrollEnabled: false,
              contentContainerStyle: { flex: 1 },
              showsHorizontalScrollIndicator: false,
              alwaysBounceVertical: false,
            }}
          >
            <Stories
              innerRef={innerRef}
              modalRef={modalRef}
              footerComponent={footerComponent}
              stories={stories}
              navigation={navigation}
              index={selectedIndex}
            />
          </Modalize>
        </Portal>
      )}

And I know, its not perfect passing down a ref to a child, I should forwardRef or something

[hirbod]

@jeremybarbet did you manage to have look at this issue? Would be lovely to get this resolved.

[jeremybarbet]

Hi @Hirbod, it's on my radar and I will try to tackle it when I have some time.

[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?

[ang-minkyii]

@jeremybarbet any update on this? Having the same issue.

[hirbod]

ping @jeremybarbet