TEXT DIFFUSION OVER IMAGE

[javiercastaneda303]

Hello,

I'm Javi, an engineer at Kubik. My team and I are in a rush.

We're using the "@react-native-community/blur" library, but we've encountered an issue where applying a glow to a photograph also affects the text in front of the photograph.

We've set the z-index to 0 for the photograph, 1 for the blur, and 2 for the text. However, when we add blurRadius, it becomes impossible to work with blurAmount.

We'd like to support both Android and iOS. So the question arises: is there a mistake in our implementation? Should it be possible to blur only the image and not the text? Do we need to add a new feature to the library? What can we do?

We believe that there is a fantastic community behind this library (@react-native-community/blur). Please let us know if there is a solution.

return (
    <>
      {visible && (
        <View style={styles.containerCardBlur}>
          <BlurView
            // blurAmount={1}
            blurRadius={15}
            overlayColor="rgba(252, 252, 252, 0.04)"
            reducedTransparencyFallbackColor="white"
            style={styles.cardBlur}
          />
        </View>
      )}
    </>

[dutradotdev]

same issue here!

[npaul2173]

Same issue here. I even tried keeping two layers, layer 1 will have the blur and layer 2 will have the content, but then also it got diffused. Somebody please answer this

[hugohutri]

Any updates to this? I am having the same issue when using the blur in a header