Friday, August 3, 2018

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

Leave a Comment

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.

1 Answers

Answers 1

Text will not behave like a span. You can do a hack for this. Use react-native-highlight-words lib and pass all text as searchWords first array element.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment