How to render multi-line Text component with white gap between lines

Question

I am trying to replicate the following in React Native, a Text component with a white gap between lines.

span {
  background: rgba(255, 235, 0);
  line-height: 1.5;
}

<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at condimentum leo. Suspendisse potenti. Praesent ut lorem ac tortor auctor laoreet. Fusce egestas orci quis dui egestas, ac malesuada lacus feugiat. Etiam at augue vel nisl luctus dignissim. Sed iaculis nec metus vitae interdum. Vivamus tincidunt fermentum ligula, eu tincidunt orci sodales at. Ut tristique velit erat, sed malesuada sapien ornare sit amet. Nunc congue imperdiet sapien in feugiat. Aenean id ipsum quis lorem rhoncus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ornare, risus in dictum dignissim, dui libero blandit velit, a fringilla ligula lacus quis purus. Vivamus ullamcorper lorem vel velit dignissim lacinia. Vestibulum pulvinar leo eget magna lacinia, sit amet porttitor risus cursus. Integer nec tincidunt orci. Proin maximus viverra arcu, sit amet bibendum diam sagittis ut.</span>

Adding the same CSS above to a Text component doesn't output the same as the above snippet.

Answer 1

At the moment, React Native doesn't have this kind of styling out of the box. The CSS line-height property is not equivalent to lineHeight style prop of RN.

Lets take a look at iOS for example:

lineHeight is mapped to a a property of a paragraph style object that controls the min/max line height, which is then applied to your text. This line height is the whole fragment height, so any background color applied here will color the whole line.

There is another property of the native paragraph object called lineSpacing which is added after the line height is calculated. This property can actually control the space and would achieve the exact effect that you're after. Unfortunately, RN doesn't give you control over this property.

So, you can either find a package that provides this kind of functionality, or try to implement a native solution yourself.