Liquid Glass dans React Native avec Expo

Liquid Glass est le langage visuel d'Apple depuis iOS 26 : des surfaces translucides qui réfractent et reflètent ce qui se trouve derrière elles. Avec iOS 27, Apple l'a affiné une réfraction plus uniforme, un meilleur contraste et les utilisateurs peuvent désormais choisir si le verre est plus transparent ou plus teinté.

Bonne nouvelle pour les développeurs React Native : avec Expo, pas besoin d'écrire du Swift pour en profiter. Il existe trois approches, de « gratuit » à « contrôle total ».

1. Les onglets natifs : Liquid Glass sans effort

Si votre application utilise Expo Router, les onglets natifs affichent la vraie barre d'onglets iOS et à partir d'iOS 26, le système la dessine en Liquid Glass, en reprenant les couleurs du contenu situé derrière.

// app/(tabs)/_layout.tsx SDK 58
import { NativeTabs } from "expo-router/native-tabs";

export default function TabLayout() {
  return (
    <NativeTabs minimizeBehavior="onScrollDown">
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Label>Accueil</NativeTabs.Trigger.Label>
        <NativeTabs.Trigger.Icon sf="house.fill" md="home" />
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="search" role="search">
        <NativeTabs.Trigger.Label>Recherche</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}

• minimizeBehavior="onScrollDown" réduit la barre d'onglets pendant le défilement, comme dans les applications d'Apple.
• role="search" crée l'onglet de recherche séparé introduit avec iOS 26.
• Les onglets natifs sont stables à partir du SDK 58. Sur les SDK 55 à 57, importez depuis expo-router/unstable-native-tabs.

2. expo-glass-effect : du verre sur n'importe quelle vue

Pour des cartes, des boutons flottants ou des barres d'outils, expo-glass-effect expose la vue de verre native sous forme de deux composants React.

npx expo install expo-glass-effect

GlassView est la surface de verre. GlassContainer en regroupe plusieurs pour qu'elles fusionnent lorsqu'elles sont proches c'est la partie « liquide » de Liquid Glass.

import { StyleSheet, View } from "react-native";
import { GlassContainer, GlassView, isLiquidGlassAvailable } from "expo-glass-effect";

export function Toolbar({ children }: { children: React.ReactNode }) {
  // Android, le web et iOS < 26 reçoivent un fond plein à la place du verre.
  if (!isLiquidGlassAvailable()) {
    return <View style={[styles.bar, styles.fallback]}>{children}</View>;
  }

  return (
    <GlassContainer spacing={10} style={styles.row}>
      <GlassView style={styles.bar} glassEffectStyle="regular" isInteractive>
        {children}
      </GlassView>
    </GlassContainer>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: "row", gap: 8 },
  bar: { borderRadius: 24, paddingHorizontal: 16, paddingVertical: 12 },
  fallback: { backgroundColor: "rgba(255,255,255,0.9)" },
});

Les propriétés à connaître :

3. Expo UI : l'approche SwiftUI

Quand vous voulez exactement le comportement de SwiftUI, Expo UI permet d'écrire des vues SwiftUI depuis React et d'appliquer directement le modificateur glassEffect.

import { Host, Text } from "@expo/ui/swift-ui";
import { glassEffect, padding } from "@expo/ui/swift-ui/modifiers";

export function GlassLabel() {
  return (
    <Host matchContents>
      <Text modifiers={[padding({ all: 16 }), glassEffect({ glass: { variant: "regular" } })]}>
        Liquid Glass
      </Text>
    </Host>
  );
}

Host fait le pont : tout ce qu'il contient est du vrai SwiftUI. Expo UI nécessite un build de développement, pas Expo Go.

Les erreurs à éviter

• Mettre opacity: 0 sur une vue de verre (ou son parent) désactive l'effet. Pour faire apparaître ou disparaître le verre, utilisez plutôt glassEffectStyle={{ style: "regular", animate: true }}.
• La backgroundColor de la barre d'onglets est ignorée à partir d'iOS 26. Le verre prend sa couleur du contenu utilisez DynamicColorIOS pour des icônes lisibles en mode clair comme en mode sombre.
• Ne concevez pas uniquement pour iOS. Sur Android et le web, GlassView devient une simple View. Vérifiez isLiquidGlassAvailable() et donnez à ces plateformes un fond plein.
• Testez la lisibilité avec les deux réglages du verre. Comme iOS 27 permet de rendre le verre plus transparent ou plus teinté, vérifiez que vos textes restent lisibles dans les deux cas.

Laquelle choisir ?

1. Commencez par les onglets natifs vous obtenez Liquid Glass là où les utilisateurs le remarquent le plus, sans code en plus.
2. Ajoutez expo-glass-effect pour les éléments flottants : barres d'outils, cartes, boutons.
3. Passez à Expo UI quand un écran doit se comporter exactement comme un écran SwiftUI natif.

Sources

• Documentation Expo : GlassEffect
• Documentation Expo : onglets natifs
• Blog Expo : Liquid Glass avec Expo UI et SwiftUI
• MacRumors : nouveautés d'iOS 27