how to make the blur effect with react-native?

Question

how to make the blur effect with react-native ? like \'background-image\'

and i want to switch the effect \'blur\' and \'none\'，\'none\' means no blur effe

Answer 1

Anyone who is trying to blur a video view in react native android, would not be able to do so with the libraries available at the time of writing this answer. But I achieved this effect by using WebView as a frame for the video. Write a little HTML page with video tag in it and style it as per your requirement and then add CSS filter property with blur as it's value, to the style of video tag. Create some javascript functions as well to play and pause the video (they'll be just one liners) which you can call from react-native code using WebView's injectJavaScript() method. You can add this html code directly to the WebView using html property of source probe of WebView component. This is obviously a hacky solution, and it won't be as fast as the native one. If you want to apply some animations or do something with layout of video, then do it with the WebView component in react-native code, that would be as fast other react-native components.