BlurView does not fully respect render order

[ErezCsillag]

Hey, it seems like the BlurView also "mixes" the colors of none blurred components and creates some sort of color fog around it In the attached pictures you can clearly see the bluish fog caused by it.

I am testing this on an android emulator.

This is my BlurView

 const CustomBlurView = () => (
    <BlurView
      blurType="light"
      overlayColor="transparent"
      blurAmount={25}
      blurRadius={25}
      style={styles.blur}
    />
  );

const styles = StyleSheet.create({
  blur: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  icon: {
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 8,
    height: 40,
    width: 40,
  }
})

With SVG & Without SVG

<View style={styles.icon}>
  <CustomBlurView />

  <Svg width={24} height={24} fill="none">
    ...
  </Svg>
</View>

With SVG inside the blur view (Cant center it no matter the style...)

<CustomBlurView style={styles.blurView}>
    <Svg .... />
</CustomBlurView>

[shashwats-greytip]

Did you find any solution for that? One way is to provide position as absolute but, in that blur bleeds out in android

[dutradotdev]

@shashwatgreytip take a look at my solution: https://gist.github.com/dutradotdev/50c82763fc621ab3c1bd5ba02180ce0d