Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
cristianrosu opened this issue Jan 4, 2024 · 8 comments

Comments

@cristianrosu
Copy link

cristianrosu commented Jan 4, 2024

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
Copy link

wkirby commented Jan 19, 2024

Same

@Tonisg91
Copy link

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

@unnft
Copy link

unnft commented Jan 26, 2024

Same here

@mireiarullmasdeu
Copy link

Facing the same issue after upgrading to RN 0.73.2

@andshonia
Copy link

Any solution?

@Tonisg91
Copy link

Tonisg91 commented Jan 30, 2024

Any solution?

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

@marcin-spotio
Copy link

marcin-spotio commented Feb 9, 2024

@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.

@Rolozuna
Copy link

Rolozuna commented Feb 9, 2024

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants