Variable Blur View

Variable Blur View for NativeScript. Creates a stunning gradient blur effect.

Inspired by @jtrivedi, @aheze, and @candlefinance.

Installation

npm install @nstudio/nativescript-variable-blur-view

Note: iOS only at the moment.

Preview

The variable blur creates a gradient blur effect that transitions from clear to blurred, perfect for navigation bars, toolbars, and overlays.

Usage

Register the Element

import { registerElement } from '@nativescript/angular';
import { VariableBlurView } from '@nstudio/nativescript-variable-blur-view';

registerElement('VariableBlurView', () => VariableBlurView);

import { registerElement } from 'react-nativescript';
import { VariableBlurView } from '@nstudio/nativescript-variable-blur-view';

registerElement('variableBlurView', () => VariableBlurView);

import { registerElement } from 'nativescript-vue';
import { VariableBlurView } from '@nstudio/nativescript-variable-blur-view';

registerElement('VariableBlurView', () => VariableBlurView);

import { registerNativeViewElement } from '@nativescript-community/svelte-native/dom';
import { VariableBlurView } from '@nstudio/nativescript-variable-blur-view';

registerNativeViewElement('variableBlurView', () => VariableBlurView);

import { registerElement } from 'dominative';
import { VariableBlurView } from '@nstudio/nativescript-variable-blur-view';

registerElement('variableBlurView', VariableBlurView);

Basic Usage

Place on top of any UI you want blurred:

<GridLayout>
  <!-- Your content here -->
  <Image src="~/background.jpg" stretch="aspectFill" />
  
  <!-- Blur overlay at top -->
  <VariableBlurView width="100%" height="200" verticalAlignment="top"/>
</GridLayout>

Flip Vertically

To blur from bottom-to-top instead of top-to-bottom:

<VariableBlurView width="100%" height="200" scaleY="-1"/>

Use Cases

• Navigation bars: Blur content behind a transparent nav bar
• Bottom sheets: Create depth with a blurred overlay
• Image overlays: Add text readability over images
• Toolbars: Modern iOS-style blurred toolbars

Example: Bottom Blur

<GridLayout>
  <ScrollView>
    <!-- Scrollable content -->
  </ScrollView>
  
  <!-- Bottom blur overlay -->
  <VariableBlurView 
    width="100%" 
    height="150" 
    verticalAlignment="bottom"
    scaleY="-1"/>
</GridLayout>

License

Apache License Version 2.0