How to blur a background view in React-native?

Question

Is there any way to blur a background in react-native without using any external library.

for example, the below code blurs in web versions,

div {
  background-color: rgba(28, 28, 28, 0.8);
  backdrop-filter: blur(14px);
}

I tried using blurRadius and backdropfilter to but none works.

to blur an image background, here is the solution https://stackoverflow.com/questions/37131278/how-to-make-the-blur-effect-with-react-native — Thilina Chamath Hewagama, Nov 05 '22 at 18:29
Does this answer your question? [how to make the blur effect with react-native?](https://stackoverflow.com/questions/37131278/how-to-make-the-blur-effect-with-react-native) — user18309290, Nov 06 '22 at 06:38
@ThilinaChamathHewagama , not really , I knew about bluring a image background but i wanted to blur just a normal view with a plane background color like 'rgba(48,48,48,0.7)' value. — GerAlt, Nov 06 '22 at 07:59

score 0 · Answer 1 · answered Nov 05 '22 at 18:28

if I understood correctly, I think you can use View has low opactiy

<View style={{height:200, width:200 ,opacity:0.5,backgroundColor:'gray'}}>
    <Text>Blur</Text>
</View>

Or you can use ImageBackground

<ImageBackground
  source={require('YOUR_BACKGROUND_IMAGE')}
  blurRadius={90}>

   ....

</ImageBackground>

1 Answers1