Invisible bottom sheet gets stuck in the center of the screen on Android about react-native-reanimated-bottom-sheet

[WildSpy]

I invented super-crutch :)

make ref of a View in contentRender. I called it contentRef.

this is a try to define if panel is in wrong place and hide it.
'top' is a top snapPoint

function crutch() {
      contentRef.current.measure((width, height, px, py, fx, fy) => {
        if (fy < top) {
          return hidePanel();
        }
      });
}

but it not always work, that's why i do this in componentDidMount

      if (Platform.OS === 'android') {
        // SUPERMEGA CRUTCH for Android
        const timerId = setInterval(crutch, 300);
        setTimeout(() => {
          clearInterval(timerId);
        }, 2000);
      }

i know it's terrible :(
but it works in my сase.
waiting for the fix from the author

[WVandergrift]

Here's what I ended up doing that has been working consistently so far (YMMV). I set the initial snap to the last snap point index. When the component mounts, I then set the desired snap position.

  componentDidMount() {
    // This is a shim to prevent the bottom sheet from occassionaly not rendering correctly.
    // https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/51
    this.bottomSheet.snapTo(1);
  }

        <BottomSheet
          ref={ref => { this.bottomSheet = ref; }}
          snapPoints={[420, 210, 40]}
          renderContent={this.renderPanelInner}
          renderHeader={this.renderPanelHeader}
          initialSnap={2}
          enabledInnerScrolling={false} />

Hopefully this will help someone else out until we can get an official fix.

[nosalvage]

The same issue, please help

[JakeHadley]

@WildSpy I'm trying to discover if I'm seeing this as well. It's not showing up but I don't know how to see if it's not rendering or if its just behind everything. How did you get it to show up on the inspector?

[WildSpy]

@pianoman730 As i see it's not behind everything, because i can click on it in inspector. Just very strange behavior.

[OwlHaus]

I had this similar issue, and for me, it was related to the it's location in the hierarchy, such that the bottom sheet had to be placed above all components for which is may overlay. I know this sounds weird, and may not be your problem, but something to consider

[ardyfeb]

I have same issue, how to solve this?

[tudormarze]

For me, this issue happened also with only two snap points, top and bottom :/
@WildSpy 's solution worked for me, thank you!

[solace]

I conditionally render the bottom sheet and @WVandergrift's solution worked for me.

[BogdanTaranenko]

any progress?