react-native, shadow에 대한 연구

react-native의 shadow 속성에 대해 좀더 자세히 알아보는 시간을 가졌습니다.

한번 살펴볼까요?

 

이것 하나면 끝!

https://ethercreative.github.io/react-native-shadow-generator/

React Native Shadow Generator

 

더 알아보기...

* ios에서 shadow 사용하기

iosShadow: {
	shadowColor: '#4d4d4d',
	shadowOffset: {
		width: 8,
		height: 16,
	},
	shadowOpacity: 0.3,
	shadowRadius: 4,
}

친숙한 shadow옵션을 사용하네요.

어렵지않게 구현할 수 있습니다.

 

 

* android에서 shadow 사용하기

androidShadow: {
	elevation: 6,
}

아주 심플한 속성, elevation을 통해 shadow를 줄 수 있습니다.

반대로 생각하면 디테일하게 설정을 못한다는 단점이 있네요.

 

 

* 하나의 프로퍼티로 ios, android shadow모두 지정하기

두 플랫폼의 shadow설정 방식이 다르다고해서 위와 같이 두가지 프로퍼티로 관리한다면

다소 귀찮을 수 있습니다.

그래서, shadow속성을 다룰때는 보통  Platform.select기능을 이용합니다.

shadow: {
	...Platform.select({
		ios: {
			shadowColor: '#4d4d4d',
			shadowOffset: {
				width: 8,
				height: 8,
			},
			shadowOpacity: 0.3,
			shadowRadius: 4,
		},
		android: {
			elevation: 8,
		},
	}),
},

 

 

* 노하우 / 디버깅

구글링해도 찾기 쉽지않은 개발 노하우가 있습니다.

사실, react-native의 shadow를 사용하다보면 이상하게 동작하는 경우를 종종 마주하게됩니다.

overflow가 안먹힌다거나, 주지도않은 overflow속성이 들어간것 처럼 shadow가 잘릴때도 있습니다.

 

그 중에서, List모듈(Flatlist, Scrollview 등) 내 컴포넌트들에 shadow를 주는 요령입니다.

그냥 주었다가는 뭐야 왜 잘리지? 하는 상황을 겪을수 있으니 주의하시기 바랍니다.

 

List모듈 혹은 그 부모 컴포넌트에 padding/margin등의 속성을 사용하고있는 상황에서,

그 내부 컴포넌트에 shadow를 주면 잘리는 경우를 맞닥드렸을 때는!

그 padding, margin 스타일들을 제거하고 LIst모듈의 contentContainerStyle에 padding/margin을 먹여야 합니다.