[React Native] Blur 효과 만들기

1. https://github.com/Kureev/react-native-blur

GitHub - Kureev/react-native-blur: React Native Blur component

라이브러리를 이용한 blur 방법이다

해당 사이트의 문서를 참고하자

 

 

2. https://reactnative.dev/docs/0.65/image#blurradius

Image · React Native

Image component의 blurRadius를 사용하는 방법이다

<Image
  source={require('blur.png')}
  style={{
    position: 'absolute',
    width: '100%',
    height: '100%',
  }}
  resizeMode="cover"
  blurRadius={0}
/>

Image component라 source가 필요하다

그리고 blurRadius를 조절해보자(직접 해보면 이해됨)

 

 

3. https://reactnative.dev/docs/0.65/view

View · React Native

View component의 style을 사용하는 방법이다

<View
  style={{
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: '#ffffff80', // white의 alpha값 50%
  }}
/>

alpha값을 조절하여 비슷한 효과를 준다

'#ffffff80'은 '#rrggbbaa'이며 aa는 alpha값이다

alpha값 참고(https://success206.tistory.com/166)

 

 

 

끝.