jeremybarbet/react-native-modalize

Modal Jumping height after opening if I'm closing it with pan gesture

cristianrosu opened this issue · 9 comments

cristianrosu commented

When I close the modal with a swipe-down pan gesture, if I open it again, right after opening, it "jumps" height to a random value. If I close the modal programatically using ref.current?.close(), opening it again performs as expected.

This reproduces no matter what props I use or not (headerComponent, adjustToContentHeight, modalHeight, snapPoint ). It also does not matter if I have anything inside the modal.

This happens on both IOS & Android

  • Create a demo on https://snack.expo.io to reproduce the issue.
  • Add gif screenshots to help explain your issue.

Dependencies

  • react-native-modalize: ^2.1.1
  • react-native: 0.73
  • react-native-gesture-handler: 2.14.0
  • @react-navigation/bottom-tabs: ^6.5.11
  • @react-navigation/native: ^6.1.9
  • @react-navigation/native-stack: ^6.9.17
wkirby commented

Same

  • 👍1
Tonisg91 commented

Same problem here with RN 0.73.2 and React native modalize ^2.1.1

  • 👍2
unnft commented

Same here

mireiarullmasdeu commented

Facing the same issue after upgrading to RN 0.73.2

andshonia commented

Any solution?

Tonisg91 commented

Any solution?

I had to change the package to https://github.com/gorhom/react-native-bottom-sheet

marcin-spotio commented

@cristianrosu

actually it's not a random value. It's the dragY value where you finished pan gesture. It is supposed to be reset in handleAnimateClose (Animated finish callback) but in newer versions of RN it's overriden down the road.
A simple solution or a workaround: Add dragY.setValue(0) at the beginning of handleAnimateOpen method.

  • 👍6
  • 🎉3
Rolozuna commented

@cristianrosu

actually it's not a random value. It's the dragY value where you finished pan gesture. It is supposed to be reset in handleAnimateClose (Animated finish callback) but in newer versions of RN it's overriden down the road. A simple solution or a workaround: Add dragY.setValue(0) at the beginning of handleAnimateOpen method.

It works, thank you!

diff --git a/node_modules/react-native-modalize/lib/index.js b/node_modules/react-native-modalize/lib/index.js
index 5d5edac..d7c88c3 100644
--- a/node_modules/react-native-modalize/lib/index.js
+++ b/node_modules/react-native-modalize/lib/index.js
@@ -147,6 +147,7 @@ onOpen, onOpened, onClose, onClosed, onBackButtonPress, onPositionChange, onOver
         setKeyboardHeight(0);
     };
     const handleAnimateOpen = (alwaysOpenValue, dest = 'default') => {
+        dragY.setValue(0)
         const { timing, spring } = openAnimationConfig;
         backButtonListenerRef.current = react_native_1.BackHandler.addEventListener('hardwareBackPress', handleBackPress);
         let toValue = 0;
         ```diff
  • 👍7
  • 🎉5
  • ❤️2
alainib commented

@Tonisg91 did you make gorhom package to work with react native 0.74 (or 73) ? my app crash on build ( not in dev mode ) when i install reanimated. did't found a working package number with react 74 and bottomsheeet & reanimated. thanks