VariableBlurView for React Native (iOS only)

Variable Blur View for React Native. Inspired by @jtrivedi and @aheze. This is a fork of the candlefinance/[email protected] with a fix for the issue where the blur does not apply when the color scheme changes.

Preview

https://github.com/candlefinance/blur-view/assets/12258850/53f5a05f-7594-4f7e-acbc-997b10ee4345

Installation

yarn add @uceaky/blur-view-fix

Usage

Use the BlurViewView component to blur the content behind it.

import { VariableBlurView } from '@ucekay/blur-view-fix';

<VariableBlurView
  style={{
    width,
    height: 200,
    position: 'absolute',
  }}
/>;

Docs

View the example app in the example folder.

| Property | Type | Default | Description | | --------------- | -------- | --------------------------------------- | ------------------------------------------------- | | maxBlurRadius | number | 20 | The amount of blur to apply to the view. | | gradientMask | string | see source | The gradient mask to apply to the view in base64. |

Contributing

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

License

MIT