Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

another one for the react native community. I just open sourced @rbayuokt/expo-adaptive-glass, adaptive glass UI for Expo / React Native one <GlassSurface> and every phone gets the best glass it can handle, from the newest iPhone to an old Android

16,209 Aufrufe • vor 15 Tagen •via X (Twitter)

61 Kommentare

Profilbild von abipraya;
abipraya;vor 15 Tagen

but why? imo, the react native ecosystem has become very "iOS centric". older iOS and android often get what's left. where I m from, most people use older or budget phones because that's what they can afford. they deserve apps that look good and run smooth too.

Profilbild von abipraya;
abipraya;vor 15 Tagen

how it adapts: - iOS 26: Apple's system glass - older iOS: native blur + Metal lens - Android 13+: live blur + AGSL refraction - low-end phones: clean acrylic frames dropping, phone hot, low power mode on? it steps down on its own and climbs back later.

Profilbild von abipraya;
abipraya;vor 15 Tagen

what s inside: - tab bar with a draggable magnifying lens - switch and slider with a glass thumb - button that morphs into a menu - hold-to-magnify lens - glass that melts together - frosted to clear setting - tab bar for React Navigation and Expo Router - etc

Profilbild von abipraya;
abipraya;vor 15 Tagen

all animation and touch run natively. no reanimated or gesture handler needed. and you can expriment with it and tweak it however you want, it s customizable

Profilbild von abipraya;
abipraya;vor 15 Tagen

try now, tell me what you think 🙌 npx expo install @rbayuokt/expo-adaptive-glass npm: dont forget for the ⭐️ thank you!

Profilbild von abipraya;
abipraya;vor 15 Tagen

Tab Bar + Lens Details iOS : Metal Android : AGSL 🤟🏻🤟🏻🤟🏻

Profilbild von abipraya;
abipraya;vor 15 Tagen

and we can easily do this kind of "merge" / "join" effect as well. we just need GlassGroup and GlassSurface, that s it <GlassGroup... > ....<GlassSurface ..../> ....<GlassSurface ..../> < /GlassGroup>

Profilbild von abipraya;
abipraya;vor 15 Tagen

ahh sorry guys I m really not a video editing expert ( capcut ) 😂 looks like exporting the video compressed it so much that the android version barely shows up. you can try it yourself, or check the full version of the video 🙏🏻🙏🏻

Profilbild von abipraya;
abipraya;vor 15 Tagen

just pushed a new update v0.2.0 the tabbar is now customizable. I ll add a native header too, with consistent behavior across platform and support for both expo router and react navigation. hopefully soon when I get some free time again

Profilbild von abipraya;
abipraya;vor 14 Tagen

v0.3.0 is out. GlassSurfaces now support shadows that dont darken the glass, custom rim colors and widths, plus stronger edge bending on Android ( thanks @mathdroid for the feedback! ) where supported. menus now have disabled rows, checkmarks, separators, fonts, and scrolling 🙌🏻

Profilbild von abipraya;
abipraya;vor 14 Tagen

v0.3.1 is out. iOS 26 style edge refraction is now on Android too, and it s enabled by default so the glass looks more like "real glass". you can turn it off with edgeRefraction={false} don't worry, I'm keeping Android performance in mind too 🤝🏻

Profilbild von odi | mathdroid
odi | mathdroidvor 15 Tagen

@expo @reactnative thanks, will try and use this. tried glass without refraction but it looked 🤮

Profilbild von abipraya;
abipraya;vor 15 Tagen

thank you mas odi! sure, give it a try and please let me know how it goes. I really need the feedback 🙏🏻

Profilbild von abipraya;
abipraya;vor 15 Tagen

🤟🏻

Profilbild von ehsan
ehsanvor 15 Tagen

@expo @reactnative this is impressive!!

Profilbild von abipraya;
abipraya;vor 15 Tagen

thank you! 🙏🏻

Profilbild von furi0us
furi0usvor 14 Tagen

@expo @reactnative Very nice

Profilbild von abipraya;
abipraya;vor 14 Tagen

thank you!

Profilbild von Verse 👾
Verse 👾vor 15 Tagen

@expo @reactnative Nice UI. Beautiful

Profilbild von abipraya;
abipraya;vor 15 Tagen

thank you!

Profilbild von Ján Turský
Ján Turskývor 15 Tagen

@expo @reactnative one <glasssurface> across ios and android is the kind of boring abstraction react native needs more of. following for the device fallbacks, follow back?

Profilbild von abipraya;
abipraya;vor 14 Tagen

haha exactly what I had in mind. keep the API simple and let the native side do the heavy lifting

Profilbild von Quoc Huy
Quoc Huyvor 15 Tagen

@expo @reactnative I appreciate this

Profilbild von abipraya;
abipraya;vor 15 Tagen

thank you! 🙏🏻

Profilbild von xi zhou
xi zhouvor 15 Tagen

@expo @reactnative 厉害👍,我打算把expo的tab 换成你这个

Profilbild von abipraya;
abipraya;vor 15 Tagen

@expo @reactnative thank you! here s the details for the tab

Profilbild von MONARCH
MONARCHvor 15 Tagen

@expo @reactnative Sweeeet

Profilbild von abipraya;
abipraya;vor 15 Tagen

thanks! 🙏🏻

