Appearance

BlurView ​

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

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

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

시그니처 ​

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

파라미터 ​

  • propsBlurViewProps

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

    • props.blurTypeBlurType

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

    • props.blurAmountnumber · 10

      블러 효과의 강도를 설정해요. 값이 클수록 블러 효과가 더 강해져요. 기본값은 10이며 0부터 100까지 설정할 수 있어요.

    • props.vibrancyEffectboolean · false

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

    • props.reducedTransparencyFallbackColorstring

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

반환 값 ​

  • JSX.Element

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

유의할 점

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

예제 ​

BlurView를 사용해 텍스트를 블러 처리하기 ​

tsx
import { View, Text, StyleSheet } from 'react-native';
import { BlurView } from 'react-native-bedrock';

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

참고 ​