How to center an oval border around text in React Native?

Question

I have this text and style:

<Text style={styles.problematicStyle}>{this.props.text}</Text>

problematicStyle: {
  borderRadius: 5,
  borderWidth: 1,
  borderColor: 'red',
}

it is wrapped in a view without any styling with other texts.

what this does does is

+--------------+    
|text          |
+--------------+

(stretches to the whole screen)

while I want

+----+
|text|
+----+

(I "drew" rectangular borders because it's easier but I need ovals)

I would prefer to not use static height and width but I can if I need to.

Answer 1

添加以下样式属性：

.owl-pagination .owl-page span {
    background-color: white;
}
.owl-pagination .owl-page .active span
{
    background-color: aqua;
}

如果你想在文本和边框之间留一些空格，请将margin属性添加到文本样式。

Answer 2

需要View背景problematicStyle才能实现此目标。

<View style={styles.problematicStyle}>
  <Text>{this.props.text}</Text>
</View>