search

rgommezz / react-native-scroll-bottom-sheet

Cross platform scrollable bottom sheet with virtualisation support, native animations at 60 FPS and fully implemented in JS land :fire:
MIT License
1.54k stars 64 forks source link

Remove 1px border under the handle #51

Closed AronBe closed 3 years ago

AronBe commented 3 years ago

I am using renderHandle prop to show the handle, under which is 1px border set. How could I please remove it? The only solution I came up with is to move the renderHandle component by top: 1, which is not the greatest solution I assume?

image

BCarroll524 commented 3 years ago

If you are rendering a custom JSX.Element in the renderHandle prop you can set its style to have a borderBottomWidth of 0px to get rid of the border under the handle.

It could look like the following

renderHandle={() => <View style={{ borderBottomWidth: 0 }}> // rest of custom handle </View> }
AronBe commented 3 years ago

Oh that simple, I though I have tried that, but seems like I failed somewhere :) thank you!

AronBe commented 3 years ago

@BCarroll524 I thought it works, but now I am finding out this solution does not work actually. Neither I see any styles for the border used in the code. It is probably some positioning within the code and the only solution is top: 1?

rgommezz commented 3 years ago

Check the example of the map screen, where the handle presents no border.

This library does not render any borders, you have full control on the handle component