Profilbild von Salman Khan
Salman Khanvor 15 Tagen

@expo @reactnative Amazing this is beautiful! I have tried alot making this but didn’t get the real feel of glass but this looks really good!

Profilbild von abipraya;
abipraya;vor 15 Tagen

thank you, really appreciate it! 🙏 once you ve tried it, please let me know what you think and send me any feedback. let's make it even!

Profilbild von Salman Khan
Salman Khanvor 15 Tagen

Yes for sure!

Profilbild von Neon.tsx
Neon.tsxvor 14 Tagen

@expo @reactnative Nice!!!

Profilbild von abipraya;
abipraya;vor 14 Tagen

thanks !

Profilbild von r17𝕏
r17𝕏vor 15 Tagen

@expo @reactnative Congrats for the release

Profilbild von abipraya;
abipraya;vor 15 Tagen

thank you bang!

Profilbild von xi zhou
xi zhouvor 15 Tagen

@expo @reactnative 很好奇,安卓的一些控件像ios 一般,是你重新二次封装去适配的,还是有第三方ui 库呢

Profilbild von abipraya;
abipraya;vor 15 Tagen

@expo @reactnative no third party lib involved, every android control is its own native view, written from scratch in kotlin, nothing wraps material components, and there is not rn ui kit underneath. the glass effect uses android s render ndoe & render effect for the blur + custom AGSL shaders

Profilbild von xi zhou
xi zhouvor 15 Tagen

@expo @reactnative 谢谢你的回答,bro

Profilbild von Kashif Ali Khan
Kashif Ali Khanvor 15 Tagen

@expo @reactnative handling older android performance gracefully with glass ui is huge honestly

Profilbild von abipraya;
abipraya;vor 14 Tagen

that was one of the main things I wanted to get right, especially for older android devices 👌🏻

Profilbild von Mitansh
Mitanshvor 15 Tagen

@expo @reactnative one GlassSurface that degrades from latest iphone to old android is the hard part shipping that as a single component is clean ✨

Profilbild von abipraya;
abipraya;vor 15 Tagen

thank you!

Profilbild von Maryan
Maryanvor 14 Tagen

@expo @reactnative How are you handling Dynamic Type inside the custom controls, especially when larger text changes their intrinsic height? I recently fixed inline code scaling in an RN library, and this is where supposedly adaptive components often break.

Profilbild von abipraya;
abipraya;vor 14 Tagen

@expo @reactnative the hard part is the menu, it hands row rects to native for the morph and finger tracking, so anything measured once goes stale. rows derive from fontScale (capped at 1.6) and the rects come from that. switch and slider stay fixed like UIKit's. tab bar grows with its labels

Profilbild von Maryan
Maryanvor 14 Tagen

@expo @reactnative ahh okay, why the 1.6 cap?

Profilbild von abipraya;
abipraya;vor 14 Tagen

cause past that a row hits ~70pt so even 6 items blow past the menu panel clamp (half the screen) and the whole thing scrolls. and once it scrolls I have to drop the native drag to select, since the row rects move. capping the row and truncating the label keeps it a menu

Profilbild von Pavlo Nekrasov
Pavlo Nekrasovvor 15 Tagen

@expo @reactnative thanks man I just love how good this Expo and Reactt Native community

Profilbild von abipraya;
abipraya;vor 15 Tagen

@expo @reactnative you re welcome! love seeing the community sharing and helping each other out 🤟🏻

Profilbild von Brjan | AI Builder
Brjan | AI Buildervor 15 Tagen

@expo @reactnative optimizing the UI for various devices is a must, it can really boost user experience

Profilbild von abipraya;
abipraya;vor 15 Tagen

exactly, that s why it s called "adaptive" it can automatically adjust or force the glass effect based on the user s device specs

Profilbild von Patience
Patiencevor 15 Tagen

@expo @reactnative It deserves a try

Profilbild von abipraya;
abipraya;vor 15 Tagen

thanks !

Profilbild von Elvis Sonatha
Elvis Sonathavor 14 Tagen

@expo @reactnative keren banget mas, great

Profilbild von abipraya;
abipraya;vor 14 Tagen

terimakasih 🙏🏻

Profilbild von Kristian Gerardsson
Kristian Gerardssonvor 14 Tagen

@expo @reactnative Why would I want the android app to look like glass lol

Profilbild von abipraya;
abipraya;vor 14 Tagen

cause some clients with a lot of money and zero tech knowledge think liquid glass is already available on android too, and they simply dont want to hear otherwise. apparently, if it exists on ios, it must be ready on android by tomorrow* based on real experience 🤣

Profilbild von Kristian Gerardsson
Kristian Gerardssonvor 14 Tagen

I would just tell them that it doesn't exist. They could talk to Google if they like 😂

Profilbild von abipraya;
abipraya;vor 14 Tagen

trust me, I already told them that and even explained it technically, but they wouldnt listen 😂 their answer? "google will release liquid glass in the future" *not joking I almost lost my mind..... 🤯

Profilbild von Kristian Gerardsson
Kristian Gerardssonvor 14 Tagen

That's crazyyyyy 🤣

Profilbild von Hary Suryanto
Hary Suryantovor 15 Tagen

@expo @reactnative That is cool!

Profilbild von abipraya;
abipraya;vor 15 Tagen

thank you!

Ähnliche Videos