React-native-blur: how to use the viewRef in Android

[AnisDerbel]

In your Description you didn't put an example of how to include the viewRef with the rendered component that we want to blur!

[AnisDerbel]

I implement the Example of the refView but I always get this error "com.fivehundredpx.android.blur.BluringView cannot be cast to android.view.ViewGroup"

[Kureev]

cc @cmcewen

[cmcewen]

@AnisDerbel running the example in the examples folder gives you that error? Can you post the stacktrace?

[npomfret]

I have the same issue:

E/unknown:React: Exception in native call from JS
                                                             java.lang.ClassCastException: com.fivehundredpx.android.blur.BlurringView cannot be cast to android.view.ViewGroup
                                                                 at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:298)
                                                                 at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:175)
                                                                 at com.facebook.react.uimanager.UIViewOperationQueue$2.run(UIViewOperationQueue.java:766)
                                                                 at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:830)
                                                                 at com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame(GuardedChoreographerFrameCallback.java:32)
                                                                 at com.facebook.react.uimanager.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:125)
                                                                 at android.view.Choreographer$CallbackRecord.run(Choreographer.java:798)
                                                                 at android.view.Choreographer.doCallbacks(Choreographer.java:603)
                                                                 at android.view.Choreographer.doFrame(Choreographer.java:571)
                                                                 at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:786)
                                                                 at android.os.Handler.handleCallback(Handler.java:815)
                                                                 at android.os.Handler.dispatchMessage(Handler.java:104)
                                                                 at android.os.Looper.loop(Looper.java:194)
                                                                 at android.app.ActivityThread.main(ActivityThread.java:5631)
                                                                 at java.lang.reflect.Method.invoke(Native Method)
                                                                 at java.lang.reflect.Method.invoke(Method.java:372)
                                                                 at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:959)
                                                                 at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:754)

[npomfret]

I ran the example on android and nothing is blurred. However it doesn't crash.

[AnisDerbel]

Yeah the same case here , nothing happens!

[Miraclesomeday]

I have the same problem, someone can tell me?

[cdmalcl]

expecting

[cmcewen]

What devices/version are you running on? This is what I see from a fresh clone/npm install from the repo.

[npomfret]

I'm running on a physical device running android 5.1. The demo doesn't crash with the ClassCastException error as reported above, but there's no blurring.

[vugman]

I'm experiencing the same issue.
Running on android 5.1 API 22 and nothing is blurred.

[AnisDerbel]

I'm also using Device with Android 5.1 API 22 and nothing is blurred.

[Miraclesomeday]

Sorry, I forgot to add the new BlurViewPackage() in MainActivity. Now, It is working perfectly in Nexus 5! Thanks for your library.

[npomfret]

I've just noticed that in the examples the code for android is quite different to the iOS code.

The android code uses the viewRef, but the iOS one doesn't.

The instructions don't mention this - is this difference required?

[jsierles]

Same issue here - not seeing blur on Genymotion Nexus 5 6.0.0. In my own app, I get the casting error.

[npomfret]

I think the casting error might come from the different in the android code to the iOS code, maybe? the instructions on the README are iOS specific, but that's not mentioned. If you look at the android example its quite different. I ran the demo and it didn't crash, but even then, it doesn't blur anything at all.

It would be great if someone could figure out a nice way to abstract away the differences... and to get it to blur on android!

[chenxiaohu]

@npomfret change the demo as blow, see if blurred?
imageLoaded() { let h = findNodeHandle(this.refs.backgroundImage); console.log(h); setTimeout( ()=>this.setState({viewRef: h}), 500 ) }

[Almjz]

@cmcewen Im running on Android 5.0 Asus Zenfone 2. If i use

<BlurView
          blurRadius={10}
          downsampleFactor={5}
          overlayColor={'rgba(255, 255, 255, 0.1)'}
          style={styles.blurView}
          viewRef={this.state.viewRef}
        />

I don't see the error but nothing gets blurred. And When I use

<BlurView blurType="light" style={styles.blur}>
          <Text>Hi, I am a tiny menu item</Text>
        </BlurView>

I see the ClassCastException. So what going on ?

[npomfret]

Ok, the demo also fails an Android if you put something inside the blur view (as @cmcewen said):

        <BlurView
          blurRadius={10}
          downsampleFactor={5}
          overlayColor={'rgba(255, 255, 255, 0.1)'}
          style={styles.blurView}
          viewRef={this.state.viewRef}
        >
          <Text style={styles.welcome}>Blur component</Text>
        </BlurView>

Also, I notice the style blurView is missing from the demo. But not matter what I've tried I can't make it blur anything.

[npomfret]

@cmcewen what virtual device is that screen shot from?

[cmcewen]

@npomfret Nexus 5/6.0.0 in genymotion

It may be something that the view isn't instantiated before it tries blurring? Did you try @chenxiaohu's suggestion?

