BlurView doesn't work on iOS9 anymore about react-native-blur HOT 12 CLOSED

Here's an screenshot with the issue

from react-native-blur.

Seem I can make it work if I specify a backgroundColor in the style.

from react-native-blur.

Can you tell us more about it? Maybe it's worth to add to README

from react-native-blur.

It's working perfectly here under iOS 9. Must be something with your code, if you post it maybe we could help.

from react-native-blur.

@olivierlesnicki I've just experienced this error in all platforms due to setting a backgroundColor prop in the parent <ListView /> component that wraps the cell that has the <BlurView />. It might be due how React Native blends views when rendering, IDK.

@Kureev if you want I can put an example reproducing this issue this weekend.

from react-native-blur.

Yeah, it's definitely about the RN itself. I think that example is not needed if @olivierlesnicki can confirm that he experience exactly this issue (in this case I don't have that much ideas how to fix it either remove background color property from the parent ).

@brentvatne mb you have any ideas? Otherwise I gonna close it.

from react-native-blur.

@Kureev hard to replicate. In my case I have a large number of nested views, and I'm unable to extract the combination that is causing the issue. But I'm not using ListViews

from react-native-blur.

Probably is not an issue with ListView but with how RN renders the view tree. It must be blending views to improve performance so the blurred view gets squashed into another super view.

Enviado desde mi iPhone

El 27 sept 2015, a las 8:51, Olivier Lesnicki [email protected] escribió:

@Kureev hard to replicate. In my case I have a large number of nested views, and I'm unable to extract the combination that is causing the issue. But I'm not using ListViews

—
Reply to this email directly or view it on GitHub.

from react-native-blur.

So, any updates so far?

from react-native-blur.

I had this problem as well:

<App>    <--- backgroundColor: 'something-solid'
  (many nested components)
    <BlurView>    <--- incorrectly has solid background

Setting

backgroundColor: 'transparent'

on the (immediate) parent of <BlurView> fixed the issue for me.

EDIT - just noticed that while the above causes the blur to display properly, children of <BlurView> are still rendering incorrectly - for example, setting the color style prop on a <Text> component has no effect. If I remove the <BlurView>, the component renders as expected.

from react-native-blur.

Ok, I think the subject has been solved.
@holmesal Can you create an issue about styling Text element inside BlurView? (That would be awesome, if you can attach some code to it)

from react-native-blur.

@alvaromb Could you please post a sample of how you achieved a blurred bar with a non blurred image underneath?

from react-native-blur.