React-Native : Space between underline text

Question

I am using style={{textDecorationLine: 'underline'}}, but app currently shows like this. But I want it to look like this

Answer 1

Try this way

renderTexts() {
    return textArray.map((item) => {
        return (
            <Text style={{textDecorationLine: 'underline'}}>{item.text}</Text>
        );
    });
}
...

render() {
    return (
        <View style={{flexDirection: 'row'}}>
            { this.renderTexts() }
        </View>
    )
}

Answer 2

Here is a tested example on snack based on @Nooruddin Lakhani with some modifications.

the result:

the code:

export default function App() {
  const textArray = ['this', 'is', 'a', 'test'];
  const renderTexts = () => {
    return textArray.map((item) => {
      return (
        <Text style={{ textDecorationLine: 'underline', marginLeft:2 }}>{item}</Text>
      );
    });
  };

  return (
    <View>
      <Text>{renderTexts()}</Text>
    </View>
  );
}