React-native-blur: Is it possible to blur arbitrary <Text> or <View> components?

[fogil]

In every demo / example code, this library only shows the effects of blurring an image.

I have tried to blur < Text > and < View > by having a < BlurView > be a sibling of the target blur, but nothing has worked. Q&A / open issues/tickets always talk about blurring images and nothing else.

[ndbroadbent]

Hi, yes you should be able to blur any view. On iOS the BlurView is just a view that blurs whatever is underneath it. On Android, you need to pass a reference to the view. I'm not sure if you can pass a Text component directly, but if not, you can just wrap that in a container View.

In short, yes you can blur any view.

EDIT: Make sure you are using the latest version of react-native-blur.

[dmr07]

Have not been able to get this library on Views or Texts personally.

[ReJaimes]

Me neither, is there away somebody could show an example or something please?

[khrome83]

I too would like to see a example of how this is suppose to work. Can't find any code outside of a image.

[Dylan-at-LION]

+1

[tzusman]

I'm having the same issue. I'd like to blur text, but the only way I've been able to blur the text is to put a blur over the entire layer, including the colored background behind the text. This lightens (or darkens) the background color, in addition to blurring the text.

[madeeha96]

+1

[AshUK]

+1