search

Kureev / react-native-blur

React Native Blur component
MIT License
3.77k stars 557 forks source link

Non Text element glowing when using Blurview, #430

Open parmarkamlesh opened 3 years ago

parmarkamlesh commented 3 years ago

image How to fix this glow effect when using BlurView, tested on android phones and emulator

ajfranzoia commented 3 years ago

I'm having the same issue with the latest version

JeffersonFilho commented 3 years ago

I'm having the same issue, did you guys managed to fix it?

stormcloud266 commented 3 years ago

I was able to work around this issue by moving all the elements I wanted to be on top of the BlurView into a child of the BlurView. I also had to add backgroundColor: 'transparent' to the outermost child element or I would get layout issues on load (no padding or margin, items would collapse onto each other).

Screenshot_1631060626

<ImageBackground
    source={image}
    resizeMode="cover"
    style={{
        flex: 1,
        justifyContent: 'center'
    }}
>
    <BlurView
        blurType="light"
        blurAmount={4}
        overlayColor="transparent"
        reducedTransparencyFallbackColor="rgba(255,255,255,.2)"
    >
        <View style={{ padding: 40, backgroundColor: 'transparent' }}>
            <Text style={{ fontSize: 40, color: 'white' }}>Hello, World</Text>
        </View>
    </BlurView>
</ImageBackground>
erksch commented 1 year ago

I also had to add zIndex: 1 to the container within BlurView so that layouting worked again.