Expo blur view in not working
Expo blur view not working
The code is as it is and you can also find it on final branch on the repo this is a new expo project.
https://github.com/sahilverma-dev/movie-app-test
import {
Text,
StyleSheet,
View,
SafeAreaView,
Image,
ScrollView,
} from "react-native";
import { BlurView } from "expo-blur";
export default function App() {
const text = "Hello, my container is blurring contents underneath!";
return (
<ScrollView style={styles.container}>
<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
style={{
position: "relative",
}}
>
<Image
source={{
uri: "https://image.tmdb.org/t/p/w780/d8Ryb8AunYAuycVKDp5HpdWPKgC.jpg",
}}
style={{
height: 500,
width: 300,
}}
/>
<BlurView
intensity={500}
style={{
position: "absolute",
bottom: 0,
left: 0,
width: "100%",
height: "50%",
}}
/>
</View>
</ScrollView>
);
}
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",
},
box: {
width: "25%",
height: "20%",
},
boxEven: {
backgroundColor: "orangered",
},
boxOdd: {
backgroundColor: "gold",
},
text: {
fontSize: 24,
fontWeight: "600",
},
});
