Search code examples
cssreact-native

React Native font outline / textShadow

Is it possible to add an outline or textShadow to a font in react native to achieve something like this (white font with a black outline):

enter image description here

In CSS on the web its possible to add a text shadow or an outline to a font, to give the text a border that follows the font, something like this:

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<h1>Hello World</h1>

Is it possible to do something similar in react native?

I took the CCS snippet example from this stack overflow post on how to do it with CSS: CSS Font Border?

Solution

  • Yes it is possible through the following properties:

    textShadowColor color
textShadowOffset ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )
textShadowRadius ReactPropTypes.number

    https://facebook.github.io/react-native/docs/text.html

    Actual completed pull request: https://github.com/facebook/react-native/pull/4975