Liquid-glass in React Native

⚠️ Compatibility Note: Please note that this specific Liquid Glass render engine is designed to work exclusively on iOS 26.

Everyone is talking about the current iOS. But if you look closely at the design trends, the capabilities of native modules, and the refractive glass engines available to developers right now… iOS 26 has already rolled out.

It’s not in a system update. It’s in the code.

The hyper-real, liquid-glass aesthetic that we associate with “futuristic” concepts isn’t a concept anymore. It is launched, it is live, and you can implement it in React Native today with zero lag.

Forget standard opacity. That is ancient history. Today, we are building the iOS 26 standard: real-time, dynamic background refraction.

Here is how you enable it in your app right now.

The Stack

To access this “future” rendering engine, we aren’t using standard Views. We are using the native visual effect blur.

• Library: @callstack/liquid-glass
• Effect: Real-time dynamic blurring (VisualEffectView)
• Result: A UI that breathes.

Step 1: The Setup

First, grab the library that unlocks the native glass engine.

npm install @callstack/liquid-glass cd ios && pod install

OR

yarn @callstack/liquid-glass cd ios && pod install

Step 2: The Environment

“iOS 26” design doesn’t exist in a vacuum. It relies on the environment. You need a vibrant background to prove the glass is working. If you use a flat color, you kill the effect.

Get Sumit Vishwakarma’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

I’m using this high-contrast fluid gradient:

const BACKGROUND_IMAGE_URI = ‘https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=80&w=2070&auto=format&fit=crop';

Step 3: The Code

We are replacing the boring, flat UI components with LiquidGlassView.

Note the specific props I’m using here: effect="clear". This is what gives it that ultra-modern, "barely there" look that defines this new design language.

import React from ‘react’;
import { View, Text, FlatList, ImageBackground, StyleSheet, SafeAreaView } from ‘react-native’;
import { LiquidGlassView } from ‘@callstack/liquid-glass’;

// The “iOS 26” Gradient
const BACKGROUND_IMAGE_URI = ‘https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=80&w=2070&auto=format&fit=crop';

const data = Array.from({ length: 20 }, (_, i) => ({ id: i.toString(), title: `Glass Item ${i + 1}` }));

const IOS26GlassList = () => {
const renderItem = ({ item }) => (
<LiquidGlassView
style={styles.glassItem}
effect=”clear”
interactive={true}
>
<View style={styles.rowContent}>
<View style={styles.avatarPlaceholder} />
<View>
<Text style={styles.itemTitle}>{item.title}</Text>
<Text style={styles.itemSubtitle}>Swipe or tap for details</Text>
</View>
</View>
</LiquidGlassView>
);

return (
<ImageBackground
source={{ uri: BACKGROUND_IMAGE_URI }}
style={styles.backgroundImage}
resizeMode=”cover”
>
<SafeAreaView style={styles.container}>
<Text style={styles.header}>iOS 26 Design</Text>
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={renderItem}
contentContainerStyle={styles.listContent}
showsVerticalScrollIndicator={false}
/>
</SafeAreaView>
</ImageBackground>
);
};

Step 4: The Physics (Styling)

The blur alone isn’t enough. To sell the illusion that this interface has physical presence, we need Borders and Shadows.

Look at glassItem in the styles below. The borderWidth: 1 with low opacity white is the key. It simulates the light catching the edge of the glass pane.

const styles = StyleSheet.create({
container: { flex: 1 },
backgroundImage: {
flex: 1,
width: ‘100%’,
height: ‘100%’,
},
header: {
fontSize: 34,
fontWeight: ‘800’,
color: ‘white’,
textAlign: ‘center’,
marginVertical: 20,
textShadowColor: ‘rgba(0, 0, 0, 0.5)’,
textShadowOffset: { width: 0, height: 2 },
textShadowRadius: 4,
},
listContent: {
paddingHorizontal: 20,
paddingBottom: 40,
},
glassItem: {
marginBottom: 15,
borderRadius: 24, // High border radius is a staple of modern iOS
overflow: ‘hidden’,
// The “Light Catch” Edge
borderWidth: 1.5,
borderColor: ‘rgba(255, 255, 255, 0.25)’,
},
rowContent: {
padding: 20,
flexDirection: ‘row’,
alignItems: ‘center’,
// Subtle internal light
backgroundColor: ‘rgba(255, 255, 255, 0.05)’,
},
avatarPlaceholder: {
width: 44,
height: 44,
borderRadius: 22,
backgroundColor: ‘rgba(255,255,255,0.2)’,
marginRight: 16,
},
itemTitle: {
fontSize: 17,
fontWeight: ‘600’,
color: ‘white’,
letterSpacing: -0.5,
},
itemSubtitle: {
fontSize: 14,
color: ‘rgba(255, 255, 255, 0.7)’,
marginTop: 2,
},
});

export default IOS26GlassList;

The Verdict

Stop waiting for future updates to change how your app looks. The tools to build the “iOS 26” aesthetic are already rolled out and sitting in your npm registry.

Use LiquidGlassView. Add the border. Use a vibrant background.

Your users are living in 2025, but your app can live in 2032.