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
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?
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.
When will support for 0.6.0 be out?
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?
Message is following cannot find directory ProjectLocation/node_modules/react-native-blur/src/BlurView
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?
In your Description you didn't put an example of how to include the viewRef with the rendered component that we want to blur!
It seems like images are only supported?
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!
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
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.
Are there any plans to add Android support?
Just show red borders around the view and no blur at all =((
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.
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.
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
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..
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.
The latest version of react-native-blur breaks the build with the following reason:
#import "RCTComponent.h" file not found
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?
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).
Doesn't appear to be taking borderRadius even when I have BlurView nested inside a and put a borderRadius on the View.
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?
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.
Is it possible to blur based on the content of existing view and not an image?
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 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
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
When using TouchableHighlight
or TouchableOpacity
component as a child, the blur view would not render. Actually nothing else gets rendered out.
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
how to switch the blurType between 'light/dark/...' and 'none' ?
i want to switch ,but not static effect
thank you
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?
I see react native 0.25 compatibility warning fix is merged, any plan on updating npm package?
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
light
, extra light
and dark
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!
They will be overwritten on npm install.
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>
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?
It would be cool to be able to add tintColor to the UIVisualEffectView. Any chance?
something like this
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?
Breaking change:
BlurView.js line 12 where style is passed to NativeBlurView, it breaks there
Works fine on iOS8, displays solid background (no blur effect) on iOS9
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?
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.