Skip to content

Latest commit

 

History

History
72 lines (50 loc) · 2.25 KB

README.md

File metadata and controls

72 lines (50 loc) · 2.25 KB
Raw

npm versionnpm downloads

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