React-native 에서 textShadow 사용하기

1. 개요

react-native에서 text shadow를 사용하능 방법을 알아보자.

2. code

const styles = StyleSheet.create({
  textWithShadow:{
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 10
  }
})

StyleSheet component에서 설정을 위와 같이 하면 적용이 된다.

보통 css에서는 다음 처럼 한 라인에 적는 방식이 보통이다.

text-shadow: 1px 1px 1px black;

const styles = StyleSheet.create({
  textWithShadow:{
    textShadow: '1px 1px 11px rgba(0, 0, 0, 0.75)'
  }
})

위에서 보는것처럼 css와 똑같이 생각을해서 react-native에서 textShadow로 사용을 하면 ios에서는 문제없이 사용이 되지만, android에서는 text shadow가 동작하지 않기 때문에 주의가 필요하다.

3. 참고

styled-components를 사용한다면 다음과 같이 설정하면 된다.

const StyledText = styled.Text`
  text-shadow-color: rgba(0, 0, 0, .25);
  text-shadow-offset: 0px 4px;
  text-shadow-radius: 3px;
`