Cannot reopen modal
See original GitHub issueBug
When we have 2 bottom sheet modals in replace-mode, and you try to close both at the same time. The first modal cannot be reopened.
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | 3.3.3 |
react-native | 0.63.4 |
react-native-reanimated | 2.0.0 |
react-native-gesture-handler | 1.10.3 |
Steps To Reproduce
- Implement 2 bottom sheet modal
modal1
must openmodal2
- The action on
modal2
is to close bothmodal1
andmodal2
- Open
modal1
- Open
modal2
- Close both
modal1
andmodal2
frommodal2
- Try to open
modal1
(cannot be opened).
Describe what you expected to happen:
modal1
should open
Reproducible sample code
import React, { useRef } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { BottomSheetModal } from '@gorhom/bottom-sheet';
const snap_points = ['20%'];
function MyComp() {
const bottom_sheet_modal1_ref = useRef(null);
const bottom_sheet_modal2_ref = useRef(null);
const open_modal1 = () => {
bottom_sheet_modal1_ref.current.present();
};
const open_modal2 = () => {
bottom_sheet_modal2_ref.current.present();
};
const close_both_modals = () => {
bottom_sheet_modal2_ref.current.dismiss();
bottom_sheet_modal1_ref.current.dismiss();
};
return (
<>
<TouchableOpacity onPress={open_modal1}><Text>Open modal1</Text></TouchableOpacity>
<BottomSheetModal ref={bottom_sheet_modal1_ref} snapPoints={snap_points}>
<TouchableOpacity onPress={open_modal2}><Text>Open modal2</Text></TouchableOpacity>
</BottomSheetModal>
<BottomSheetModal ref={bottom_sheet_modal2_ref} snapPoints={snap_points}>
<TouchableOpacity onPress={close_both_modals}><Text>Close both modal</Text></TouchableOpacity>
</BottomSheetModal>
</>
);
}
- Click on
Open modal1
- Then, click on
Open modal2
- Then, click on
Close both modal
- Then, click on
Open modal1
nothing happen
NOTE: It’s working if we inverse the closing order inside close_both_modals
by:
const close_both_modals = () => {
bottom_sheet_modal1_ref.current.dismiss();
bottom_sheet_modal2_ref.current.dismiss();
};
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
javascript - react modal unable to open - Stack Overflow
In my case there was an error with Dialog.Panel component. Try changing it to a div.
Read more >react-native-modal - npm
An enhanced, animated, customizable React Native modal. The goal of react-native-modal is expanding the original React Native <Modal> ...
Read more >React Modal component - Material UI - MUI
Modals can be nested, for example a select within a dialog, but stacking of more than two modals, or any two modals with...
Read more >How to open mdbootstrap modal from different component
Expected behavior When I click on one of the items it opens a modal. Actual behavior Gives me errors TypeError: Cannot read property...
Read more >4 steps to set up global modals in React - Opensource.com
The hideModal function doesn't have any parameters; calling it causes the current open modal to close. 2. Create modal dialog components. In a ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks a lot for your reactivity ! 👍
this should be fixed with
v3.4.1