Blur Triangle View

[BigPun86]

Hey there! i am trying to blur a View which has a triangle style. The triangle works great for simple views, but when i use the BlurView it just gives me a square. I have checked the issues and saw a lot of solutions by using a wrapper component and the BlurView itself needs to have style property overflow = "hidden". But this does fix it.

const Triangle = () => <View style={Style.triangle} />; => works
const BlurTriangle = () => <BlurView  blurType="dark" blurAmount={2} style={Style.triangle} />; => does not works => renders a blur square element

const Style = StyleSheet.create({
triangle: {
  overflow: 'hidden',
  left: 10,
  width: 0,
  height: 0,
  backgroundColor: 'transparent',
  borderStyle: 'solid',
  borderLeftWidth: 8,
  borderRightWidth: 8,
  borderBottomWidth: 16,
  borderLeftColor: 'transparent',
  borderRightColor: 'transparent',
  borderBottomColor: 'rgba(0,0,0,0.3)',
  transform: [{ rotate: '180deg' }],
},

});

Any ideas how to make a Triangle BlurView? :)

[chengsam]

I want this as well..

[belgamo]

I think it's not working because the BlurView depends on width and height. That's why it works with square and circle shapes.