Loading video...

Video Failed to Load

Go Home

🤯 Blur content in React Native Android - no library! Just use filter: blur(10px) directly in your styles. ✅ Blurs element content (text, images, etc.) ❌ Not a backdrop blur 📌 iOS equivalent: CIGaussianBlur via CIFilter 📌 Web equivalent: filter: blur() Requires RN 0.77+ or Expo 53+. React Native...

iamarunabh's profile picture

Arunabh Verma

1,963 subscribers

16,505 views • 9 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

I really like these iOS-style header blur effects here is an implementation in React Native powered by Expo-modules
0:17

I really like these iOS-style header blur effects here is an implementation in React Native powered by Expo-modules

Hewad Mubariz

48,361 views • 2 months ago

New # 7️⃣1️⃣ drop at Perplexity app with Mo Gorhom bottom sheet + custom blur backdrop! ✦ Built for React Native using Expo ✦ Powered by Software Mansion reanimated
0:10

New # 7️⃣1️⃣ drop at Perplexity app with Mo Gorhom bottom sheet + custom blur backdrop! ✦ Built for React Native using Expo ✦ Powered by Software Mansion reanimated

make it animated

10,739 views • 7 months ago

Liquid Glass buttons in React Native 🔍 I did a small POC, should I make it a library? (Android would have its native button equivalent)
0:17

Liquid Glass buttons in React Native 🔍 I did a small POC, should I make it a library? (Android would have its native button equivalent)

Oskar Kwaśniewski

21,381 views • 1 year ago

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:
0:15

💡CSS techniques: "The Backlight" Using a blur filter you can create an elegant backlight (or a "smart shadow") effect for your images. In a pseudo-element: 1⃣ `inherit` a background 2️⃣ blur it 3⃣ put it behind the main element using z-index Here's how it works:

bolt.new

369,038 views • 1 year ago

Introducing react-native-nano-icons! 💎🔬 The ultimate way to handle custom icons in React Native: 🛠️ Integrated SVG-to-font build process ⚡ Blazing fast native components 🎨 Multi-color font icon support 📐 Use icons inline within RN components 🚀 Expo Go & Web support out of the box Check out our GitHub 👇 or learn more in the 🧵
0:18

Introducing react-native-nano-icons! 💎🔬 The ultimate way to handle custom icons in React Native: 🛠️ Integrated SVG-to-font build process ⚡ Blazing fast native components 🎨 Multi-color font icon support 📐 Use icons inline within RN components 🚀 Expo Go & Web support out of the box Check out our GitHub 👇 or learn more in the 🧵

Software Mansion

65,676 views • 2 months ago

Let's make Android development in React Native great and fun again. This is the official native Material 3 carousel composable rendered using Expo native views. The result is a simple-to-use React component with all native behavior (gestures and transitions) built in.
0:19

Let's make Android development in React Native great and fun again. This is the official native Material 3 carousel composable rendered using Expo native views. The result is a simple-to-use React component with all native behavior (gestures and transitions) built in.

Oliver Lopez

18,097 views • 1 year ago

just shipped a curved scrollbar made with Expo react-native-svg and reanimated works on mobile and web grab the code 👇
0:14

just shipped a curved scrollbar made with Expo react-native-svg and reanimated works on mobile and web grab the code 👇

rs

30,832 views • 1 year ago

No need to add another dependency to implement a native bottom sheet in React Native💡 Just use presentation: "formSheet" from Native Stack 👇
0:10

No need to add another dependency to implement a native bottom sheet in React Native💡 Just use presentation: "formSheet" from Native Stack 👇

Kacper Kapuściak

72,681 views • 5 months ago

the trick to this css card glow/shine effect is blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!
0:18

the trick to this css card glow/shine effect is blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!

jhey ʕ•ᴥ•ʔ

102,613 views • 3 months ago

The Popover API puts your UI on a separate top layer so you can stop fighting with focus management. Plus backdrop styling so short it fits here: [popover]::backdrop { background: rgb(52, 168, 83); backdrop-filter: blur(3px); } Build more with less code→
0:13

The Popover API puts your UI on a separate top layer so you can stop fighting with focus management. Plus backdrop styling so short it fits here: [popover]::backdrop { background: rgb(52, 168, 83); backdrop-filter: blur(3px); } Build more with less code→

Chrome for Developers

40,779 views • 7 months ago

