앱인토스 개발자센터 로고

BlurView ​

지원환경: React NativeReact Native SDKv1.0.3
실행환경: Toss AppSandbox App

BlurView 컴포넌트는 iOS에서만 지원되는 블러(Blur) 효과를 제공해요.
배경을 흐리게 처리하거나, Vibrancy 효과를 적용해 콘텐츠를 더 생동감 있게 표현할 수 있어요.
Android에서는 블러 효과가 적용되지 않고 기본 View가 렌더링돼요.

시그니처 ​

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 5.126.0 이상에서만 블러 효과를 지원해요.
Android에서는 기본 View가 렌더링되며, 블러 효과가 적용되지 않아요.

예제 ​

BlurView로 텍스트 블러 처리하기 ​

아래 예시는 텍스트 위에 BlurView를 겹쳐 배경을 흐리게 처리하는 방법을 보여줘요.

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

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

참고 ​