A creative and performant way to blur elements/views in react native (iOS / Android)
A couple of days ago I noticed the design team was expecting to have blurred elements over images, including buttons, texts, icons, and others.
This set of blur elements is usually called “View”, and it’s a kind of common thing to do in the Web context, CSS has a filter property where we can define a blur value, see more. I started seeking a react native blur libraries and found the most well-known:
Then I noticed some common things across all of them:
- Blur is iOS common feature
- “BlurView on Android is computationally expensive, so it is recommended not to render more than a few BlurView components at once”.
- “A component that renders a native blur view on iOS and falls back to a semi-transparent view on Android.”
- “Keep in mind that this is quite an expensive operation (and isn’t fully optimized for speed) which is running on a mobile device (small CPU).”
- “Blurring something on Android is pretty expensive compared to iOS. It’s a native limitation.”
Also, there are a bunch of performance issues related to Android, so that’s why more and more developers decided to definitely avoid this feature. Let me list some of them:
- Extreme performance issues on Android; library is broken.
- Just hard-crashes on Android without any error info
- Library is broken on Android
- [BUG] crash on android
Now what, should we remove this feature as always? No, I wasn’t convinced enough, a bunch of crazy ideas started popping into my brain and I knew all of our use cases were about blurring elements over images.
The first thing I was trying to figure out was, is there any other way to blur things? Yes, React Native Image has a built-in blurRadius prop that does exactly it, for images of course.
But then I was wondering, all the problems are about blur views, but can we say the same for the image blur effect? It took me a few hours of searching and discussing with my peers to figure out that probably not, so let’s give it a try and see where I can get.
The idea/concept:
- There’s an image:
- And the “Element” (View, Text, Button, anything), defined by:
const element = { width: 100, height: 150, left: 100, and top: 40 }
- “Element” has the same image as a child, with some blur radius, an overlay, and low opacity to keep seeing the original element
- Image opacity 1
- “Element” overflow is hidden
- “Element” overflow is visible, and the Image position is the opposite:
const imagePosition = { elft: -element.left /*(100)*/,top: -element.top /*(40)*/
- “Element” overflow hidden and image with less blur radius
- Image with a greater blur radius
Amazing!! That’s what we were looking for! 🎉
Remember what I said about the image blur effect being “probably” not the same performance mess as View blur? So was the time to run the performance tests, and thanks to Patricia Santos we documented different scenarios to make sure we could have this feature for Android because on iOS it’s common.
The tests were done in an Expo Go project with Storybook and the following interfaces:
All of that being said, we built a creative concept behind how to natively blur elements over images, for both iOS and Android with great performance.
I’ve created a react-native-blur-view-image GitHub repository exemplifying how I came up with this feature, If you require new features or bug fixes you can fork the project, but consider starring this repository and mention the credits.
It also includes the usage examples below and more:
I really hope you all enjoy the reading and let me know if you have any doubts or suggestions in the comments section. Also, you're welcome to stay tuned for the next round of tests in a bare React Native project.
See you soon!
