[React Native] BlurView

BlurView

들어가며

• 리액트 네이티브(React Native) 엑스포(Expo) 프로젝트에서 블러 효과를 주는 BlurView 컴포넌트에 대해 간단히 정리해본다.

 

 

BlurView

개념

• Expo에서 제공하는 화면의 일부분에 블러(Blur, 흐림 효과)를 적용할 수 있게 해주는 시각적 컴포넌트
• React Native에서는 iOS와 Android의 네이티브 블러 효과를 직접 구현하는 것이 번거롭기 때문에, Expo는 이러한 블러 효과를 쉽게 적용할 수 있도록 @expo-blur@ 패키지를 제공한다.

 

사용 방법

• @BlurView@는 배경 이미지나 비디오 위에 올려야 효과가 명확하게 보인다.
• iOS에서는 기본적으로 잘 지원되며, Android는 일부 기기에서 제한될 수 있음에 주의한다.
• React Navigation 라이브러리와 함께 @BlurView@를 사용하면, 모달이나 배경 흐림 효과 구현하는 데 유용하다.
• 여러 가지의 시나리오에서 블러 효과를 줄 수 있다.
  • 로그인 화면의 배경 흐림 효과
  • 하단 바텀시트 뒷배경 블러 처리
  • 모달 팝업 뒤의 콘텐츠 흐림 처리
  • 이미지 위 텍스트 박스를 강조하기 위한 흐림 배경

 

패키지 설치

$ npx expo install expo-blur

 

사용하기

• @BlurView@ 컴포넌트를 @expo-blur@ 패키지에서 불러와준다.

import { BlurView } from 'expo-blur';

 

• 다음과 같이 @BlueView@ 컴포넌트를 블러 효과를 주고 싶은 컴포넌트의 밑부분에 넣어준다.

<View>
  <FlatList />
  <BlurView />
</View>

 

주요 속성

<BlurView intensity={} tint={} style={}>
   // ...
</BlurView>

속성	설명
@intensity@	블러의 강도 (0 ~ 100)
@tint@	블러 색상 (@'light'@, @'dark'@, @'default'@ 등)
@ExperimentalBlurMethod@	Android에서 블러 효과를 어떻게 구현할지 설정 (@'none'@, @'dimezisBlurView'@)
@style@	일반적인 React Native 스타일 적용 가능

 

사용 예제

import { Text, StyleSheet, View, SafeAreaView } from 'react-native';
import { BlurView } from 'expo-blur';

export default function App() {
  const text = 'Hello, my container is blurring contents underneath!';
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.background}>
        {[...Array(20).keys()].map(i => (
          <View
            key={`box-${i}`}
            style={[styles.box, i % 2 === 1 ? styles.boxOdd : styles.boxEven]}
          />
        ))}
      </View>
      <BlurView intensity={100} style={styles.blurContainer}>
        <Text style={styles.text}>{text}</Text>
      </BlurView>
      <BlurView intensity={80} tint="light" style={styles.blurContainer}>
        <Text style={styles.text}>{text}</Text>
      </BlurView>
      <BlurView intensity={90} tint="dark" style={styles.blurContainer}>
        <Text style={[styles.text, { color: '#fff' }]}>{text}</Text>
      </BlurView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  blurContainer: {
    flex: 1,
    padding: 20,
    margin: 16,
    textAlign: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    borderRadius: 20,
  },
  background: {
    flex: 1,
    flexWrap: 'wrap',
    ...StyleSheet.absoluteFill,
  },
  box: {
    width: '25%',
    height: '20%',
  },
  boxEven: {
    backgroundColor: 'orangered',
  },
  boxOdd: {
    backgroundColor: 'gold',
  },
  text: {
    fontSize: 24,
    fontWeight: '600',
  },
});

 

블러 효과를 적용한 모습

 

참고 사이트

BlurView