# @nstudio/nativescript-blur

> Uses the iOS blur effect to blur anything that has an underlying iOS view, and blurs images on android, using BlurKit..

Latest version **3.0.2** (published 2022-02-09) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @nstudio/nativescript-blur
pnpm add @nstudio/nativescript-blur
yarn add @nstudio/nativescript-blur
bun add @nstudio/nativescript-blur
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2022-02-09 |
| First published | 2021-09-07 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 54 |
| Author | Dave Coffin |
| Maintainers | multishiv19, rigor789, alexziskind1, walkerrunpdx, bradmartin, nathanaela, davecoffin, triniwiz |
| Keywords | NativeScript, JavaScript, TypeScript, iOS, Android |

## Links

- npm: https://www.npmjs.com/package/@nstudio/nativescript-blur
- Repository: https://github.com/nstudio/nativescript-plugins
- Issues: https://github.com/nstudio/nativescript-plugins/issues
- npm.io page: https://npm.io/package/@nstudio/nativescript-blur

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2022-02-09
- 3.0.1 — 2021-10-16
- 3.0.0 — 2021-09-07

## README

# @nstudio/nativescript-blur

```javascript
ns plugin add @nstudio/nativescript-blur
```

## iOS
<img src="https://github.com/davecoffin/nativescript-blur/blob/master/blur.gif?raw=true" height="320" > 

On iOS, you can blur pretty much anything, but the coolest thing to do is blur a transparent view covering what you want blurred. This way everything behind that view gets blurred. 

## Android

<img src="https://github.com/davecoffin/nativescript-blur/blob/master/blurandroid.gif?raw=true" height="320" > 
If you pass `true` to the constructor (`let blur = new Blur(true)`), nothing will be different on iOS, but on Android the backgroundColor of the NativeScript view you pass to either light semi transparent or dark semi transparent. So, if you are using this for a "dimmer" effect for modals and stuff, Android will work that way for now.

## Usage

```js

import { Blur } from '@nstudio/nativescript-blur';
let blur = new Blur(true); // pass true to enable limited usage on android (for now);

// Pick Date
makeKittyBlurry() {
    let kittyView = page.getViewById('kitty');
    blur.on(kittyView, 'kitty', 'light').then(() => {
        console.log('Kitty has become blurry.');
    }).catch(e => {
        console.dir(e);
    });
}

clearUpKitty() {
    blur.off('kitty').then(() => {
        console.log('Kitty has cleared up.')
    });
}

```

## API

`on(view, keyTitle, theme?, duration?): Promise;`

To turn it on, you must pass a view and a key name. The key name can be anything, you use it to turn it off. This way you can blur different things at different times. The theme is either `light` or `dark`, and you can pass a custom duration. The duration is in seconds, for example if you pass `.2` the animation will last .2 seconds. 
The view needs to be a nativescript view that has an `ios` property, and that property must support `addSubview`. Here are some examples of NativeScript UI elements you can pass:
```js
StackLayout
GridLayout
AbsoluteLayout
DockLayout
ScrollView
Image
Label
```
If there is no `ios` property on the element you pass or `addSubview` doesn't exist on the ios property, it will return an error.

`off(keyTitle, duration?): Promise;`

Off animates the blur off. Pass it the key you used to create it. If the key doesnt exist (the view is not blurry) it will return an error.

## License

Apache License Version 2.0

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