BlurView

BlurView 컴포넌트는 iOS에서 배경을 블러 처리하는 UI 효과를 줘요. 이 컴포넌트는 배경을 흐리게 표시해요. iOS에서만 지원되고 Android에서는 기본 View 를 렌더링해요.

블러의 강도를 조절할 수 있고, Vibrancy 효과를 적용할 수 있어요. 블러가 적용되지 않을 경우에는 reducedTransparencyFallbackColor를 사용해 배경색을 설정할 수 있어요.

isSupported 속성을 통해 현재 기기에서 블러가 지원되는지 확인할 수 있어요. iOS 5.126.0 이상에서만 블러 효과가 지원되고, Android에서는 지원되지 않아요.

시그니처

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

파라미터

• props필수 · BlurViewProps
  

  BlurView에 전달할 속성들이에요. react-native의 ViewProps를 상속하므로, 기본적인 레이아웃 속성도 함께 사용할 수 있어요. @react-native-community/blur 의 속성과 같아요.

  • props.blurTypeBlurType
    

    블러의 유형을 설정해요. light, dark, extraLight 같은 값을 사용해 블러의 스타일을 정의할 수 있어요.

  • props.blurAmountnumber · 10
    

    블러의 강도를 설정해요. 숫자가 클수록 블러가 더 강하게 적용돼요. 기본값은 10이에요.

  • props.vibrancyEffectboolean · false
    

    Vibrancy Effect를 활성화해요. Vibrancy 효과는 블러된 배경 위의 콘텐츠를 더 생동감 있게 보이도록 해줘요. iOS에서만 지원되며, 기본값은 false예요.

  • props.reducedTransparencyFallbackColorstring
    

    투명도가 제한될 경우 사용할 대체 배경색이에요. 블러가 지원되지 않거나 제대로 렌더링되지 않을 때 유용해요.

• viewProps필수 · ViewProps
  

  기본적으로 전달할 수 있는 View의 속성들이에요. 레이아웃이나 스타일링을 위해 추가할 수 있어요.

반환 값

• JSX.Element
  

  iOS에서는 블러가 적용된 BlurView 또는 VibrancyView 컴포넌트를 반환하고, Android에서는 기본 View를 반환해요.

유의할 점

• BlurView는 iOS에서만 지원돼요. Android에서는 기본 View가 렌더링되며, 블러 효과가 적용되지 않아요.

예제

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,
  },
});

참고

• iOS Vibrancy Effect Documentation
• Zeddios Blog 설명