Update BlurView to the 3v version of the Dimezis library

[DanielAraldi]

Hello everyone, if you're reading this discussion, you're probably looking for the same solution as us, updating to version 3v of Dimezis's BlurView library. @sbaiahmed1 and I have joined together to share solutions about implementing this update, with the aim of providing BlurView support for all libraries.

We are currently facing challenges related to two libraries:

1. react-native-screens: It appears not to offer native support for the Dimezis 3v library. I created an issue there reporting the problem, but so far I haven't received any response.

• BlurView v3 from Dimezis appears to lack support for integration with Bottom Tabs. software-mansion/react-native-screens#3218

In the issue I created on react-native-screens, I make clear the problems that occur related to bottom tabs. As far as I've identified, only the bottom tabs are not working correctly, everything else appears to be fine. There are details about my implementation there if you want to see.

2. wix/react-native-navigation: This library already has support for version 3v of Dimezis's BlurView.

I'll also leave below a discussion from the Expo developers, where they shared ideas on how to implement an update for Dimezis 3v. However, I implemented their solution, even left a comment there LOL, but I had problems with the bottom tabs from react-native-screens.

• [android] expo-blur upgrade to BlurView V3 expo/expo#37905

We are currently looking for solutions to this problem. If you have one, feel free to share it, this will help us a lot and also enrich the community. Over time, I will come back here to share new information.

I thank @sbaiahmed1 for being with me in search of this solution ❤️

Cheers from the creator of react-native-blur-view 😁

[sbaiahmed1]

Hey @DanielAraldi , Thanks for creating the discussion
I will try to publish my branch tonight with the progress I made so far and we do brainstorming together

[DanielAraldi]

I would love to participate, but I'll be in college :(
But, let's talk, maybe one day our schedules will fit together.

[sbaiahmed1]

ofc man, focus on studying!
I will just put the MR and take a look when you can

[DanielAraldi]

Hello @sbaiahmed1, my PR with the integration with the new version of BlurView is now available, but it is in draft for now.

Please take a look at what I've developed, it might provide you with some important information that might help. For now, I still have that issue with the bottom tabs.

An important detail that I noticed that made me question whether the problem is my implementation or the navigation, in my example App, when I changed the type information (blurType in your case), the bottom tabs worked on the current screen where the blur effect was applied.

I'm thinking about adding an implementation to re-render the blur effect every time the navigation target screen changes, maybe this could fix the issue in the implementation I made, but I'm not sure if it's the best practice 😅. Below, my PR is available:

• feat: Update the Dimezis's BlurView library to the 3v DanielAraldi/react-native-blur-view#16

[sbaiahmed1]

Hey @DanielAraldi,
I hope you're doing good at college
I was on the point of implementing it too
I will take a look at your PR Im sure that it is gonna help me too

[DanielAraldi]

Awesome! You did really well!! 👏🎉

[DanielAraldi]

I'll go add this example with ScrollView in my readme to help the people. Thanks!

[sbaiahmed1]

I will push the code in a second and tag you in the PR if you want to copy anything and with a complete version of the code , please be my guest ( I did steal ideas from your repo 😂)

[DanielAraldi]

Nothing is created, everything is copied, wise people always say that LOL 🤣🤣

[sbaiahmed1]

Hahahah using other people wisdom
I did copy your example and improved
It was simple and direct
I overloaded it with some components