Is it possible to create an absolutely positioned View that only blurs the content behind itself?

Bobimaru 0
Viewed 24

I'm having some trouble figuring out if creating an absolutely positioned view that blurs the content behind is even possible in React Native. I couldn't find anything related to blurring in the documentation aside from the fact that you can apply blur to the ImageBackground element.

My initial goal was to make the status bar of Android go on top of the content and have it be transparent and blurry, and I was able to make it transparent, but it seems that the React Native StatusBar component doesn't support any sort of blur so I had to figure out a different way.

This is why I decided to create an absolutely positioned View that would stay under the status bar and give that View a blur, but I didn't find any examples on blurring Views.

react-native reactjs javascript
1 Answers

Basically 2 approaches:

  1. No external library ->

If want to go ahead with no external library , then you have to use ImageBackground with a blur

And it looks something like this:

enter image description here

  1. With library you need to use react native community blur view :

https://github.com/Kureev/react-native-blur#react-native-communityblur

This package is actually what you want i believe. its better to go with this rather than no package , since there it requires an Image.

Do lemme know in case of any concerns :)

Gaurav Roy0
Related