BlurView for React Native (iOS & Android)

BlurView for React Native. Supports variable intensity and tint color via UIVisualEffectView.

Preview

demo-blur.mp4

Installation

yarn add @candlefinance/blur-view

Usage

Use the BlurView component to blur the content behind it.

import { BlurView } from '@candlefinance/blur-view';

<BlurView
  blurTintColor="#ff006780" // has to be hex with opacity
  colorTintOpacity={0.2}
  blurRadius={10}
  style={styles.top}
/>;

To use with react-native-reanimated, wrap the BlurView in a Animated.createAnimatedComponent.

import { BlurView } from '@candlefinance/blur-view';
const AnimatedBlur = Animated.createAnimatedComponent(BlurView);

const animatedProps = useAnimatedProps(() => {
  const blurRadius = interpolate(
    scrollY.value,
    input,
    output,
    Extrapolate.CLAMP
  );

  return {
    blurRadius,
  };
});

<AnimatedBlur animatedProps={animatedProps} />;

Docs

View the example app in the example folder.

Property	Type	Default	Description
blurRadius	number	0	The amount of blur to apply to the view.
blurTintColor	string	undefined	Apply a tint color to the blur
blurEnabled (iOS)	bool	undefined	Hide blur
colorTintOpacity	number	undefined	Opacity of the color (iOS)
scale	number	undefined	scale factor of blur

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT