Loading video...

Video Failed to Load

Go Home

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 views • 15 days ago •via X (Twitter)

61 Comments

abipraya;'s profile picture
abipraya;15 days ago

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;'s profile picture
abipraya;15 days ago

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;'s profile picture
abipraya;15 days ago

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;'s profile picture
abipraya;15 days ago

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;'s profile picture
abipraya;15 days ago

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

abipraya;'s profile picture
abipraya;15 days ago

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

abipraya;'s profile picture
abipraya;15 days ago

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;'s profile picture
abipraya;15 days ago

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;'s profile picture
abipraya;15 days ago

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;'s profile picture
abipraya;14 days ago

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;'s profile picture
abipraya;14 days ago

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's profile picture
odi | mathdroid15 days ago

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

abipraya;'s profile picture
abipraya;15 days ago

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

abipraya;'s profile picture
abipraya;15 days ago

🤟🏻

ehsan's profile picture
ehsan15 days ago

@expo @reactnative this is impressive!!

abipraya;'s profile picture
abipraya;15 days ago

thank you! 🙏🏻

furi0us's profile picture
furi0us14 days ago

@expo @reactnative Very nice

abipraya;'s profile picture
abipraya;14 days ago

thank you!

Verse 👾's profile picture
Verse 👾15 days ago

@expo @reactnative Nice UI. Beautiful

abipraya;'s profile picture
abipraya;15 days ago

thank you!

Ján Turský's profile picture
Ján Turský15 days ago

@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;'s profile picture
abipraya;14 days ago

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

Quoc Huy's profile picture
Quoc Huy15 days ago

@expo @reactnative I appreciate this

abipraya;'s profile picture
abipraya;15 days ago

thank you! 🙏🏻

xi zhou's profile picture
xi zhou15 days ago

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

abipraya;'s profile picture
abipraya;15 days ago

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

MONARCH's profile picture
MONARCH15 days ago

@expo @reactnative Sweeeet

abipraya;'s profile picture
abipraya;15 days ago

thanks! 🙏🏻

Salman Khan's profile picture
Salman Khan15 days ago

@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;'s profile picture
abipraya;15 days ago

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's profile picture
Salman Khan15 days ago

Yes for sure!

Neon.tsx's profile picture
Neon.tsx14 days ago

@expo @reactnative Nice!!!

abipraya;'s profile picture
abipraya;14 days ago

thanks !

r17𝕏's profile picture
r17𝕏15 days ago

@expo @reactnative Congrats for the release

abipraya;'s profile picture
abipraya;15 days ago

thank you bang!

xi zhou's profile picture
xi zhou15 days ago

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

abipraya;'s profile picture
abipraya;15 days ago

@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's profile picture
xi zhou15 days ago

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

Kashif Ali Khan's profile picture
Kashif Ali Khan14 days ago

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

abipraya;'s profile picture
abipraya;14 days ago

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

Mitansh's profile picture
Mitansh15 days ago

@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;'s profile picture
abipraya;15 days ago

thank you!

Maryan's profile picture
Maryan14 days ago

@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;'s profile picture
abipraya;14 days ago

@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's profile picture
Maryan14 days ago

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

abipraya;'s profile picture
abipraya;14 days ago

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's profile picture
Pavlo Nekrasov15 days ago

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

abipraya;'s profile picture
abipraya;15 days ago

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

Brjan | AI Builder's profile picture
Brjan | AI Builder15 days ago

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

abipraya;'s profile picture
abipraya;15 days ago

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's profile picture
Patience15 days ago

@expo @reactnative It deserves a try

abipraya;'s profile picture
abipraya;15 days ago

thanks !

Elvis Sonatha's profile picture
Elvis Sonatha14 days ago

@expo @reactnative keren banget mas, great

abipraya;'s profile picture
abipraya;14 days ago

terimakasih 🙏🏻

Kristian Gerardsson's profile picture
Kristian Gerardsson14 days ago

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

abipraya;'s profile picture
abipraya;14 days ago

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's profile picture
Kristian Gerardsson14 days ago

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

abipraya;'s profile picture
abipraya;14 days ago

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's profile picture
Kristian Gerardsson14 days ago

That's crazyyyyy 🤣

Hary Suryanto's profile picture
Hary Suryanto15 days ago

@expo @reactnative That is cool!

abipraya;'s profile picture
abipraya;15 days ago

thank you!

Related Videos