GitHub
npm
A React component that blurs everything underneath the view. On iOS, it renders a native blur view. On Android, it falls back to a semi-transparent view. Common usage of this is for navigation bars, tab bars, and modals.
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
-
npx 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';
BlurView
Type: React.ReactElement<{
intensity: number,
tint: BlurTint
} & ViewProps>
NOTE: Exotic components are not callable.
intensity
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 using
Animated API
from React Native withsetNativeDriver: true
does not work.
BlurTint
string
- Acceptable values are: 'light'
, 'dark'
, 'default'
.