Apply Blur on Bottom NavBar • React Native

Full Source code: patreon.com/posts/create-blur...
Shorts Version: • Tutorial: How to apply...
📚 Chapters
- (00:00) Initial Demo
- (00:04) The main change required
- (00:12) Why we made these changes?
- (00:36) But That's not it!
- (00:45) Here's a fix
- (00:56) Result on iOS, Android & Web
- (01:05) Feel Free to Play With the Blur
- (01:17) What if you're not using Expo?
➡️ Connect with me: bio.link/ashud
🌐 Other distributions:
Hindi version: • How to Blur Bottom Nav...
Twitter/𝕏: / 1733029199454359830
Instagram: / c0uwgvlsie3
Threads: threads.net/@massive.educator...
#reactnative #reactjs #expo #446

[@dangduylinh9587]

You are the best bro. I just subscribe and I hope see more video animation in React Native. Thanks for your dedication

[@massive.educator-shorts]

Thanks for the sub, more stuff is work in progress! :)

[@andrejkling3886]

Great … finally not expo 🔥💯👍

[@CoryTheSimmons]

Beautiful

[@jervi_sir]

wow, good solution, I used to add an imaginary View with a height in footer component for a Flatlist

[@silentco_der]

there still exist the white space behind the icons so to remove that white space:
(

)
}}>
set shadowOpacity and elevation to 0

[@nitsanbh]

Good content!

[@massive.educator-shorts]

Thanks!

[@bnny2175]

you are the g.o.a.t.

[@prashlovessamosa]

Just 1 min bruv please upload more awesome stuff please.

[@massive.educator-shorts]

Glad you liked it! More awesome stuff is work in progress, will be publishing them in the coming days of weeks.
Till then you can see their earlier versions on Twitter/X or on my Patreon.

[@belkocik]

Is it possible to do it with expo router?

[@massive.educator-shorts]

Yes, expo-route is built on top of react-navigation so the approach is gonna be pretty much same, you just have to use it's provided 'Tabs' component and for tab screen create their specific file in the same folder.
Just release a video with it's expo-router version, do have a look: ua-cam.com/users/shortsVNrEfUlwy_M

[@kkost9]

not working with expo-router =(

[@massive.educator-shorts]

Hi, late reply, but published a short with it's expo-router version, do have a look:
ua-cam.com/users/shortsVNrEfUlwy_M