BlurView

BlurView is the standard, cross-platform blur component. On iOS it uses UIVisualEffectView through a SwiftUI implementation; on Android it uses QmBlurView for hardware-accelerated blur, with a lightweight overlay fallback on limited devices.

Basic usage

import { BlurView } from '@sbaiahmed1/react-native-blur';

<BlurView
  blurType="light"
  blurAmount={20}
  style={{
    position: 'absolute',
    top: 100,
    left: 50,
    right: 50,
    height: 200,
    borderRadius: 20,
  }}
>
  <Text>Content with blur background</Text>
</BlurView>

Advanced usage

<BlurView
  blurType="systemMaterial"
  blurAmount={50}
  reducedTransparencyFallbackColor="#FFFFFF80"
  style={{ padding: 20, borderRadius: 15 }}
>
  <Text>Advanced blur with a custom accessibility fallback</Text>
</BlurView>

Props

Prop	Type	Default	Description
blurType	BlurType	'xlight'	The type of blur effect to apply.
blurAmount	number	10	The intensity of the blur effect (0-100).
blurRounds	number	5	AndroidNumber of blur interactions for a smoother effect (1-15).
ignoreSafeArea	boolean	true	iOSControls whether the blur effect should ignore all safe area edges.
reducedTransparencyFallbackColor	string	'#FFFFFF'	iOSFallback color shown when the "Reduce Transparency" accessibility setting is enabled.
overlayColor	ColorValue	undefined	An overlay color to apply on top of the blur effect.
style	StyleProp<ViewStyle>	undefined	Style object for the blur view.
children	React.ReactNode	undefined	Child components to render inside the blur view.

See the props reference for the full list of BlurType values.