Skip to main content

​
expo-glass-effect

Version: 55.0.6 A component that renders a native glass effect view on iOS.

​
Installation

npx expo install expo-glass-effect

​
Usage

import { GlassView } from 'expo-glass-effect';
import { Text, StyleSheet } from 'react-native';

function App() {
  return (
    <GlassView intensity={0.8} style={styles.glass}>
      <Text>Glass morphism effect</Text>
    </GlassView>
  );
}

const styles = StyleSheet.create({
  glass: {
    padding: 20,
    borderRadius: 15
  }
});

​
API Reference

​
GlassView Props

​
intensity
number
default:"0.5"
Glass effect intensity (0-1)
​
tint
'light' | 'dark' | 'default'
default:"default"
Tint style for the glass effect
​
style
ViewStyle
Standard React Native view style

​
Examples

​
Basic Glass Card

import { GlassView } from 'expo-glass-effect';
import { ImageBackground, Text, StyleSheet } from 'react-native';

function GlassCard() {
  return (
    <ImageBackground source={require('./bg.jpg')} style={styles.bg}>
      <GlassView intensity={0.7} style={styles.card}>
        <Text style={styles.title}>Glass Card</Text>
        <Text>Content with glass effect background</Text>
      </GlassView>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  bg: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  card: { padding: 30, borderRadius: 20, width: 300 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 10 }
});

​
Platform Support

PlatformSupportedEffect
iOS✅Native glass effect
Android🚧Semi-transparent fallback
Web❌Not supported

​
Resources