Custom color to BottomSheetBackdrop

[hanselabreu]

Hey guys,

Is there a way to pass a custom color to the BottomSheetBackdrop. Doing the following does not appear to be modifying the background color:

<BottomSheetBackdrop style={{ backgroundColor: "red" }} />

Is the color defined in a different property or what am I doing wrong?

P.S. I need this in order to improve contrast when changing between light/dark theme.

[hanselabreu]

This is a bug should be fixed once #448 gets merged.

[gorhom]

thanks @hanselabreu for your conitrbution ! your fix is already out with v3.6.5 https://github.com/gorhom/react-native-bottom-sheet/releases/tag/v3.6.5

[hanselabreu]

@gorhom thanks for the prompt release! 🙂

[jocoders]

I have @gorhom/bottom-sheet": "^4" version, but still is not possible to change backdrop color by this way:

<BottomSheetBackdrop style={{ backgroundColor: "red" }} />

Any ideas how can I change backdrop color?

[personable]

@jocoders It seems like adding that style prop erases the existing backdrop styles. I got it working like this:

        style={{
          backgroundColor: tokens.color_background_backdrop,
          position: "absolute",
          top: 0,
          bottom: 0,
          right: 0,
          left: 0,
        }}

[SMhdAsadi]

You should override the existing styles:

<BottomSheetBackdrop
  {...props}
  style={[
    props.style,
    {backgroundColor: 'red'},
  ]}
/>

[personable]

Ah thanks @SMhdAsadi !