Expo BlurViewA React component that blurs everything underneath the view.
A React component that blurs everything underneath the view. Common usage of this is for navigation bars, tab bars, and modals.
BlurViewon Android is computationally expensive, so it is recommended not to render more than a fewBlurViewcomponents at once.
Platform Compatibility
| Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
|---|---|---|---|---|
Known issues
Incorrect rendering during screen transitions Android
On Android, BlurView may render incorrectly during screen transitions made by react-native-screens.
Component render re-order in case of dynamic list
The blur effect does not update when BlurView is rendered before dynamic content is rendered using, for example, FlatList. To fix this, make sure that BlurView is rendered after the dynamic content component. For example:
<View>
<FlatList />
<BlurView />
</View>
Installation
- npx expo install expo-blurIf you're installing this in a bare React Native app, you should also follow these additional installation instructions.
Usage
import { Text, StyleSheet, View, SafeAreaView } from 'react-native';
import { BlurView } from 'expo-blur';
export default function App() {
const text = 'Hello, my container is blurring contents underneath!';
return (
<SafeAreaView style={styles.container}>
<View style={styles.background}>
{[...Array(20).keys()].map(i => (
<View
key={`box-${i}`}
style={[styles.box, i % 2 === 1 ? styles.boxOdd : styles.boxEven]}
/>
))}
</View>
<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>
</SafeAreaView>
);
}
%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
container: {
flex: 1,
},
blurContainer: {
flex: 1,
padding: 20,
margin: 16,
textAlign: 'center',
justifyContent: 'center',
overflow: 'hidden',
borderRadius: 20,
},
background: {
flex: 1,
flexWrap: 'wrap',
...StyleSheet.absoluteFill,
},
box: {
width: '25%',
height: '20%',
},
boxEven: {
backgroundColor: 'orangered',
},
boxOdd: {
backgroundColor: 'gold',
},
text: {
fontSize: 24,
fontWeight: '600',
},
});
API
import { BlurView } from 'expo-blur';
Component
BlurView
Type: React.Component<BlurViewProps>
Props
blurReductionFactor
Optional • Type: number • Default: 4
A number by which the blur intensity will be divided on Android.
Due to platform differences blurs on Android and iOS vary slightly and might look different at different intensity levels. This property can be used to fine tune blur intensity on Android to match it more closely with iOS.
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 react-native-reanimated.
Inherited Props
Types
Using borderRadius with BlurView
When using BlurView on Android and iOS, the borderRadius property is not applied when provided explicitly. To fix this, you can use the overflow: 'hidden' style since BlurView inherits props from <View>. See Usage for an example.