1# Visual Effects
2 
3## Backdrop Blur
4 
5Use `expo-blur` for blur effects. Prefer systemMaterial tints as they adapt to dark mode.
6 
7```tsx
8import { BlurView } from "expo-blur";
9 
10<BlurView tint="systemMaterial" intensity={100} />;
11```
12 
13### Tint Options
14 
15```tsx
16// System materials (adapt to dark mode)
17<BlurView tint="systemMaterial" />
18<BlurView tint="systemThinMaterial" />
19<BlurView tint="systemUltraThinMaterial" />
20<BlurView tint="systemThickMaterial" />
21<BlurView tint="systemChromeMaterial" />
22 
23// Basic tints
24<BlurView tint="light" />
25<BlurView tint="dark" />
26<BlurView tint="default" />
27 
28// Prominent (more visible)
29<BlurView tint="prominent" />
30 
31// Extra light/dark
32<BlurView tint="extraLight" />
33```
34 
35### Intensity
36 
37Control blur strength with `intensity` (0-100):
38 
39```tsx
40<BlurView tint="systemMaterial" intensity={50} />  // Subtle
41<BlurView tint="systemMaterial" intensity={100} /> // Full
42```
43 
44### Rounded Corners
45 
46BlurView requires `overflow: 'hidden'` to clip rounded corners:
47 
48```tsx
49<BlurView
50  tint="systemMaterial"
51  intensity={100}
52  style={{
53    borderRadius: 16,
54    overflow: 'hidden',
55  }}
56/>
57```
58 
59### Overlay Pattern
60 
61Common pattern for overlaying blur on content:
62 
63```tsx
64<View style={{ position: 'relative' }}>
65  <Image source={{ uri: '...' }} style={{ width: '100%', height: 200 }} />
66  <BlurView
67    tint="systemUltraThinMaterial"
68    intensity={80}
69    style={{
70      position: 'absolute',
71      bottom: 0,
72      left: 0,
73      right: 0,
74      padding: 16,
75    }}
76  >
77    <Text style={{ color: 'white' }}>Caption</Text>
78  </BlurView>
79</View>
80```
81 
82## Glass Effects (iOS 26+)
83 
84Use `expo-glass-effect` for liquid glass backdrops on iOS 26+.
85 
86```tsx
87import { GlassView } from "expo-glass-effect";
88 
89<GlassView style={{ borderRadius: 16, padding: 16 }}>
90  <Text>Content inside glass</Text>
91</GlassView>
92```
93 
94### Interactive Glass
95 
96Add `isInteractive` for buttons and pressable glass:
97 
98```tsx
99import { GlassView } from "expo-glass-effect";
100import { SymbolView } from "expo-symbols";
101import { PlatformColor } from "react-native";
102 
103<GlassView isInteractive style={{ borderRadius: 50 }}>
104  <Pressable style={{ padding: 12 }} onPress={handlePress}>
105    <SymbolView name="plus" tintColor={PlatformColor("label")} size={36} />
106  </Pressable>
107</GlassView>
108```
109 
110### Glass Buttons
111 
112Create liquid glass buttons:
113 
114```tsx
115function GlassButton({ icon, onPress }) {
116  return (
117    <GlassView isInteractive style={{ borderRadius: 50 }}>
118      <Pressable style={{ padding: 12 }} onPress={onPress}>
119        <SymbolView name={icon} tintColor={PlatformColor("label")} size={24} />
120      </Pressable>
121    </GlassView>
122  );
123}
124 
125// Usage
126<GlassButton icon="plus" onPress={handleAdd} />
127<GlassButton icon="gear" onPress={handleSettings} />
128```
129 
130### Glass Card
131 
132```tsx
133<GlassView style={{ borderRadius: 20, padding: 20 }}>
134  <Text style={{ fontSize: 18, fontWeight: '600', color: PlatformColor("label") }}>
135    Card Title
136  </Text>
137  <Text style={{ color: PlatformColor("secondaryLabel"), marginTop: 8 }}>
138    Card content goes here
139  </Text>
140</GlassView>
141```
142 
143### Checking Availability
144 
145```tsx
146import { isLiquidGlassAvailable } from "expo-glass-effect";
147 
148if (isLiquidGlassAvailable()) {
149  // Use GlassView
150} else {
151  // Fallback to BlurView or solid background
152}
153```
154 
155### Fallback Pattern
156 
157```tsx
158import { GlassView, isLiquidGlassAvailable } from "expo-glass-effect";
159import { BlurView } from "expo-blur";
160 
161function AdaptiveGlass({ children, style }) {
162  if (isLiquidGlassAvailable()) {
163    return <GlassView style={style}>{children}</GlassView>;
164  }
165 
166  return (
167    <BlurView tint="systemMaterial" intensity={80} style={style}>
168      {children}
169    </BlurView>
170  );
171}
172```
173 
174## Sheet with Glass Background
175 
176Make sheet backgrounds liquid glass on iOS 26+:
177 
178```tsx
179<Stack.Screen
180  name="sheet"
181  options={{
182    presentation: "formSheet",
183    sheetGrabberVisible: true,
184    sheetAllowedDetents: [0.5, 1.0],
185    contentStyle: { backgroundColor: "transparent" },
186  }}
187/>
188```
189 
190## Best Practices
191 
192- Use `systemMaterial` tints for automatic dark mode support
193- Always set `overflow: 'hidden'` on BlurView for rounded corners
194- Use `isInteractive` on GlassView for buttons and pressables
195- Check `isLiquidGlassAvailable()` and provide fallbacks
196- Avoid nesting blur views (performance impact)
197- Keep blur intensity reasonable (50-100) for readability
198