How to change border radius of BottomSheetModal ?

Ask your Question

I have read the docs and know that you style the container by using the normal style property, however when trying to change the border radius of the sheet, it does not work either with custom or default handle, I attach an example of how it looks like when using the styling prop (I added border width and color using the style prop)

[gorbypark]

You need to set a custom background component using the backgroundComponent prop and set the borderRadius there.

<BottomSheet backgroundComponent={props => <BottomSheetBackground {...props} />}>

and then the BottomSheetBackground component should be something like this

const BottomSheetBackground = ({style}) => {
  return (
    <View
      style={[
        {
          backgroundColor: 'white',
          borderRadius: 12,
        },
        {...style},
      ]}
    />
  );
};

[SimpleCreations]

That works perfectly! thank you so much!, one last q, is there any way to set the custom BottomSheetBackground for ALL sheets globally ? or will I have to go one by one adding the custom background ?

You can create a custom wrapper component around BottomSheet and use it for all the sheets in your app.

// CustomBottomSheet.js
export default function CustomBottomSheet(props) {
  return (
    <BottomSheet
      backgroundComponent={props => <BottomSheetBackground {...props} />}
      {...props} />
  );
}