# @candlefinance/blur-view

> test

Latest version **0.5.3** (published 2023-10-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @candlefinance/blur-view
pnpm add @candlefinance/blur-view
yarn add @candlefinance/blur-view
bun add @candlefinance/blur-view
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.3 |
| Published | 2023-10-14 |
| First published | 2023-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 0 |
| Unpacked size | 32.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Gary Tokman |
| Maintainers | liambutler-lawrence, 6ary, gtokman |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/@candlefinance/blur-view
- Repository: https://github.com/candlefinance/blur-view
- Homepage: https://github.com/candlefinance/blur-view#readme
- Issues: https://github.com/candlefinance/blur-view/issues
- npm.io page: https://npm.io/package/@candlefinance/blur-view

## Recent versions

- 0.5.3 (latest) — 2023-10-14
- 0.4.1 — 2023-06-18
- 0.4.0 — 2023-06-18
- 0.3.1 — 2023-06-01
- 0.3.0 — 2023-05-30
- 0.2.0 — 2023-05-30

## README

[![npm version](https://badge.fury.io/js/%40candlefinance%2Fblur-view.svg)](https://badge.fury.io/js/%40candlefinance%2Fblur-view)[![npm downloads](https://img.shields.io/npm/dm/%40candlefinance%2Fblur-view.svg)](https://npm.im/%40candlefinance%2Fblur-view)

# BlurView for React Native (iOS & Android)

BlurView for React Native. Supports variable intensity and tint color via [UIVisualEffectView](https://developer.apple.com/documentation/uikit/uivisualeffectview).

## Preview

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

## Installation

```sh
yarn add @candlefinance/blur-view
```

## Usage

Use the `BlurView` component to blur the content behind it.

```js
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](https://github.com/software-mansion/react-native-reanimated), wrap the BlurView in a `Animated.createAnimatedComponent`.

```js
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](./example/src/App.tsx) 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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---
_Source: https://npm.io/package/@candlefinance/blur-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._