react-native-enriched-markdown just leveled up! 🚀 We've added EnrichedMarkdownInput, which means the library is now a fully rich-text suite for React Native. 💪 You get a Telegram-style selection-based toolbar, seamless Input-to-Output sync with EnrichedMarkdownText, bold/italic/underline/strikethrough and links – all with a flexible API for custom UIs. ✨ Works on iOS, macOS, and Android. Try the nightly release: npm i react-native-enriched-markdown@nightly P.S. Expect new styles soon – we're just getting started!
0:13

react-native-enriched-markdown just leveled up! 🚀 We've added EnrichedMarkdownInput, which means the library is now a fully rich-text suite for React Native. 💪 You get a Telegram-style selection-based toolbar, seamless Input-to-Output sync with EnrichedMarkdownText, bold/italic/underline/strikethrough and links – all with a flexible API for custom UIs. ✨ Works on iOS, macOS, and Android. Try the nightly release: npm i react-native-enriched-markdown@nightly P.S. Expect new styles soon – we're just getting started!

Software Mansion

20,025 views • 2 months ago

Just so you know. This approach also works in React Native This UI was not built with react code 👀
0:14

Just so you know. This approach also works in React Native This UI was not built with react code 👀

Dane Mackier

41,874 views • 2 years ago

iOS 18 Blur vs iOS 26 Glass ✨
0:19

iOS 18 Blur vs iOS 26 Glass ✨

Beta Profiles

3,785,726 views • 1 year ago

Design Engineering Tip: Reduce backdrop blur while the user scrolls fast. Heavy blur during motion destroys perceived smoothness and increases GPU workload. Lowering blur dynamically keeps interfaces crisp while also improving performance. let t; const nav = document.querySelector(".navbar"); window.addEventListener("scroll", () => { nav. style.backdropFilter = "blur(8px)"; clearTimeout(t); t = setTimeout(() => { nav. style.backdropFilter = "blur(24px)"; }, 120); });
0:16

Design Engineering Tip: Reduce backdrop blur while the user scrolls fast. Heavy blur during motion destroys perceived smoothness and increases GPU workload. Lowering blur dynamically keeps interfaces crisp while also improving performance. let t; const nav = document.querySelector(".navbar"); window.addEventListener("scroll", () => { nav. style.backdropFilter = "blur(8px)"; clearTimeout(t); t = setTimeout(() => { nav. style.backdropFilter = "blur(24px)"; }, 120); });

Gabriel

66,344 views • 1 month ago

Slide to Submit + Shimmering Text for Expo Now on GitHub ➤ Copy-paste component, not a library ➤ Built with Software Mansion Reanimated + RNGH ➤ Runs on UI thread (60fps smooth) ➤ Uses react-native-masked-view
0:16

Slide to Submit + Shimmering Text for Expo Now on GitHub ➤ Copy-paste component, not a library ➤ Built with Software Mansion Reanimated + RNGH ➤ Runs on UI thread (60fps smooth) ➤ Uses react-native-masked-view

Solarin

32,485 views • 1 year ago

DAMON PERFORMING A BLUR SONG IN 2025
0:12

DAMON PERFORMING A BLUR SONG IN 2025

ًliza 🗡️

14,002 views • 11 months ago

To celebrate the launch of $BLUR, we are revealing our care packages and giving away 800 $BLUR tokens to one lucky winner 🔥 How to participate 👇 1️⃣ Like + RT this tweet 2️⃣ Follow Juno & Blur 3️⃣ Comment ‘$BLUR on Juno’ Giveaway ends in 48 hours ⏳
0:19

To celebrate the launch of $BLUR, we are revealing our care packages and giving away 800 $BLUR tokens to one lucky winner 🔥 How to participate 👇 1️⃣ Like + RT this tweet 2️⃣ Follow Juno & Blur 3️⃣ Comment ‘$BLUR on Juno’ Giveaway ends in 48 hours ⏳

Juno

216,926 views • 3 years ago

Liquid Glass on iOS 26 vs blur on iOS 18
0:12

Liquid Glass on iOS 26 vs blur on iOS 18

9to5Mac

316,933 views • 1 year ago

BLUR-RED LINES HELL YEAHH ROOTBEER!!! #blur
0:16

BLUR-RED LINES HELL YEAHH ROOTBEER!!! #blur

Clyde

18,890 views • 1 year ago

just taeyeon belting the high notes in <blur>
0:13

just taeyeon belting the high notes in <blur>

ᴛᴀᴇʏᴇᴏɴ ꜱᴛᴜꜰꜰ

106,974 views • 1 year ago