React-native-blur: com.fivehundredpx.android.blur.BlurringView cannot be cast to android.view.ViewGroup

[newxiaofeng]

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.34, Nexus 5

[connected-mgosbee]

Also having this issue

[grubstarstar]

same here

[mariotacke]

+1

rn 0.37, Nexus 6

[ttdat89]

+1
rn 0.37, Android 6.0

[objectivesheep]

+1 :-(

[connected-mgosbee]

You're going to have to make the BlurView not have any children and absolutely position its sibling ontop of it :-/

[renkangke]

+1 do it youself.... change it to extends viewgroup

[Kureev]

can you take a look, @cmcewen ?

[cmcewen]

could anyone with this problem post some sample code?

[IjzerenHein]

I had the problem when I embedded child views inside a BlurView. After removing the children the problem was gone.

<BlurView>
  <View ... />
  <View ... />
</BlurView>

[EgaSetya]

anyone find workaround for this issue?

[jgkim]

I guess, as @IjzerenHein mentioned above, this issue is because 500px-android-blur cannot have child views (Cf. #69).

[anubhav756]

@connected-mgosbee I did what you asked, like so:

<View style={{ flex: 1 }}>
    <BlurView blurType="light" blurAmount={10} style={{ width: 200, height: 200 }} />
    <Image style={{ position: 'absolute', top: 150, width: 100, height: 100 }} source={{ uri }} />
</View>

... basically, removed children from <BlurView> and made them as siblings with absolute positions (so they appear partially on top of the <BlurView>).

Although I don't get the error, I don't see any blurring effect either.

Any explanations, or am I doing it the wrong way?

[Kureev]

Well, BlurView blurs everything behind it, so if you have an Image above it, it won't be blurred.

<View style={{ flex: 1 }}>
    <Image style={{ position: 'absolute', top: 150, width: 100, height: 100 }} source={{ uri }} />
    <BlurView blurType="light" blurAmount={10} style={{ width: 200, height: 200 }} />
</View>

This looks like what you want, @anubhav756

[anubhav756]

@Kureev Yep, tried that, but it didn't work. However, it DID worked for me when I passed <BlueView> as a child to <Image> and replacing child components of <BlurView> as its siblings, and absolutely positioning <BlueView> (so that it appears over the sibling objects). Thanks anyways :)

[Kureev]

Oh, sorry, idk why I wrote my last comment. It's completely wrong. BlurView should be always contained by the view you want to blur. Everything inside BlurView won't be blurred. You may see it form the basic example in readme:

const { BlurView } = require('react-native-blur');

const Menu = React.createClass({
  render() {
    return (
      <Image source={{uri}} style={styles.menu}>
        <BlurView blurType="light" blurAmount={10} style={styles.blur}>
          <Text>Hi, I am a tiny menu item</Text>
        </BlurView>
      </Image>
    );
  }
});