BlurView

BlurView adds a blurred background effect, primarily on iOS. It creates a visual blur on the background view.

This component is supported only on iOS. On Android, it simply renders a regular View without any blur effect.

You can control the blur intensity and optionally enable the vibrancy effect, which enhances the visual impact of content displayed over a blurred background.

If blur is not supported or doesn't render properly, you can use the reducedTransparencyFallbackColor prop to set a fallback background color.

Use the isSupported property to check whether the current device supports blur. Blur is available on iOS from version 5.126.0 and not supported on Android.

Signature

typescript

function BlurView({
  blurType,
  blurAmount,
  reducedTransparencyFallbackColor,
  vibrancyEffect,
  ...viewProps
}: BlurViewProps): import('react/jsx-runtime').JSX.Element;

Parameter

propsBlurViewProps
The props you can pass to BlurView. It extends react-native's ViewProps, so you can use layout and style properties. The props align with those of `@react-native-community/blur`.
- props.blurTypeBlurType
  Type of blur to apply, such as light, dark, or extraDark.
- props.blurAmountnumber · 10
  Intensity of the blur effect. Higher values make the blur stronger. Accepts values from 0 to 100. Default is 10.
- props.vibrancyEffectboolean · false
  Enables the vibrancy effect. This effect enhances content displayed on top of the blur. Only supported on iOS. Default is false.
- props.reducedTransparencyFallbackColorstring
  Fallback background color used when blur cannot be applied due to system settings or device limitations.

Return Value

JSX.Element
On iOS, returns a blurred BlurView or VibrancyView component. On Android, returns a regular View without blur.

Note

BlurView is only supported on iOS. On Android, it renders a regular View without any blur effect.

Example

Blurring background behind a text

tsx

import { BlurView } from '@granite-js/react-native';
import { View, Text, StyleSheet } from 'react-native';

export function BlurViewExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.absolute}>Blurred Text</Text>
      <BlurView style={styles.absolute} blurType="light" blurAmount={1} />
      <Text>Non Blurred Text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: 300,
  },
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

BlurView ​

Signature ​

Parameter ​

Return Value ​

Example ​

Blurring background behind a text ​

References ​