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.

| 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