question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot reopen modal

See original GitHub issue

Bug

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

  1. Implement 2 bottom sheet modal
  • modal1 must open modal2
  • The action on modal2 is to close both modal1 and modal2
  1. Open modal1
  2. Open modal2
  3. Close both modal1 and modal2 from modal2
  4. Try to open modal1 (cannot be opened).

Describe what you expected to happen:

  1. 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:closed
  • Created 3 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Dallas62commented, Mar 15, 2021

Thanks a lot for your reactivity ! 👍

1reaction
gorhomcommented, Mar 15, 2021

this should be fixed with v3.4.1

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found