expo-glass-effect

Native glass morphism effect view for iOS

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

Platform	Supported	Effect
iOS	✅	Native glass effect
Android	🚧	Semi-transparent fallback
Web	❌	Not supported

Resources

• Official Documentation
• GitHub Repository