[React Native] shadow / top || bottom / Platform

React Native shadow / top || bottom / Platform

React Native 개발 중 shadow를 지정하는 방법입니다.

 

React Native에서 shadow는 플랫폼(Platform)별로 다르게 설정해줘야 합니다.

먼저 react-native에서 Platform을 import 하시고 ...Platform.select로 안드로이드(Android)와 iOS를 구분해서 지정하도록 하겠습니다.

import { Platform } from 'react-native';

...Platform.select({ })

 

다음으로는 shadow를 원하는 방향으로 지정하는 방법입니다.

ios에서 height를 지정해줄 때에, "-"를 포함하면 상단(top)으로 포함하지 않으면 하단(bottom)으로 shadow가 생성됩니다.

 

다음과같이 shadowOffset에 10을 주고 실행을 시켜보겠습니다.

const styles = StyleSheet.create({
    button: {
        width: '100%',
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 2,
        borderRadius: 5,
        backgroundColor: 'white',
        ...Platform.select({
            ios: {
                shadowColor: 'black',
                shadowOffset: {
                    width: 0,
                    height: 10,
                },
                shadowOpacity: 0.25,
                shadowRadius: 3,
            },
            android: {
                elevation: 10,
            },
        }),
    },
})

하단에 shadow가 생긴 것을 확인하실 수 있습니다.

width와 height를 조절하시면 원하시는 방향과 크기로 shadow를 설정하실 수 있습니다.