react native 에서 그림자 구현하기 (w/ react-native-shadow)

 

웹 개발이나 React 개발만 하시던 분들이 앱을 개발하기 위해 React Native를 시작하는 경우가 많습니다. React와 문법이 비슷해서 쉽게 시작할 수 있지만, 또 가끔가다 웹 개발과 전혀 다른 부분을 마주치면 당황하기도 하는데요. 오늘은 당황 포인트 중에 하나인 그림자 스타일에 대해서 살펴보겠습니다.

 

 

들어가며: React Native의 자체 그림자 스타일

리액트 네이티브에서 그림자를 아예 설정하지 못하는 것은 아닙니다. 문제는 안드로이드와 iOS에서 적용하는 방법이 제각각이라는 것인데요. 그나마 iOS는 웹과 비슷하게 설정할 수 있는데, 안드로이드는 그러지 못합니다.

import React from 'react'
import { Platform, StyleSheet, View } from 'react-native'

const ShadowView = () => {
  return (
    <View style={styles.container}>
    
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    width: 50,
    height: 50,
    ...Platform.select({
      ios: {
        shadowColor: "rgb(50, 50, 50)",
        shadowOpacity: 0.5,
        shadowRadius: 5,
        shadowOffset: {
          height: -1,
          width: 0,
        },
      },
      android: {
        elevation: 3,
      },
    })
  }
})

export default ShadowView

 

react-native 자체 기능으로 그림자를 설정하기 위해서는 위의 코드와 같이 Platform 을 import 하여, 플랫폼별로 다른 스타일을 적용해줘야 합니다. 특히 안드로이드는 elevation으로밖에 설정할 수 없어서 의도치 않은 디자인이 나오게 되죠.

(그리고 웹에서 설정하는 그림자 blur는 iOS와 안드로이드 모두 설정할 수 없습니다)

 

 

방법1: react-native-shadow-2 라이브러리

사실 elevation만 부여해도 괜찮습니다. 그러나 통일성 있는 디자인을 위해서 동일한 그림자를 넣고 싶은 경우도 많은데요. 저도 동일한 그림자 디자인을 적용하고 싶어서 몇 가지 라이브러리를 찾아보게 되었습니다.

 

그러다 발견한 것 중 하나가 react-native-shadow-2 입니다. 원래는 아래 소개할 1을 먼저 발견했는데요. 서로 주간 다운로드 수도 비슷한데, 2가 더 자주 업데이트되는 것 같아서 최종적으로 2를 사용하게 되었습니다.

npm install react-native-shadow-2

 

import React from 'react'
import { View } from 'react-native'
import { Shadow } from 'react-native-shadow-2'

const ShadowView = () => {
  return (
    <Shadow
      viewStyle={{ width: '100%' }} // 스타일을 설정하면 됩니다.
      radius={10} // 그림자 radius
      offset={[0, 5]} // 그림자 위치 (x, y)
      startColor="#dde0ea" // 그림자 색상
    >
      <View>
      
      </View>
    </Shadow>
  )
}

export default ShadowView

 

보다 자세한 기능은 해당 패키지 문서를 참고해주세요!

 

 

방법2: react-native-shadow 라이브러리

혹시나 조금 더 오래된 react-native-shadow 패키지를 사용하실 분은 패키지를 다운로드하신 후 적용하시면 됩니다.

위의 react-native-shadow-2와 달리 그림자 속성을 하나의 object로 넣는다는 점이 차별적이네요!

(자세한 내용은 패키지 문서를 참고해주세요)

npm install react-native-shadow

 

 

오늘은 react-native에서의 그림자 적용에 대해 알아보았는데요. 멀티 플랫폼 개발에 도움이 되었기를 바라며, 그럼 오늘도 모두들 해피코딩하세요 :)