Masked View Element not respecting given height in styles

[ayusch-apps-curefit]

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',
    },
  });

      <MaskedView
        onLayout={e => console.log('Container: ' + e.nativeEvent.layout.height)}
        maskElement={
          <>
            {fadeTopEdge ? (
              <LinearGradient
                style={styles.gradientTopStyle}
                onLayout={e => 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}
            <Box flex={1} style={styles.blackBackground} onLayout={e => console.log('Mid: ' + e.nativeEvent.layout.height)} />
            <LinearGradient
              style={styles.gradientBottomStyles}
              onLayout={e => 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 .....}
    </MaskedView>

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 ?

[Mik1337]

hey, have you found a solution to this issue ?