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() { return ( <View style={{ flex: 1 }}> <View style={styles.container}> <Image style={styles.blurredImage} source={{ uri }} /> {/* Adjust the tint and intensity */} <BlurView intensity={100} style={[StyleSheet.absoluteFill, styles.nonBlurredContent]}> <Text>Hello! I am bluring contents underneath</Text> </BlurView> </View> </View> ); }
import { BlurView } from 'expo-blur';
light
, default
or dark
.1
to 100
to control the intensity of the blur effect.