react-native-blur-effect

Install

``bash
$ yarn add react-native-webview react-native-blur-effect
`

Usage

BlurView covers parent element area
`tsx
import BlurView from 'react-native-blur-effect';
import { View, Text } from 'react-native';

const BlurExampleComponent = () => {
return (

First Text Element

Second Text Element

);
};
``

Precautions

'BlurView' is using webview.

~~When using 'WebView' within 'ScrollView', there is a problem of crashing if it reach to the end of the scroll.
react-native-webview issue link~~
➡️ Fixed at react-native-webview ^13.6.2

~~It is expected to be resolved in 'PR' below If you use 'patch-package', you can use it without crash.
#2874~~
➡️ Fixed at react-native-webview ^13.6.2

About this library

React Native currently does not provide a way to use the Blur effect.
Here are some ways to try.

- with react-native-blur
- with expo-blur
- with imageBackground + transparent
- with react-native-svg
- with react-native-linear-gradient
- with react-native-reanimated
- with react-native-skia

Among the above items,
can not find a case where blur effect was available
without any problems on both aos/ios platforms.

Please share if there is a better alternative than using webview.

Reference

https://gist.github.com/dutradotdev/50c82763fc621ab3c1bd5ba02180ce0d