callstack / callstack/masked-view
Masked View Element not respecting given height in styles
- Dominant language
- JavaScript
- Stars
- 1.2k
- Forks
- 131
- PR merge metrics
- No merged PRs in 30d
Description
Hi there,
I'm passing a `maskedElement` which has a LinearGradient on Top and Bottom. They have fixed heights with respect to container. The top has 25% and bottom is 40%.
In the middle, there's a black overlay to show the middle part completely.
Output is as expected, but there's a thin line of <1px that's causing an issue. Attaching the image below:

When I tried debugging, I found that the `maskedElement` is not respecting the complete height. It's leaving a < 1px gap. Here's what I've used:
```
const styles = StyleSheet.create({
gradientBottomStyles: {
width,
height: Math.ceil(height / 2.5),
marginBottom: 4,
},
gradientTopStyle: {
width,
height: Math.ceil(height / 4),
},
descriptionStyle: {
marginBottom: buttonHeight + height * 0.03,
alignSelf: 'center',
},
blackBackground: {
backgroundColor: 'black',
},
});
```
```
console.log('Container: ' + e.nativeEvent.layout.height)}
maskElement={
<>
{fadeTopEdge ? (
console.log('Top : ' + e.nativeEvent.layout.height)}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
colors={['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, 1)`]}
/>
) : null}
console.log('Mid: ' + e.nativeEvent.layout.height)} />
console.log('Bottom: ' + e.nativeEvent.layout.height)}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
colors={['rgba(0, 0, 0, 1)', `rgba(0, 0, 0, 0)`]}
/>
}
>
{... image goes here .....}
```
The output for log statements that I get is:
```
LOG Top : 49.818180084228516
LOG Mid: 70.18181610107422
LOG Bottom: 80
LOG Container: 200
```
If we add top, mid and bottom, a 0.1 pixel gap will be visible. Which is causing an issue. Can anyone help here ?
Contributor guide
Assessment
This issue has not been assessed yet.