VibrancyView

VibrancyView applies iOS’s native UIVibrancyEffect, making content (typically text or symbols) appear vivid against a blurred backdrop — the same effect used throughout iOS system UI like Control Center and notifications.

This component is iOS only. On Android, it renders the same output as BlurView with the given props (there is no vibrancy-equivalent concept in Android’s material system).

Usage

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

<VibrancyView blurType="dark" blurAmount={20} style={{ padding: 20, borderRadius: 16 }}>
  <Text>Vibrant content over a blurred background</Text>
</VibrancyView>

VibrancyView on iOS

Props

Prop	Type	Default	Description
blurType	BlurType	'xlight'	The type of blur/vibrancy effect to apply.
blurAmount	number	10	The intensity of the effect (0-100).
style	StyleProp<ViewStyle>	undefined	Style object for the vibrancy view.
children	React.ReactNode	undefined	Child components to render inside the vibrancy view.