This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 52).
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 an experimental feature. To enable it use theexperimentalBlurMethodprop.
Known issues
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 are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions as mentioned by the library's README under "Installation in bare React Native projects" section.
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>
);
}
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>
TODO: Class components are not supported with React Server Components.
blurReductionFactor
number • Default: 4A number by which the blur intensity will be divided on Android.
When using experimental blur methods on Android, the perceived blur intensity might differ from iOS at different intensity levels. This property can be used to fine tune it on Android to match it more closely with iOS.
experimentalBlurMethod
ExperimentalBlurMethod • Default: 'none'Blur method to use on Android.
Currently,BlurViewsupport is experimental on Android and may cause performance and graphical issues. It can be enabled by setting this property.
intensity
number • Default: 50A number from 1 to 100 to control the intensity of the blur effect.
You can animate this property using react-native-reanimated.
tint
BlurTint • Default: 'default'A tint mode which will be applied to the view.
Inherited Props
Types
BlurTint
Literal Type: string
Acceptable values are: 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark'
ExperimentalBlurMethod
Literal Type: string
Blur method to use on Android.
-
'none'- Falls back to a semi-transparent view instead of rendering a blur effect. -
'dimezisBlurView'- Uses a native blur view implementation based on BlurView library. This method may lead to decreased performance and rendering issues during transitions made byreact-native-screens.
Acceptable values are: 'none' | 'dimezisBlurView'
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.