正在加载视频...
视频加载失败
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 次观看 • 15 天前 •via X (Twitter)
61 条评论

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.

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.

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

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

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

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

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>

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 🙏🏻🙏🏻

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

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 🙌🏻

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 🤝🏻

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

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

🤟🏻

@expo @reactnative this is impressive!!

thank you! 🙏🏻

@expo @reactnative Very nice

thank you!

@expo @reactnative Nice UI. Beautiful

thank you!

@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?

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

@expo @reactnative I appreciate this

thank you! 🙏🏻

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

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

@expo @reactnative Sweeeet

thanks! 🙏🏻

@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!

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!

Yes for sure!

@expo @reactnative Nice!!!

thanks !

@expo @reactnative Congrats for the release

thank you bang!

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

@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

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

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

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

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

thank you!

@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.

@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

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

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

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

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

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

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

@expo @reactnative It deserves a try

thanks !

@expo @reactnative keren banget mas, great

terimakasih 🙏🏻

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

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 🤣

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

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..... 🤯

That's crazyyyyy 🤣

@expo @reactnative That is cool!

thank you!
