[React Native] 글자 Stroke 효과 주기

React Native

React Native에서 글자 외곽선 효과를 주려면 어떻게 구현할 수 있을까? React Native는 일반 웹과 달리 text-stroke가 존재하지 않는다.

가장 많이 답변되고 그나마 정확한 방식은 svg(react-native-svg 등의 라이브러리 사용)로 글자와 stroke를 아예 그려내는 방식인 것 같다.

그러나 svg로 직접 그릴 경우, stroke width가 굵어지면 글자를 잡아 먹고(text-stroke와 비슷한 이슈인 것 같다), Svg와 width/height, Text의 x/y를 조정해야 하는데 번거롭기도 하고 실측해서 정확한 값을 넣기 어렵다는 단점이 있다. 또한 커스텀 폰트를 사용하고 있는 경우 이를 반영하여 svg를 그리는 것이 어렵다.

다행히 React Native에서 text-shadow는 사용가능하기 때문에, 이를 활용해서 비슷하게 구현하는 방법도 존재한다. 다만 CSS에서의 text-shadow와는 다르게 offset을 한 방향으로만 줄 수 있기 때문에 나는 보다 선명한 효과를 위해 element를 겹쳐 사방으로 그림자를 주었다.

<View>
  <Text
    style={[
      { fontSize: 30, textShadowColor: "red", textShadowRadius: 1 },
      { textShadowOffset: { width: -1, height: -1 } },
    ]}>
    {text}
  </Text>
  <Text
    style={[
      { fontSize: 30, position: "absolute", textShadowColor: "red", textShadowRadius: 1 },
      { textShadowOffset: { width: -1, height: 1 } },
    ]}>
    {text}
  </Text>
  <Text
    style={[
      { fontSize: 30, position: "absolute", textShadowColor: "red", textShadowRadius: 1 },
      { textShadowOffset: { width: 1, height: -1 } },
    ]}>
    {text}
  </Text>
  <Text
    style={[
      { fontSize: 30, position: "absolute", textShadowColor: "red", textShadowRadius: 1 },
      { textShadowOffset: { width: 1, height: 1 } },
    ]}>
    {text}
  </Text>
</View>

다음 사진의 왼쪽은 textShadowOffset: { width: radius * -0.5, height: 0.5 }와 같은 식으로 설정한 textShadowRadius에 따라 offset도 변경해서 적용했을 때, 오른쪽은 textShadowRadius와는 상관 없이 offset을 1/-1로 고정했을 때의 예시이다.

이외에도 radius, offset을 다양한 방식으로 조정해 봤는데, text-shadow라는 이름에 맞게 구현되어 있어 굵은 shadow를 표현하려면 어쩔 수 없이 점점 더 shadow에 가깝게 보일 수밖에 없는 것 같다.

svg와 text-shadow를 나란히 비교해 보면 다음과 같다.

전체 코드와 동작 예시는 다음 snack 링크에서 확인할 수 있다.

Reference

https://stackoverflow.com/questions/60377239/adding-a-solid-stroke-to-text
https://reactnative.dev/docs/text-style-props#textshadowoffset