How to create text border in React Native?

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't gotten that to work. Any suggestions?

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

you can emulator border as two attributes :

textShadowColor color
textShadowOffset {width: number, height: number}

Ex:

textshadow:{
    fontSize:100,
    color:'#FFFFFF',
    fontFamily:'Times New Roman',
    paddingLeft:30,
    paddingRight:30,
    textShadowColor:'#585858',
    textShadowOffset:{width: 5, height: 5},
    textShadowRadius:10,
  },

You need to set borderColor and borderWidth.

Is currently not working for android. Try wrapping it within a view like this one:

<View
  style={{
    borderWidth: 1,
    borderColor: "thistle",
    borderRadius: 50,
  }}>
</View>

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>

As noted by KChen, you need to add both borderColor and borderWidth. Just updating this answer for later versions of ReactNative (note the usage of 'styles.bigblue').

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, ScrollView, Image, Text } from 'react-native';

export default class HelloWorldWithBorder extends Component {
        render() {
                return (
                                <ScrollView>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                </ScrollView>
                       );
        }
}


const styles = StyleSheet.create({
        bigblue: {
                color: 'blue',
                fontWeight: 'bold',
                fontSize: 20,
                borderColor: 'black',
                borderWidth: 1
        }
});

This was using a combination of the tutorial from Styles and ScrollView

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.

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

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