BlurView

Beta

Applies a blur effect background for overlaid content.

Installation

npm install @xaui/native

Import

import { BlurView } from '@xaui/native/view'

Basic Usage

Minimal example showing the component with its default configuration.

import { BlurView } from '@xaui/native/view'

export function Example() {
  return (
    <BlurView>
      {/* children */}
    </BlurView>
  )
}

Frosted Glass Effect

Blur the background behind the children.

import { BlurView } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function FrostedGlassExample() {
  return (
    <BlurView intensity={60} style={{ padding: 16, borderRadius: 12 }}>
      <Typography style={{ fontWeight: 'bold' }}>Frosted content</Typography>
    </BlurView>
  )
}

Unlockable Blur

Hide premium content behind a blur that the user can reveal.

import { BlurView } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function UnlockableBlurExample() {
  return (
    <BlurView intensity={80} unlockable>
      <Typography>This content is hidden until unlocked</Typography>
    </BlurView>
  )
}