callstack / callstack/masked-view

Masked View Element not respecting given height in styles

Open
#128 1 comment 0 reactions 0 assignees View on GitHub
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:
![Screenshot_20210720-112949](https://user-images.githubusercontent.com/61041661/126270051-8fd4805e-0e70-4a46-810b-ab99fe829739.png)

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.