Invisible bottom sheet gets stuck in the center of the screen on Android

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}
  />
);

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