正在加载视频...

视频加载失败

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 条评论

abipraya; 的头像
abipraya;15 天前

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.

abipraya; 的头像
abipraya;15 天前

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.

abipraya; 的头像
abipraya;15 天前

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

abipraya; 的头像
abipraya;15 天前

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

abipraya; 的头像
abipraya;15 天前

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

abipraya; 的头像
abipraya;15 天前

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

abipraya; 的头像
abipraya;15 天前

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>

abipraya; 的头像
abipraya;15 天前

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

abipraya; 的头像
abipraya;15 天前

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

abipraya; 的头像
abipraya;14 天前

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

abipraya; 的头像
abipraya;14 天前

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

odi | mathdroid 的头像
odi | mathdroid15 天前

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

abipraya; 的头像
abipraya;15 天前

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

abipraya; 的头像
abipraya;15 天前

🤟🏻

ehsan 的头像
ehsan15 天前

@expo @reactnative this is impressive!!

abipraya; 的头像
abipraya;15 天前

thank you! 🙏🏻

furi0us 的头像
furi0us14 天前

@expo @reactnative Very nice

abipraya; 的头像
abipraya;14 天前

thank you!

Verse 👾 的头像
Verse 👾15 天前

@expo @reactnative Nice UI. Beautiful

abipraya; 的头像
abipraya;15 天前

thank you!

Ján Turský 的头像
Ján Turský15 天前

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

abipraya; 的头像
abipraya;14 天前

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

Quoc Huy 的头像
Quoc Huy15 天前

@expo @reactnative I appreciate this

abipraya; 的头像
abipraya;15 天前

thank you! 🙏🏻

xi zhou 的头像
xi zhou15 天前

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

abipraya; 的头像
abipraya;15 天前

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

MONARCH 的头像
MONARCH15 天前

@expo @reactnative Sweeeet

abipraya; 的头像
abipraya;15 天前

thanks! 🙏🏻

Salman Khan 的头像
Salman Khan15 天前

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

abipraya; 的头像
abipraya;15 天前

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!

Salman Khan 的头像
Salman Khan15 天前

Yes for sure!

Neon.tsx 的头像
Neon.tsx15 天前

@expo @reactnative Nice!!!

abipraya; 的头像
abipraya;14 天前

thanks !

r17𝕏 的头像
r17𝕏15 天前

@expo @reactnative Congrats for the release

abipraya; 的头像
abipraya;15 天前

thank you bang!

xi zhou 的头像
xi zhou15 天前

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

abipraya; 的头像
abipraya;15 天前

@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

xi zhou 的头像
xi zhou15 天前

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

Kashif Ali Khan 的头像
Kashif Ali Khan15 天前

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

abipraya; 的头像
abipraya;14 天前

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

Mitansh 的头像
Mitansh15 天前

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

abipraya; 的头像
abipraya;15 天前

thank you!

Maryan 的头像
Maryan14 天前

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

abipraya; 的头像
abipraya;14 天前

@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

Maryan 的头像
Maryan14 天前

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

abipraya; 的头像
abipraya;14 天前

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

Pavlo Nekrasov 的头像
Pavlo Nekrasov15 天前

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

abipraya; 的头像
abipraya;15 天前

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

Brjan | AI Builder 的头像
Brjan | AI Builder15 天前

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

abipraya; 的头像
abipraya;15 天前

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

Patience 的头像
Patience15 天前

@expo @reactnative It deserves a try

abipraya; 的头像
abipraya;15 天前

thanks !

Elvis Sonatha 的头像
Elvis Sonatha14 天前

@expo @reactnative keren banget mas, great

abipraya; 的头像
abipraya;14 天前

terimakasih 🙏🏻

Kristian Gerardsson 的头像
Kristian Gerardsson14 天前

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

abipraya; 的头像
abipraya;14 天前

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 🤣

Kristian Gerardsson 的头像
Kristian Gerardsson14 天前

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

abipraya; 的头像
abipraya;14 天前

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

Kristian Gerardsson 的头像
Kristian Gerardsson14 天前

That's crazyyyyy 🤣

Hary Suryanto 的头像
Hary Suryanto15 天前

@expo @reactnative That is cool!

abipraya; 的头像
abipraya;15 天前

thank you!

相关视频