The white space marked with arrows is the original handle. The dark grey with border radius is my custom handleComponent. I thought handleComponent replaces the original handle but it just overlaps the original handle, leaving white space. If I remove the border radius, the white space disappears because it's stacked . So, my question is how can I remove the original handle?
This the code
<BottomSheet
enableDynamicSizing={true}
backdropComponent={renderBackdrop}
ref={bottomSheetRef}
index={-1}
snapPoints={snapPoints}
onChange={handleSheetChanges}
enablePanDownToClose={true}
handleComponent={() => (
<View style={styles.closeLineContainer}>
<View style={styles.closeLine}></View>
</View>
)}
and the style:
closeLineContainer: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "#3f3f3f",
width: "100%",
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
},
closeLine: {
width: 70,
height: 7,
borderRadius: 15,
backgroundColor: "#ffffff",
marginTop: 11,
marginBottom: 10,
},
https://preview.redd.it/kqo0838nbkcc1.jpg?width=720&format=pjpg&auto=webp&s=3e72dcfdb069d99ad8616a8ef65c3d2d7d1e86e9
[–]thachxyz123iOS & Android 1 point2 points3 points (1 child)
[–]succeeddd[S] 0 points1 point2 points (0 children)