search

Kureev / react-native-blur

React Native Blur component
MIT License
3.78k stars 558 forks source link

BlurView doesn't work on iOS9 anymore #23

Closed olivierlesnicki closed 9 years ago

olivierlesnicki commented 9 years ago

Works fine on iOS8, displays solid background (no blur effect) on iOS9

olivierlesnicki commented 9 years ago

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

Kureev commented 9 years ago

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

alvaromb commented 9 years ago

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

screen shot 2015-09-23 at 18 24 38
alvaromb commented 9 years ago

@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.

alvaromb commented 9 years ago

Here's an screenshot with the issue

screen shot 2015-09-25 at 16 26 23
Kureev commented 9 years ago

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.

olivierlesnicki commented 9 years ago

@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

alvaromb commented 9 years ago

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 notifications@github.com 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.

Kureev commented 9 years ago

So, any updates so far?

holmesal commented 9 years ago

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.

Kureev commented 9 years ago

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)

viperfx commented 8 years ago

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