Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install expo-blur
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import React from 'react'; import { Image, Text, StyleSheet, View } from 'react-native'; import { BlurView } from 'expo-blur'; const uri = 'https://s3.amazonaws.com/exp-icon-assets/ExpoEmptyManifest_192.png'; export default function App() { const text = 'Hello, my container is blurring contents underneath!'; return ( <View style={styles.container}> <Image style={[StyleSheet.absoluteFill, styles.image]} source={{ uri }} /> <BlurView intensity={100} style={styles.blurContainer}> <Text style={styles.text}>{text}</Text> </BlurView> <BlurView intensity={80} tint="light" style={styles.blurContainer}> <Text style={styles.text}>{text}</Text> </BlurView> <BlurView intensity={90} tint="dark" style={styles.blurContainer}> <Text style={[styles.text, { color: '#fff' }]}>{text}</Text> </BlurView> </View> ); } %%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({ container: { flex: 1 }, image: { width: '100%', height: '100%', resizeMode: 'cover', }, blurContainer: { flex: 1, padding: 20, justifyContent: 'center', }, text: { fontSize: 24, fontWeight: '600' }, });
import { BlurView } from 'expo-blur';
Type: Component<{ intensity: number, tint: [object Object] } & ViewProps>
Optional • Type: number
• Default: 50
A number from 1
to 100
to control the intensity of the blur effect.
You can animate this property using Animated API
from React Native or using react-native-reanimated
.
Animating this property usingAnimated API
from React Native withsetNativeDriver: true
does not work.
Optional • Type: BlurTint
• Default: 'default'
A tint mode which will be applied to the view.
string
- Acceptable values are: 'light'
, 'dark'
, 'default'
.