Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested <Text> platform differences regarding background color

See original GitHub issue

Description

Background color on iOS is filled in from edge to edge on all lines except the last line. On Android, it snuggly wraps the characters on all lines. I would lobby to keep the Android implementation for selfish reasons.

### Reproduction 1. Write this JSX

<Text>
  <Text style={styles.highlight}>Hello there, blah blah blah blah blah blah</Text>
</Text>

Style it

const styles = StyleSheet.create({
  highlight: {
    backgroundColor: 'yellow',
  },
});

Look at both Android and iOS: https://rnplay.org/apps/M3MICA

### Additional Information - React Native version: 0.36 - Platform: Both - Operating System: MacOS 10.11

Issue Analytics

State:
Created 7 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

hramoscommented, May 25, 2017

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

0reactions

faunocommented, Nov 25, 2017

It’s more notorious on centered text, where the big chunk of color is at the start of the line:

highlighted-centered

Top Results From Across the Web

How do I set the background color of a nested cell when using ...

Your background color is getting drawn, unfortunately it is being drawn "under" the gradient background which is why you can't see it.

Multi Purpose & Nested | LSU Web Support

Select list with multiple background options. User must remember to adhere to background color/text color contrast ratios.

Material Design 2 in Compose - Jetpack - Android Developers

Colors are modelled in Compose with the Color class, a simple data-holding ... Setting different background colors produces different text and icon colors....

Using multiple backgrounds - CSS: Cascading Style Sheets

You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the...

Colors and fonts | PyCharm Documentation - JetBrains

By default, text in the console uses the same font as the color scheme. To use a different font in the console: Press...