CODEWITHSUNDEEP
react-nativereact-native-blur
Henrik
Henrik

Reputation: 928

React Native BlurView Brightness too dark or too bright

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:

Image 1

If I change it to dark it looks like this:

Image 2

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

Image 3

Upvotes: 1

Views: 1562

Answers (3)

Siddharth Pal
Siddharth Pal

Reputation: 9

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

Like this:

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

Upvotes: 0

JSharles
JSharles

Reputation: 677

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.

Upvotes: 0

Niku
Niku

Reputation: 91

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.

Upvotes: 1

Related Questions