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