When will support for 0.6.0 be out?

Just show red borders around the view and no blur at all =((

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

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!

It seems like images are only supported?

Doesn't appear to be taking borderRadius even when I have BlurView nested inside a and put a borderRadius on the View.

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>

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

Is it possible to blur based on the content of existing view and not an image?

blur effect doesn't appear to be working on some iPad devices in simulation

NOT working

• iPad Retina
• iPad 2

working on

• iPad pro
• iPad Air

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.

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?

They will be overwritten on npm install.

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

BlurView.js line 12 where style is passed to NativeBlurView, it breaks there

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

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

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?

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?

It would be cool to be able to add tintColor to the UIVisualEffectView. Any chance?

something like this

http://i.stack.imgur.com/FUJuH.png

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.

It seems I'm unable to configure borderRadius on VibrancyView and BlurViews

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.

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

In your Description you didn't put an example of how to include the viewRef with the rendered component that we want to blur!

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?

Are there any plans to add Android support?

how to switch the blurType between 'light/dark/...' and 'none' ?

i want to switch ,but not static effect

thank you

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

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

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

• Working prototype
• More examples (your ideas are very welcome)
• Support different types of blur: light, extra light and dark

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.

When using TouchableHighlight or TouchableOpacity component as a child, the blur view would not render. Actually nothing else gets rendered out.

Message is following cannot find directory ProjectLocation/node_modules/react-native-blur/src/BlurView

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

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 see react native 0.25 compatibility warning fix is merged, any plan on updating npm package?

I've used the BlurView in my previous project, It was working as expected but I couldn't make it work for my current project.

I've tried like in the example. Tried BlurView on both for parent and child component, it's the same.
The gray area in the screenshot should be blurred.

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

The latest version of react-native-blur breaks the build with the following reason:
#import "RCTComponent.h" file not found

Breaking change:

facebook/react-native#2347 (comment)

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

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.