Padding bottom is overwritten by the libraries style

[naderalfakesh]

<ActionSheetBase
  containerStyle={{
    ...styles.container,
    paddingBottom: insets.bottom,
    ...containerStyle,
    }}>
  {children}
</ActionSheetBase>

We are setting bottom padding with the value coming from safe area context on, I was able to solve this by wrapping content with a view and passing the padding to it. But I have one sheet that has a sticky button so it should be without bottom spacing but I cannot overwrite the padding.

Thanks for the great efforts, keep it up.

[theneekz]

Same problem, can't affect paddingBottom in containerStyle

[ammarahm-ed]

@theneekz Its not possible with the current mechanism of how the sheet works. Paddings are locked to a specific number. You can add padding to an inner view or render a <View/> at the bottom of your sheet and give it an height.

[theneekz]

That's what I've come to realize...thanks for clarifying. I would like to have the ActionSheet rise up from a different height (so that a bottom tabs navigator is still visible), which I also don't think is possible. This was one route I tried to get around that with a few other styling changes but I don't think it's possible to create the effect.

[theneekz]

As close as I can get it right now:

<ActionSheet
    containerStyle={{
        backgroundColor: 'transparent',
    }}
    indicatorStyle={{ backgroundColor: 'grey', top: 20, zIndex: 2 }} 
    ...
        <View 
            style={{ 
               marginBottom: tabBarHeight,
               paddingHorizontal: '5%',
               backgroundColor: 'white',
               borderTopWidth: 20,
               borderTopLeftRadius: 10,
               borderTopRightRadius: 10,
               borderTopColor: 'white',
            }}>
           ....

[ammarahm-ed]

@theneekz I can see what you are trying to do here. The Sheet opens up in a Modal. So if the user cannot interact with the buttons in bottom tab, I think it will end up being a confusing UX. One way around that would be to render the tab at the same position inside the sheet. So when the Sheet opens up, the bottom tabs are in there and user can tap on them to close the sheet and navigate to the respective tab.

What you are trying to achieve here is possible with a Sheet that does not open in a Modal but in a View container.

[theneekz]

Thanks, that makes sense. I think rerendering the bottom tabs inside the modal is the only solution for using this library. There's no way to render this inside a View container right rather than a modal right?

[ammarahm-ed]

@theneekz Right not it won't be possible to do it.

[mydesweb]

@ammarahm-ed on bottom there is a little padding between the Navigation Bar and the ActionSheet that can't be removed (on Android at least) - the black area is containerStyle with backgroundColor: 'black' of ActionSheet and the yellow area is my content.

[johnny-mcfadden-dailypay]

@mydesweb also facing the same issue. Did you manage to find a fix? Perhaps @ammarahm-ed can save the day 🙏 🙏

[johnny-mcfadden-dailypay]

Could we add support for a custom background color on this element? @ammarahm-ed

  <View style={{
                    height: 200,
                    backgroundColor: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.backgroundColor) || "#ffffff",
                    position: "absolute",
                    bottom: -195,
                    width: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.width) || "100%"
                }}/>

[johnny-mcfadden-dailypay]

Using patch-package (https://www.npmjs.com/package/patch-package) with fix:

Allows you to change the color and and adjust the positioning to remove the background color bleeding issue:

[HyopeR]

I have the same problem on Ios and Android platforms. I am sharing 2 screenshots and code blocks to elaborate on the subject.

Code:

<ActionSheet containerStyle={{backgroundColor: 'red'}}>
      <View style={{ width: '100%', height: 200, backgroundColor: 'green'}} />
<ActionSheet>

Screenshots:

Android	Ios

[HyopeR]

I think I found the problem. There is a problem with the following part of the source code. At: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/src/index.tsx

{overdrawEnabled ? (
    <Animated.View
        style={{
            height: overdrawSize,
            position: "absolute",
            bottom: -overdrawSize
            backgroundColor: props.containerStyle?.backgroundColor || "white",
            width: dimensions.width,
        }}
    />
) : null}

This is what this part looks like when it comes out of the package. Look at the bottom value.

<View style={{
        height: 200,
        backgroundColor: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.backgroundColor) || "#ffffff",
        position: "absolute",
        bottom: -195, // 5 pixels missing here. 
        width: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.width) || "100%"
    }}
/>

There is a problem in the part where the 'overdrawSize' value is given as negative. And the difference of 5 pixels creates the padding.

[ammarahm-ed]

@HyopeR The master branch has the unreleased version of the library. You must be using the older version. A new version will be out soon which fixes this. I will investigate this and see if this padding at bottom could be avoided completely.

[ammarahm-ed]

You can try installing the vnext branch but beware it has many breaking changes so its best to wait until i release v0.8.0

[ammarahm-ed]

This is fixed in v0.8.0. Will release today.

[alwazqazi]

Still facing this issue on v0.8.0. please help.

the pink area is containerStyle

[MoRa2297]

Still facing this issue on v0.8.0. please help.

the pink area is containerStyle

The same for me! Pls help!

[adrian3ka]

Still happening to me, there's an excess white background in the image. I'm using version 0.8.29.

Thanks.

[andrisole92]

Happening to me as well