React Native - 흐린 화면 처리 (blur 효과)

어플로 다양한 기능을 구현하다보면 특정 이미지를 확대한다던가 모달을 띄우거나 할 때 뒷 배경을 흐리게 처리하고 싶을 때가 있다. 정말 단순하게는 opacity를 통해 특정 색에 투명도를 적용하는 방법도 있지만 ui적으로 blur 처리가 더 어울리거나 요구되는 화면들이 있을 것이다. 이럴 때 @react-native-community/blur 라이브러리를 활용하면 된다.

https://www.npmjs.com/package/@react-native-community/blur

@react-native-community/blur

 

 

1. 설치

npm install @react-native-community/blur
#or
yarn add @react-native-community/blur

 

 

2. 코드

// test.tsx

import {TestProps} from '@/types/stack';
import {Image, StyleSheet, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {BlurView} from '@react-native-community/blur';
import CustomText from '@/components/text';

const TestScreen = ({navigation}: TestProps) => {
  return (
    <SafeAreaView className="flex-1">
      <Image
        source={require('@assets/images/test.jpg')}
        style={style.blurScreen}
      />
      <BlurView blurType="light" blurAmount={30} style={style.blurScreen} />
      <View className="w-full h-full flex justify-center items-center">
        <CustomText>잘보이는 텍스트</CustomText>
      </View>
    </SafeAreaView>
  );
};

export default TestScreen;

const style = StyleSheet.create({
  blurScreen: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

 

코드를 보면 알겠지만 정말 간단하다.

blur 처리를 하고싶은 component와 blur 효과를 주는 BlurView 스타일을 동일하게 absolute를 통해 위치를 지정해주고, 위에 보여주고자 하는 컴포넌트는 하던대로 style을 주면 된다.

• blurType : 블러 효과의 타입 (xlight, light, dark 등)
• blurAmount : 블러 강도 (0 ∽100)

 

3. 실행

실행해보면 아래와 같은 배경사진이 블러처리가 잘 적용된 것을 확인할 수 있다.