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.

BottomSheetModal immediately hides itself after opening

See original GitHub issue

Bug

It seems that the BottomSheetModal does not work in the default example. I dug into the code a little but and it seems like the doDismiss is being called when it’s initially presented:

if (isMinimized.current && !isForcedDismissed.current) {
        return;
      }

      const adjustedIndex = dismissOnPanDown ? _index - 1 : _index; // This is true on initial `.present()` call - which I don't think it should, which leads to it immediately being removed
      currentIndexRef.current = _index;

      if (adjustedIndex >= 0) {
        if (_providedOnChange) {
          _providedOnChange(adjustedIndex);
        }
      } else {
        doDismiss();
      }

Environment info

Library Version
@gorhom/bottom-sheet 2.0.2
react-native 0.63.4
react-native-reanimated 1.13.2
react-native-gesture-handler 1.9.0

Steps To Reproduce

  1. Simply try and present a BottomSheetModal given the normal setup with a provider

Describe what you expected to happen:

  1. When calling .present() it should open

Reproducible sample code

The bottom sheet modal example: https://gorhom.github.io/react-native-bottom-sheet/modal/usage

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
gorhomcommented, Jan 11, 2021

@Michael-M-Judd please let me know if it’s not working with you

1reaction
Michael-M-Juddcommented, Jan 11, 2021

Strange - sorry. I also tested with a blank app and it worked. Perhaps it’s something todo with my react-navigation setup (i’m currently putting the modal at the screen level and provider wrapped around the app)

Read more comments on GitHub >

github_iconTop Results From Across the Web

android - Show and Hide Bottom Sheet Programmatically
To close the BottomSheetDialogFragment from inside the fragment you can call: dismiss();. To show or hide the BottomSheetDialogFragment from the activity ...
Read more >
5 Examples of the new Ionic 6 Bottom Sheet Modal
Get the details on how to use the brand new Ionic Bottom Sheet component in this guest blog post from Simon Grimm.
Read more >
How to create bottom sheet / modal like this one? (read first ...
Parent commenter can delete this message to hide from others. ... get stuck on the bottom sheet being opened forever without being able...
Read more >
Sheets: bottom - Material Design
DoModal bottom sheets with few items are fully visible upon opening. ... This places the top content immediately out of reach for users...
Read more >
How to Create a Bottom Sheet in React Native
This component has several use cases, from filling in forms, ... way that you can do everything by yourself, you can also use...
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