API Reference: BlurView​
BlurView lets you blur the underlying object. The common use-case is to blur full screen layouts by adding BlurView on top of the layout.
scripts/page1.tsimport Page1Design from 'generated/pages/page1';import BlurView from 'sf-core/ui/blurview';import FlexLayout from 'sf-core/ui/flexlayout';import ImageView from 'sf-core/ui/imageview';import Screen from 'sf-core/device/screen';import Image from 'sf-core/ui/image';import Button from 'sf-core/ui/button';​export default class Page1 extends Page1Design {router: any;private imgSmartface: ImageView;private myButton: Button;private myBlurView: BlurView;private isShown = false;constructor() {super();this.onShow = onShow.bind(this, this.onShow.bind(this));this.onLoad = onLoad.bind(this, this.onLoad.bind(this));}initImageView() {const imgSmartface = new ImageView({top: 0,right: 0,left: 0,bottom: Screen.height / 2,imageFillType: ImageView.FillType.ASPECTFIT});//@ts-ignorethis.layout.addChild(imgSmartface, 'imgSmartface', '.sf-imageview');imgSmartface.image = Image.createFromFile('images://smartface.png');this.imgSmartface = imgSmartface;}initBlurView() {const myBlurView = new BlurView({top: 0,right: 0,left: 0,bottom: Screen.height / 2,positionType: FlexLayout.PositionType.ABSOLUTE});myBlurView.android.rootView = this.layout;this.myBlurView = myBlurView;//@ts-ignorethis.layout.addChild(myBlurView, 'myBlurView');}initButton() {const myButton = new Button({text: "Show"});this.myButton = myButton;//@ts-ignorethis.layout.addChild(myButton, 'myButton', '.sf-button');myButton.onPress = () => {this.layout.removeChild(this.myBlurView);if (this.isShown) {//@ts-ignorethis.layout.addChild(this.myBlurView, 'myBlurView');}this.myButton.text = this.isShown ? "Show" : "Hide";this.isShown = !this.isShown;this.layout.applyLayout();};}}​function onShow(superOnShow) {superOnShow();}​function onLoad(superOnLoad) {superOnLoad();this.initImageView();this.initBlurView();this.initButton();}​