A Liquid Glass da Apple (iOS 26) tornou o vidro translúcido e refrativo a aparência padrão para aplicativos modernos — e agora todos os desenvolvedores React Native querem isso. O problema: a maioria do "vidro" no React Native é realmente apenas desfoque, e as bibliotecas que renderizam verdadeiro Liquid Glass são iOS-only, deixando o Android de fora. Aqui está uma comparação honesta e prática das opções em 2026, incluindo a única que faz isso para iOS e Android.
Rápida resposta: Se você precisar apenas de um fundo desfocado em ambos os sistemas operacionais, use expo-blur. Se for exclusivamente iOS e quiser o Liquid Glass nativo da Apple, use expo-glass-effect ou @callstack/liquid-glass. Se você deseja verdadeiro Liquid Glass em iOS e um efeito refrativo de vidro correspondente no Android, react-native-liquid-glassmorphism é a única opção atualmente — ele renderiza nativo
UIGlassEffectno iOS 26 e um shader AGSL em tempo real no Android.
TL;DR
| expo-blur | @react-native-community/blur | expo-glass-effect | @callstack/liquid-glass | react-native-liquid-glassmorphism | |
|---|---|---|---|---|---|
| Liquid Glass real | ❌ | ❌ | ✅ | ✅ | ✅ |
| Funciona no Android | ✅ (desfoque apenas) | ✅ (desfoque apenas) | ❌ iOS-only | ❌ iOS-only | ✅ shader AGSL |
| Raio de refração (não só desfoque) | ❌ | ❌ | ✅ (iOS, renderizado pelo SO) | ✅ (iOS, renderizado pelo SO) | ✅ ambos os sistemas operacionais |
| Formas personalizadas | ❌ | ❌ | ❌ | ❌ | ✅ |
| Melhor para | Fundo desfocado simples, ambos os sistemas operacionais | Bare-workflow blur | iOS-only apps, menos código | iOS-only, wrapper nativo | Verdadeiro vidro em iOS e Android |
Note a linha Funciona no Android: todas as outras opções dão ao Android apenas um desfoque simples ou nada. Em 2026, o react-native-liquid-glassmorphism é a única biblioteca React Native que renderiza ótica de vidro real — refração, não desfoque — no Android. Essa diferença única é sobre o que essa comparação se resume principalmente.
O que procurar em uma biblioteca React Native de vidro
- Vidro real vs. desfoque — ele refrata o plano de fundo (curva e amplifica através de uma superfície de vidro) ou apenas desfoca? O Vidro Líquido Real tem lentes de borda, um contorno Fresnel e dispersão cromática; uma visualização de desfoque não tem nenhum desses elementos.
- Android — o Liquid Glass da Apple é exclusivo do iOS. A biblioteca oferece algo parecido no Android ou o Android recua para um desfoque plano (ou nada)?
- Interatividade — o vidro reage ao toque e à inclinação do dispositivo com um destaque especular móvel, como o real?
- Formas — pode o vidro ser um círculo, uma esquadria ou um contorno de barra de abas recortadas, ou é sempre retangular?
- Precisão na falha — ele se degrada limpo em iOS < 26 e Android antigos, ou quebra?
O padrão para um plano de fundo desfocado rápido nos aplicativos Expo. Multiplataforma, bem suportado, trivial de usar. Mas é desfoque apenas — sem refração, sem material de vidro do iOS-26, sem interatividade. Ótimo para uma barra de navegação nebulosa; não um visual Liquid Glass.
A visualização de desfoque de fluxo básico que existe há muito tempo. Mesma história que expo-blur: só desfoque, nenhum óptica de vidro.
Esses envolvem o nativo iOS 26 Liquid Glass material da Apple e parecem fantásticos — porque é o verdadeiro efeito do sistema operacional. A limitação é fundamental: iOS 26 apenas. No Android (e em versões mais antigas do iOS), ambos simplesmente recuam para uma visualização opaca View — não há vidro. Perfeito se seu aplicativo for exclusivo do iOS.
Criado especificamente para a lacuna: Vidro Líquido real em ambas as plataformas de um componente. Seus usuários Android provavelmente são metade ou mais da sua base de usuários — com todas as outras bibliotecas nesta lista, eles recebem o melhor um desfoque plano enquanto seus usuários iOS recebem vidro.
- iOS 26 — renderiza o efeito nativo
UIGlassEffectda Apple (com um fallback deUIBlurEffectabaixo da versão 26). - Android — não há suporte nativo para Glassmorphism, então ele simula a ótica em tempo real usando um shader refrativo de lente AGSL: captura o plano de fundo em cada frame, faz a desfocagem e distorce-o através de uma forma redonda com bordas arredondadas, incluindo refração nas bordas, dispersão cromática, reflexão espelhada na borda, um contorno Fresnel e destaque especular ao tocar ou inclinar o dispositivo. Esta é a parte que nenhuma outra biblioteca do React Native faz.
- Interativo — um brilho especular + ampliação ótica sob o dedo, além de reflexos especulares que acompanham o ângulo de inclinação do dispositivo.
- Formas personalizadas —
círculo,squircle,polygon, pontos explícitospoints, ou uma rota SVG arbitrariamente definida (inclusive com bordas côncavas) como um caminhopath. As lentes de vidro desfocam o plano de fundo através da silhueta. - Degrada suavemente — Android 12 → blur + tinta; abaixo de 12 → transparência. iOS < 26 → blur.
npm install react-native-liquid-glassmorphism
import { LiquidGlassView } from 'react-native-liquid-glassmorphism';
<LiquidGlassView variant="regular" tintColor="rgba(10,132,255,0.5)" interactive borderRadius={24}>
<Text>Frosted glass contentText>
LiquidGlassView>
Concessões: é um módulo nativo (precisa de uma build do desenvolvedor / pré-build, não funciona no Expo Go), é mais recente e tem uma comunidade menor em comparação com o expo-blur, e é exclusivamente para dispositivos móveis (ainda sem suporte web). Se você precisa apenas de um blur, o expo-blur é mais simples; se for iOS-only, o expo-glass-effect usa menos código.
Qual você deve escolher?
- Só precisa de um fundo embaçado em ambos os sistemas? → expo-blur.
- Apenas para iOS e quer o efeito Liquid Glass nativo da Apple com código mínimo? → expo-glass-effect / @callstack/liquid-glass.
- Deseja um verdadeiro efeito Liquid Glass no iOS e um efeito de vidro refrativo correspondente no Android, com formas personalizadas e interatividade? → react-native-liquid-glassmorphism.
Perguntas frequentes
O Liquid Glass funciona no Android?
Não nativamente — o Liquid Glass é um material do sistema da Apple e o Android não tem equivalente. A única maneira de obter a aparência no Android hoje é reproduzir a ótica com um shader, que é o que react-native-liquid-glassmorphism faz: captura de fundo por quadro, um RenderEffect embaçado e um shader AGSL de refração (Android 13+, com fallbacks de embaçamento/tinta abaixo disso).
O expo-blur é o mesmo que Liquid Glass?
Não. O expo-blur é um fundo embaçado — ele suaviza o que está atrás da visualização. O Liquid Glass é uma lente: refrata e amplifica o fundo nas bordas, dispersa a cor na borda e reage ao toque e à inclinação. Uma visualização embaçada não lhe dá nenhum desses recursos.
Como adiciono um efeito de glassmorphism no React Native?
Para uma aparência simples de vidro fosco, envolva seu conteúdo em expo-blur's BlurView com uma cor de fundo translúcida. Para ótica real de vidro em ambos os sistemas, use LiquidGlassView do react-native-liquid-glassmorphism — um componente, nenhum código por plataforma.
O react-native-liquid-glassmorphism funciona no Expo Go?
Não — é um módulo nativo, então você precisa de uma versão de desenvolvimento (npx expo prebuild ou EAS Build). Ele envia um plugin de configuração, então a instalação em um projeto gerenciado do Expo ainda é uma linha no app.json.
O que acontece em versões mais antigas do iOS e Android?
Ele degrada camada por camada ao invés de quebrar: o iOS abaixo da versão 26 recebe UIBlurEffect; o Android 12 recebe embaçamento + tinta; abaixo do Android 12 recebe uma tinta translúcida com um contorno.
Links: Documentação e guias · GitHub (fonte + demonstrações lado a lado iOS/Android) · Pacote npm — se isso economizar seu tempo, um ⭐ no GitHub ajuda outras pessoas a encontrá-lo.
Criei o renderizador do Android para esta biblioteca do zero (captura de fundo + shader AGSL de refração), então se você tem perguntas sobre como qualquer parte funciona — ou acha que cometi um erro em uma comparação — deixe um comentário. Eu realmente gostaria de saber qual efeito de vidro você está tentando criar.