react-native-blur icon indicating copy to clipboard operation
react-native-blur copied to clipboard

Is it possible to blur arbitrary <Text> or <View> components?

Open fogil opened this issue 7 years ago • 9 comments

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.

fogil avatar May 05 '17 12:05 fogil

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.

ndbroadbent avatar May 13 '17 10:05 ndbroadbent

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

dmr07 avatar Jul 11 '17 00:07 dmr07

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

ReJaimes avatar Jan 29 '18 22:01 ReJaimes

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

khrome83 avatar May 13 '18 13:05 khrome83

+1

Dylan-Wells-at-LION avatar Jul 05 '18 21:07 Dylan-Wells-at-LION

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.

tzusman avatar Jul 29 '18 20:07 tzusman

+1

madeeha96 avatar Sep 28 '18 13:09 madeeha96

+1

AshUK avatar Apr 26 '19 15:04 AshUK

+1

VictorHCord avatar Sep 13 '21 14:09 VictorHCord