React-native-blur: Fading in?

[nc]

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?

[Kureev]

Can you provide an example code?

[jevakallio]

Just a guess, but the error message sounds quite similar as the one you get when you forget to access the .BlurView property of require('react-native-blur') and your local variable ends up pointing to the wrapper object instead.

[chanange]

I got the same error message when I didn't access the .BlurView property too.

var BlurView = require('react-native-blur').BlurView;

[Kureev]

@nc @chanange react-native-blur contain native Obj-C implementation. Are you sure you linked them correct? (see https://github.com/Kureev/react-native-blur#installation)

[chanange]

Yep I linked the RNBlur project and added the libRNBlur.a product to the Build Phases - Link Binary with Libraries.

I got the error message when I imported the module with the following import, as described in the README:

var BlurView = require('react-native-blur')

But accessing with the .BlurView property works.

var BlurView = require('react-native-blur').BlurView

[Kureev]

@chanange In the docs I use

const { BlurView, VibrancyView } = require('react-native-blur');

which is equals to

const BlurView = require('react-native-blur').BlurView;
const VibrancyView = require('react-native-blur').VibrancyView;

so it seems everything is fine.