React Native BlurView Brightness too dark or too bright

Question

I use a React Native BlurView in my React Native project. I want to have a blur effect like in Adobe XD or Figma where the color stays the same, but everything which is under the view will get blurred. When I apply the BlurView on my View I get this result:

If I change it to dark it looks like this:

But is there no way that the colors stay the same like this?:

Answer 1

Sadly there is no option to do this. If you use React Native Blur View there is no option where you can choose whether the blur should be dark or bright. Today there is not good library for blur in React Native. Maybe there will be a new in the future.

Answer 2

Try setting the overlayColor property of BlurView to a transparent color.

Like this:

<BlurView
    blurRadius={4}
    overlayColor='#ffffff0'
    blurType="light"
    style={style.blurView}
/>

Answer 3

Try to add a style to your BlurView and then add it a backGround color. I would set the brightest one and then a light grey with transparency.