Загрузка видео...

Не удалось загрузить видео

На главную

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.tsx14 дней назад

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

Похожие видео