We are using this in Flare (https://play.google.com/store/apps/details?id=com.godaddy.flare&hl=en) on the profile page and it seems to be working fine on all the devices I've tried.

[npomfret]

Yes, sorry. That change does make the demo work. Not sure why it works though, what the timeout for?

How do I ge the Android version to work like the iOS one? I want to blur just a bit of an image, the bit with my text on it. But if I place anything inside the BlurView on android it crashes with the _ClassCastException_

[cmcewen]

@npomfret I'm not sure but it's possible that when the ref is created the native view still isn't instantiated so there is nothing to blur.

For that use case, you might try creating a view absolutely positioned over the image and try blurring that view

[proshoumma]

well, my app doesn't crash, but its just showing a red border around the image. using rn 0.29 and android 5

[akd6162]

Every body is asking .....but can any one give the solution of same problem (No errors , No Blurring)

I have same issue too

[hiaw]

Same here. Ran the example. The image doesn't blur but it does put the overlay colour on it.

[npomfret]

Yes, the example doesn't work on Android without @chenxiaohu changes.

[hiaw]

OK. using @chenxiaohu changes works. The flicker is a bit annoying but at least it works now.

[OCNVN]

Hi, I have the same problem with Android, registering the library on MainApplication causes an exception to be thrown

java.lang.ClassCastException: com.fivehundredpx.android.blur.BlurringView cannot be cast to android.view.ViewGroup

Therefore on iOS it works
tested on rn 0.33, Nexus 5

[tuneZola]

@OCNVN, I am getting the same thing. The nested component that I am using in the BlurView has several nested views, I think that is causing it to fail. iOS is find, but, I cannot seem to get around this issue on android.

[npomfret]

It doesn't really work that well in android, even when it works it has different behaviour to iOS. I gave up with it and used a transparency instead on Android.

[jigishchawda]

The reason ClassCastException occurs is because of the child components of the BlurView component.
The com.fivehundredpx.android.blur.BlurringView class extends from View and not ViewGroup. In Android, a View cannot have child views. You need to have a view of type ViewGroup to have child views.
Now, if you have child views inside the <BlurView> component, the react-native is trying to instantiate com.fivehundredpx.android.blur.BlurringView and cast it to ViewGroup to populate the child views. This is the reason for ClassCastException issue.

For the actual issue, I am still not able to figure out why the blur effect is not taking place. I have tried to replicate the example except for the Image to be a View component.

[breadadams]

I was seeing the same as @shoumma (just a red border, even though it seemed module was linked), but after comparing with the demo I noticed my MainApplication.java was missing import com.cmcewen.blurview.BlurViewPackage; & new BlurViewPackage() (the later inside protected List<ReactPackage> getPackages() {).

Linked this up and now the app crashes whenever a View mounts containing a BlurView. As others have mentioned, I have child components inside the BlurView.

Think I'm going to take the same route as @npomfret... 😿

[OCNVN]

@breadadams as @jigishchawda mentioned the reason is because BlurView contains child elements, as a workaround I just put the BlurView without children and beside the actual container (the view that contains the children ) with position: "absolute" and then just adjusting the width and height, that worked

[breadadams]

Awesome @OCNVN, that sounds like it'd work... However just gave it a try and now I'm getting this https://github.com/react-native-community/react-native-blur/issues/110

[breadadams]

Ok #110 is closed. All seems to be working (no crashing anymore) except I don't actually see any blur.

The ref is being passed through correctly, but no matter what parameters I enter I see no change. I even changed overlayColor to 'red', and no sign of that. _However_, if I add backgroundColor: 'red' to the elements style prop, I see that 🤔

Totally considering giving up, spent more than the available time trying to integrate this in my app 😖

[anubhav756]

@OCNVN I followed what you said, like so:

<View style={{ flex: 1 }}>
  <View style={{ flex: 1 }}>
    <Image style={{ flex: 1 }} source={{ uri }} />
  </View>
  <BlurView
        style={{ position: 'absolute', width: 500, height: 500 }}
        downsampleFactor={5}
        overlayColor={'rgba(255, 255, 255, 0.1)'}
        blurRadius={10}
  />
</View>

... but nothing's getting blurred. Please check my code. Thanks :)

[anubhav756]

Oops I didn't see the example before. Worked for me like breeze

[DomiR]

For more info see my comment at: https://github.com/react-native-community/react-native-blur/issues/199

[gitlovenotwar]

I have the same problem. I have followed all the steps and reproduce the same component on the example, using image loaded(for images) and (didMount ref for a view) both seems to crash, with no error on the chrome console. Please help :(

[fungilation]

Same issue too, no error, no blurring on android (works fine on iOS). I'm on latest versions and RN 0.54.4

[Dhaval240420]

hey @fungilation did get the solution for this issue please answer

[fungilation]

Nope. I gave up and just used a rgba translucent View

[Dhaval240420]

me too, i gave up and use rgba value temporary if you get solution then please share with me @fungilation