Top part (Handle component) bottomsheet slightly visible even the initial index value is set to -1

Bug

The top part of bottomsheet (Handle component) slightly visible on screen mount even i already set the initial index value to -1. But when i close it from ref methods .close() it closed perferctly without any top part being visible. The issue only occur on the devices like Samsung S20.

Environment info

Library	Version
@gorhom/bottom-sheet	^2
react-native	0.63.4
react-native-reanimated	^1.9.0
react-native-gesture-handler	^1.5.6

Steps To Reproduce

1. I followed the example from this Dynamic height bottomsheet

Describe what you expected to happen:

1. Top part bottomsheet should not be visible when the initial index props value is set to -1

Reproducible sample code

const [contentHeight, setContentHeight] = useState(0);
const snapPoints = useMemo(() => [0, contentHeight], [contentHeight]);
const easing = Easing.out(Easing.bezier(0.78, -0.4, 0.32, 1.6));
// Methods
const onLayoutSheetContainer = ({nativeEvent}) => {
  const layoutHeight = get(nativeEvent, 'layout.height', 0);
  setContentHeight(layoutHeight);
};
// Render
return (
  <BottomSheet
    index={-1}
    snapPoints={snapPoints}
    animationDuration={750}
    animationEasing={easing}
    handleComponent={HandleComponent}
    backdropComponent={BottomSheetBackdrop}
    backgroundComponent={BackgroundComponent}>
    <View
      style={styles.autoResizeContainer}
      onLayout={onLayoutSheetContainer}>
      {props.children}
    </View>
  </BottomSheet>
);

[radko93]

@gorhom I had the same issue on Pixel 4a, your fix works.

[ddikodroid]

Hi @gorhom I still facing this issue in v4 Here is the screenshot

Here is the handle component

if (children) {
    return (
      <View style={[styles.baseContainer, styles.withChildren]}>
        <View style={styles.withChildrenText}>
          <Text style={styles.bottomSheetTitle}>{title}</Text>
          <Text style={styles.bottomSheetCloseTitle} onPress={onPressClose}>
            Tutup
          </Text>
        </View>
        {children}
      </View>
    );
  } else {
    return (
      <View style={[styles.baseContainer, styles.withoutChildren]}>
        <Text style={styles.bottomSheetTitle}>{title}</Text>
        <Text style={styles.bottomSheetCloseTitle} onPress={onPressClose}>
          Tutup
        </Text>
      </View>
    );
  }

const styles = StyleSheet.create({
  baseContainer: {
    paddingHorizontal: normalize(16),
    borderBottomWidth: 0.5,
    borderBottomColor: colors.light.grey,
    borderTopRightRadius: normalize(16),
    borderTopLeftRadius: normalize(16),
  },
  withChildren: {
    paddingBottom: normalize(8),
  },
  withChildrenText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingTop: normalize(12),
    paddingBottom: normalize(8),
  },
  withoutChildren: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: normalize(12),
  },
  bottomSheetTitle: {
    ...fonts.bold,
    fontSize: normalize(16),
    lineHeight: normalize(24),
    color: colors.dark.darkerGrey,
  },
  bottomSheetCloseTitle: {
    ...fonts.bold,
    fontSize: normalize(16),
    lineHeight: normalize(24),
    color: colors.primary,
  },
});

I’ve tried to put topInset={StatusBar.currentHeight} but in the first render, the handle still visible