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

[cristianrosu]

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]

Same

[Tonisg91]

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

[unnft]

Same here

[mireiarullmasdeu]

Facing the same issue after upgrading to RN 0.73.2

[andshonia]

Any solution?

[Tonisg91]

Any solution?

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

[marcin-spotio]

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

@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

[alainib]

@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

[gmkhussain]

Use useState for resolve this issue, see example code

React Native version: 0.74

import React, { useRef, useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Modalize } from 'react-native-modalize';

const App = () => {

  const modalRef = useRef(null);
  const [showModal, setShowModal] = useState(false);

  const openModal = () => {
    setShowModal(false);
    setTimeout(() => {
      setShowModal(true);
         modalRef.current?.open();
      }, 10);
  };

  const handleClose = () => {
    modalRef.current?.close();
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <Button title="🚀 Open Modal" onPress={openModal} />

        {showModal && (
          <Modalize
            ref={modalRef}
            modalHeight={500}
            onClosed={() => setShowModal(false)}
            withHandle
          >
            <View style={styles.modalContent}>
              <Text style={styles.modalText}>👋 Hello from Modalize!</Text>
              <Button title="Close" onPress={handleClose} />
            </View>
          </Modalize>
        )}
      </View>
    </GestureHandlerRootView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#fff',
  },
  modalContent: {
    height: '100%',
    padding: 24,
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalText: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
});