@candlefinance/blur-view v0.5.3

BlurView for React Native (iOS & Android)

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

Preview

https://github.com/candlefinance/blur-view/assets/12258850/66fc73aa-7160-41b2-97cd-a406440e372e

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.

Contributing

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

License

MIT