Adding a solid stroke to Text

user_2026768 0
Viewed 5951

I am trying to add a thick solid stroke to some Text in React Native. I've added a snippet with the desired CSS.

I've tried directly applying the CSS via styled-components but I get an error stating that my value is unable to be parsed.

const Title = styled.Text`
  text-shadow: 2px 2px 0px  #000, -2px -2px 0px  #000, 2px -2px 0px  #000, -2px 2px 0px  #000;
`;

I have tried using textShadow but this does not apply a solid stroke. This prop relies on a width and height prop for an offset.

Here's a snack for example - https://snack.expo.io/@hannigan/ba7574

h1 {
  text-shadow: 2px 2px 0px  #000, -2px -2px 0px  #000, 2px -2px 0px  #000, -2px 2px 0px  #000;
  color: white;
  font-family: 'Arial';
}
<h1>Hello World</h1>

react-native styled-components
2 Answers

So this works for me, are you sure that it won't work for you in dynamic height?

Edit: I might have now found what you were talking about. I am checking if I can update the snack to work for dynamic views.

Edit2: Alright, made it work. You just need to make the first text non-absolute.

https://snack.expo.io/Bk8ifP!4I

Edit3: As mentioned by Vencovsky it might break if you need to use flex around it. You can hack it with a onLayout like in this Snack: https://snack.expo.io/HJ!PRUKNL

basically you save the height of the text and then use it for height and margin on other views. It hacky, but I have used it in other settings and works fine.

enter image description here

export default class App extends React.Component {

  render() {

       const myText = 'Hello World. This is my very long text, that can be a few lines height'

    return (
      <View style={styles.container}>

      <View>

        <Text style={[styles.paragraph]}>{myText}</Text>
        <Text style={[styles.paragraph, styles.abs, {textShadowOffset: {width: -2, height: -2}}]}>{myText}</Text> 
        <Text style={[styles.paragraph, styles.abs, {textShadowOffset: {width: -2, height: 2}}]}>{myText}</Text>
        <Text style={[styles.paragraph, styles.abs, {textShadowOffset: {width: 2, height: -2}}]}>{myText}</Text> 

      </View>

       <Text> 'Here another text' </Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8
  },
  paragraph: { fontSize: 50, color: '#FFF', textShadowColor: 'black', textShadowRadius: 1, textShadowOffset: { 
          width: 2,
          height: 2
        }}, 
  abs: {
     position: 'absolute',
      top: 0, left: 0, right: 0, bottom: 0
    }
});
user_5805520

I couldn't find a way to do this with react native's css but I found a way to do a stoke in the text with react-native-svg

<Svg height="60" width="200">
  <Text
    fill="none"
    stroke="purple"
    fontSize="20"
    fontWeight="bold"
    x="100"
    y="20"
    textAnchor="middle"
  >
    STROKED TEXT
  </Text>
</Svg>

enter image description here

Edit

I know this answer isn't the perfect one, but so far is the only answer I found to do this, but unfortunately it isn't good for dynamic text.

user_91191860
Related