React-native-reanimated-bottom-sheet: Invisible bottom sheet gets stuck in the center of the screen on Android

[WildSpy]

Hello,

The panel sometimes gets stuck in the middle of the screen on first app load. And it's invisible. It prevents me from clicking on the map. Android only. iOS is ok.

I noticed that this happens when initialSnap reference to not maximal value.
In my example: initialSnap = 0 works normally. And the panel is in it's max size.

Map and panel components is on one level and wrapped in one flex container with no other params.
Bug occurs more often on slow Android devices, or in debug mode.

const content = ({ children, height }) => (
  <View style={[styles.panel, { height }]}>
    {children}
  </View>
);

const renderHeader = () => (
  <View style={styles.header}>
    <View style={styles.panelHeader}>
      <View style={styles.panelHandle} />
    </View>
  </View>
);

const MapPanel = ({ panelRef, children, height }) => (
  <BottomSheet
    ref={panelRef}
    snapPoints={[600, 300, 0]}
    renderContent={() => content({ children, height })}
    renderHeader={renderHeader}
    initialSnap={2}
  />
);

[nurjs]

The same issue, please help

[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

[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.

[pdfkpb]

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?

[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.

[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?