react-native-blur-effect
v1.1.3
Published
blur effect library for react-native
Downloads
8,309
Maintainers
Readme
react-native-blur-effect
Install
$ yarn add react-native-webview react-native-blur-effect
Usage
BlurView
covers parent element area
import BlurView from 'react-native-blur-effect';
import { View, Text } from 'react-native';
const BlurExampleComponent = () => {
return (
<View>
<Text>First Text Element</Text>
<BlurView backgroundColor="rgba(255, 255, 255, 0.1)" blurRadius={1.5} />
<Text>Second Text Element</Text>
</View>
);
};
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