고민

react-native 개발 중 위에 이미지 처럼 stroke 를 줘야하는 스타일이 있었다.

방법1. CSS

 		 <Text
            style={{
              fontSize: 30,
              fontFamily: 'Galmuri7-Regular',
              textShadowColor: 'white',
              textShadowOffset: {width: 1, height: 1},
              textShadowRadius: 1,
              backgroundColor: 'grey',
            }}>
            Text Stroke CSS
          </Text>

결과물

좌 : IOS 우 : 안드로이드

OS에 따라 스타일이 달라서 맘에 들지 않는다.

방법2. react-native-svg

import React from 'react';
import {StyleSheet} from 'react-native';

import Svg, {Text} from 'react-native-svg';

const TextSvg = ({text}) => {
  return (
    <Svg height="50" width="400">
      <Text
        fill="black" // 텍스트 안을 검정색으로 채움
        stroke="white" // 텍스트 선을 하얀색으로 그림
        strokeWidth="2" // 텍스트 선의 두께
        fontSize="32"
        x="0"
        y="40"
        fontFamily="Galmuri7-Regular">
        {text}
      </Text>
    </Svg>
  );
};

const styles = StyleSheet.create({});

export default TextSvg;

결과물

좌 : IOS , 우 : 안드로이드

일단 같은 스타일링이 나온다. 완벽히 원하는 느낌은 아니지만 일단 이게 최선인듯 하다.

stroke 를 더 많이 표현하고자 한다면, strokeWidth 값을 늘려주면 된다!

[React Native | RN | SVG] Text Stroke 효과 주는법 react-native-svg