Comments (12)
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.
Related Issues (20)
- Is it possible to use BlurView with Reanimated2 to have it go from blur to no blur at all? HOT 7
- When use BlurView in Android for example in a card, when navigate these screen put white background in all screen HOT 17
- can use in macos and windows os? HOT 1
- Android build app crashed in version ^4.3.2 HOT 1
- Add support for Clear/Transparent Blur background HOT 8
- BlurRadius prop not working on IOS platform.
- Error using BlurView inside of TouchableWithoutFeedback tag HOT 1
- The build fail on iOS in react-native 0.73.2 with Fabric enabled HOT 2
- On Android devices, returning from another page results in a white screen HOT 2
- Ripple effect on buttons not working when using blurView event in other component
- [Android] Unable to find /../../../node_modules/react-native/android
- how to give border radius
- Exception thrown while executing UI block: -[BlurView setOnClick:]: unrecognized selector sent to instance 0x11898b1c0 HOT 2
- Item has shadow over blurView on Android HOT 3
- screen cover with white color background issue HOT 3
- When using frosted glass stack to jump in Android mode, ReactNavigation will experience lag and frosted glass will reset HOT 2
- Android - RN .73.6 - BlurView overlapping whole screen HOT 2
- Pressable becomes full screen when inside BlurView on Android HOT 1
- gradient effect is blackish in ios but not showing same view in android HOT 1
- Navigation issue with blurView HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-blur.