i am using animated ScrollView and Modal. and i need this blurry background on modal shown on right pic. how can i add this background to this modal? i want blurry effect without npm packages.
<Modal transparent={true}>
CodePudding user response:
you want this: https://reactnative.dev/docs/imagebackground
and use the component prop blurRadius like:
import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";
const image = { uri: "https://reactjs.org/logo-og.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} blurRadius={5} resizeMode="cover" style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: "center"
},
text: {
color: "white",
fontSize: 42,
lineHeight: 84,
fontWeight: "bold",
textAlign: "center",
backgroundColor: "#000000c0"
}
});
export default App;