How to create text border in React Native?

Question

In React-Native, how do I add font borders to Text-components?

I\'ve tried using border and shadow{Color, Radius, Opacity, Offset}, but haven\'

Answer 1

You need to at least set the borderWidth, it must be set to an integer. The default border color is black, you can change the color with borderColor

Answer 2

I needed to add a bottom border to Text component like this:

I did the following:

the border is a <View/> inside another one with flexDirection : 'row'

here is my code:

<View style={styles.titleContainer}>
   <Text style={styles.title}>Horaire de prière</Text>
   <View style={styles.borderContainer}>
     <View style={styles.border} />
   </View>
</View>

and the style:

titleContainer: {
    flex: 0.2,
    alignItems:'center',
    justifyContent:'center'

  },
  title: {
    fontSize: 18,
    marginBottom:2,  
  },
  borderContainer:{
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',

  },
  border:{
    flex:0.28,
    borderBottomWidth: 1,
    borderBottomColor: '#428947',

  },

you can modify border size with flex.

Answer 3

 paddingTop: 10,
 borderWidth: 1,
 borderColor: 'red'

Answer 4

If you are looking for something similar to how CSS -webkit-text-stroke works, why not try react-native-svg?

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

<Svg height="50%" width="50%" viewBox="0 0 100 100">
  <Text
    stroke="black"
    strokeWidth="1"
    fill="white"
    color="#ffffff"
    fontSize="45"
  >
    Yay!
  </Text>
</Svg>

Answer 5

You need to set borderColor and borderWidth.

Answer 6

The official docs have this information for you. You can find it on this site: Text Component. There it shows which props you can use to change the behaviour and style of the component. As you can see there are some specific Text styles but also the styles you can apply on a View Component. And if you follow that link it shows you the border styles. So, what you're looking for is maybe:

borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
borderStyle enum('solid', 'dotted', 'dashed')
borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number