kureev / react-native-blur Goto Github PK
View Code? Open in Web Editor NEWReact Native Blur component
License: MIT License
React Native Blur component
License: MIT License
It would be cool to be able to add tintColor to the UIVisualEffectView. Any chance?
something like this
Is it possible to blur based on the content of existing view and not an image?
Message is following cannot find directory ProjectLocation/node_modules/react-native-blur/src/BlurView
Just show red borders around the view and no blur at all =((
In your Description you didn't put an example of how to include the viewRef with the rendered component that we want to blur!
When will support for 0.6.0 be out?
I don't see any error in build but BlurView no longer work in app.
RN 0.23 also added new blurRadius prop to Image. Which I don't think is relevant but fyi
My use case is that I'm blurring the whole background view while a panel expands and transits to a new scene;
And when user goes back from the new scene, I want same thing happens - the panel shrinks and the blur goes away.
If I apply LayoutAnimation while expanding the panel and adding the blur view, the blur effect does has a transition animation, but I don't how to apply the same effect while removing the blur view.
Is there currently a possible way to do a nice blur -> plain view transition effect?
It seems I'm unable to configure borderRadius on VibrancyView and BlurViews
blur effect doesn't appear to be working on some iPad devices in simulation
NOT working
working on
this was the image i used as a full screen bg, incase image size has anything to do with it.
http://img00.deviantart.net/8910/i/2011/225/a/7/night_city_lights_by_ati711-d46fp5i.jpg
i thought it might be this size so i tried it with a larger
http://www.fyqyfz.com/data/uploads/15/334042-citylights-blur.jpg
still getting it specific devices.
Hi @Kureev,
Would it be possible to blur the childs of the BlurView ?
I'm asking you that question because of react-native-video, the Video component doesn't support subviews so no way to apply a blur filter currently...
Any idea ?
Thanks
It seems like images are only supported?
Hey,
Awesome work on this.
Tried using Animated with the BlurView but it returns Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Wrapping in view that animates opacity doesn't work either.
Any suggestions?
Doesn't appear to be taking borderRadius even when I have BlurView nested inside a and put a borderRadius on the View.
I'm trying to use this module to add a button on top of my mapview
<View style={styles.container}>
<MapView
style={styles.map}
/>
<VibrancyView
style={styles.button}
blurType="light">
<Text style={styles.buttonText}>Test!</Text>
</VibrancyView>
</View>
Styles:
var styles = StyleSheet.create({
button: {
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 20,
position: "absolute",
bottom: 100,
width: windowSize.width
},
buttonText: {
color: '#007aff',
fontFamily: '.HelveticaNeueInterface-MediumP4',
fontSize: 17,
fontWeight: 'bold',
textAlign: 'center',
},,
map: {
flex: 1
}
});
Here's what I get:
Any hints what I could be doing wrong?
Works fine on iOS8, displays solid background (no blur effect) on iOS9
Hello can you please update the file BlurView and VibranceView, with following imports?
import React from 'react';
import {Component} from 'react';
import {requireNativeComponent} from 'react-native';
Thanks
Looking forward to using this though this is the first native module I've come across recently which didn't have a xcodeproj
file checked in - which is what most people expect right now. It would be nice to have the installation consistency of other modules in this one as well.
For example please see react-native-video. Thanks!
I went into examples/Basic
and ran npm install
. I get the following error when I try to run the packager. The error is the same whether I run npm start
or react-native start
. Thanks.
$ npm start
> [email protected] start /Users/foo/react-native-blur/examples/Basic
> node_modules/react-native/packager/packager.sh
Could not find dependencies.
Ensure dependencies are installed - run 'npm install' from project root.
$ npm -v
3.3.6
$ node -v
v5.0.0
$ react-native -v
react-native-cli: 0.1.10
react-native: 0.11.4
blur view is positioned right and sized properly but all that shows up is a red outline of the view. I also attempted to use it as the child of a standard Image tag and it didnt work..
I followed the installation directions in the README and I can't seem to be able to load the required classes for use in my app.
Let me know if there is any extra data I can get you.
This identifies the earliest OS version on which your software can run.
I am targeting 8.0 and getting warnings:
Object file (/Users/grabbou/Library/Developer/Xcode/DerivedData/este-fmrlxbyzjguqiohdnboycovvmxjd/Build/Products/Debug-iphonesimulator/libRNBlur.a(BlurViewManager.o)) was built for newer iOS version (9.0) than being linked (8.0)
Was there any specific decision behind that?
I'm using multiple BlurView items in one view and I'm hitting performance problems.
I have a list where each item contains: a scaled-down <Image>
, a <Blur View>
and icons.
When I scroll my view the perceived framerate drops significantly. Occasionally I see slight flickers in the <BlurView>
items, as if they were being updated during scroll.
The FPS drops start being visible even in small lists (e.g. 6 elements). They occur both in the simulator and on the device. The issue happens when using <ScrollView>
and with a <ListView>
as well. I've experimented with the shouldRasterizeIOS
View property, but couldn't get it to improve the situation.
how to switch the blurType between 'light/dark/...' and 'none' ?
i want to switch ,but not static effect
thank you
Are there any plans to add Android support?
They will be overwritten on npm install.
When using react-native-blur, the effects rendered in the iOS simulator appear correct, but when built on the iphone itself, are a degree of magnitude darker as if the gamma were cranked down. Is this a known issue, or am I missing something?
Hello and thanks!
Is there a React Native 0.8.0 compatible version out there?
Impossible to make it work for me. Do I miss something?
Thanks a lot.
I'm trying to make react-native-blur working with react-native 0.5 but the only thing I get is a red border around the text:
<View style={styles.container}>
<Image source={require("image!background")}>
<BlurView blurType="light">
<Text>Hi, I am a tiny menu item</Text>
</BlurView>
</Image>
</View>
To try it, i changed package.json in my fork specifying "react-native": "^0.5.x"
as peer dependency. Any idea?
Forgive my ignorance, but should these effects blur everything underneath them? Or does it only blur images?
For example, if I have a page of text, and then put this element on top of it, should I expect a blur?
i hava a image view wrapping the blur view, on the top of my component.the blur effect is ok, but when i scroll the view, the blur view will twinkle.
It would be nice if we could configure a relative "amount" to blur something. This component is great, but I'm finding myself wanting the backgrounds to be blurred much less than this does by default.
Thanks!
When using TouchableHighlight
or TouchableOpacity
component as a child, the blur view would not render. Actually nothing else gets rendered out.
I see react native 0.25 compatibility warning fix is merged, any plan on updating npm package?
light
, extra light
and dark
I added RNBlur to my project correctly and everything, builds fine and is working correctly in my React Native app...with a Debug build that is.
If I try to do a Release build in Xcode, I get this error:
clang: error: no such file or directory: '/Users/marcshilling/Library/Developer/Xcode/DerivedData/Wego-fkagpfjtiozdwmhallyibbxulerw/Build/Products/Release-iphonesimulator/libRNBlur.a'
I've tried some obvious debugging...cleaning the project, comparing the xcodeproj file to other React Native libraries I'm using...what am I missing?
When installing with [email protected], I got the messages below:
The package [email protected] does not satisfy its siblings' peerDependencies requirements!
Could we support 0.12.x now? Is there any known issue about this?
/cc @Kureev
I'm getting this error after installing 0.7.7. Works just fine in 0.7.6.
Unhandled JS Exception: In this environment the target of assign MUST be an object.This error is a performance optimization and not spec compliant.
I'm guessing it's because of 3c0fd0d
Hello, I'm trying to add a blur effect but it seems off. Here's the image with and without this library. I tried both BlurView
and VibrantView
:
Here's the code. Any ideas?
<View style={styles.contentContainer}>
<Image
style={styles.image}
source={this.getImage()}>
<BlurView blurType='light' style={styles.image}/>
</Image>
</View>
Here's my error after:
npm install [email protected] --save
rnpm link
And a:
react-native run-android
* What went wrong:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugCompile'.
> Could not find com.fivehundredpx:blurringview:1.0.0.
Searched in the following locations:
file:/Users/kqn032/dev/Magneto/node_modules/react-native/android/com/fivehundredpx/blurringview/1.0.0/blurringview-1.0.0.pom
file:/Users/kqn032/dev/Magneto/node_modules/react-native/android/com/fivehundredpx/blurringview/1.0.0/blurringview-1.0.0.jar
file:/usr/local/opt/android-sdk/extras/android/m2repository/com/fivehundredpx/blurringview/1.0.0/blurringview-1.0.0.pom
file:/usr/local/opt/android-sdk/extras/android/m2repository/com/fivehundredpx/blurringview/1.0.0/blurringview-1.0.0.jar
I assume I'm missing something that may not be in your npm package?
Breaking change:
This seems to be because we add the effect in layoutSubviews
and don't clean up after any previously created ones - I think we should use setBlurType
to create it instead, and make sure to remove the previously created subview when we change it.
If I add this before creating the visual effect view:
[visualEffectView removeFromSuperView];
It cleans up properly and we get the right number of layers, but we are still creating a bunch and deleting them, and thrashing leads to performance problems.
Line: https://github.com/react-native-fellowship/react-native-blur/blob/v0.7.7/src/BlurView.js#L12
Environment:
react-native: 0.13.2,
babel: 5.8.34
Note, it was working fine w/ version 0.7.6
I have another project using react-native 0.17.0 w/ Babel 6, I'll confirm whether or not they same error happens there and update this issue.
I ran:
$ npm install react-native-blur
[email protected] /Users/foo/FooProject
└── [email protected] extraneous
$ rnpm -V
1.4.1
$ rnpm link
rnpm info Linking react-native-image-picker android dependency
rnpm info Android module react-native-image-picker is already linked
in my project folder. It didn't install any iOS dependencies. Had to do this the old fashioned way. Am I doing something wrong?
Thanks
The following will "Not Work" on iOS:
<BlurView style={{position: 'absolute', float-on-top-of-the-page}}>
<ListView style={{position: 'absolute', left: 0, top: 20}}
dataSource={this.state.dataSource}
renderRow={(row) => <Text>{row}</Text>}
/>
</BlurView>
(The more real-world example is that I have a BlurView header containing an Autocomplete widget that pops open an absolutely-positioned ListView with autocomplete suggestions.)
Unfortunately, the elements in the ListView are unclickable (when those elements fall outside of the bounds of the BlurView). And any clicks/drags/interactions are sent to the elements physically underneath the ListView (ie, the elements outside of the BlurView hierarchy).
The latest version of react-native-blur breaks the build with the following reason:
#import "RCTComponent.h" file not found
BlurView.js line 12 where style is passed to NativeBlurView, it breaks there
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.