Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

🤯 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 görüntüleme • 9 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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 görüntüleme • 2 ay önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 1 yıl önce

💡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

368,848 görüntüleme • 1 yıl önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 3 ay önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 2 yıl önce

iOS 18 Blur vs iOS 26 Glass ✨
0:19

iOS 18 Blur vs iOS 26 Glass ✨

Beta Profiles

3,785,726 görüntüleme • 1 yıl önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 1 yıl önce

DAMON PERFORMING A BLUR SONG IN 2025
0:12

DAMON PERFORMING A BLUR SONG IN 2025

ًliza 🗡️

14,002 görüntüleme • 11 ay önce

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,922 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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

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

Clyde

18,890 görüntüleme • 1 yıl önce

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

just taeyeon belting the high notes in <blur>

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

106,974 görüntüleme • 1 yıl önce