React-native: iOS Text background color inheritance

[janicduplessis]

<Text> elements inherit the background color of their parent <View> but this behavior causes more annoyance that helps in my opinion. A simple example is an <Image> with nested <Text>. The text nodes will take the background color or the parent views instead and will hide the image. Then we have to set backgroundColor: 'transparent' on the text nodes to fix it.

This behavior also doesn't happen on Android, the <Text> nodes always have a transparent background by default. This causes a few surprises when developing something on Android then testing it on iOS.

I suggest that we remove the background color inheritance of <Text> on iOS to make it consistent with Android and avoid having to set the background of text elements to transparent. This is also pretty much the only case of style inheritance in react native and can be confusing.

[ide]

This is for performance to avoid alpha blending and also I believe to increase the quality of the rendered text. Setting the background color to transparent is the simple escape hatch. Maybe we should apply the optimization to Android too.

[janicduplessis]

I wonder if it would be possible to do this perf optimization less aggressively so we don't do it when the text is displayed over an image for example.

[janicduplessis]

I thought about it a bit and I assume the code works by walking up the parent tree and looking for the first view that has a background color set.

What we could do is

• If any of the parent view is not a UIView stop
• If any of the parent view is positioned with position: absolute stop. This will help since we can't know for sure the absolute positioned view won't be over another child.
• If any view is outside it's parent's bounds stop. This may be too expensive or impossible since layout may not have been calculated.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/ios-text-background-color-inheritance

Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.

[gezichenshan]

I encounter this issue on IOS, too.I set backgroundColor:'rgba(0,0,0,0)'on my Text to hide the background but it is not a good solution.

[VinceBT]

Could we reopen this issue ?

EDIT: Thanks @janicduplessis for the fix.
From which version is it available ?

[mtrabelsi]

Same for Other components, for instance :

        <View style={styles.container}>
            <TextInput
              style={{height: 40, backgroundColor: 'white'}}
              placeholder="Username"
              onChangeText={(text) => this.setState({text})}
            />

The TextInput will also inherits the backgroundColor and apply it in the input text which is something you are not expecting as a developer.

You need to reset manually and do CSS overriding ! that is a an anti pattern

[parkerbossier]

II can confirm the above comment. Specifying a background color on a TextInput will cause the text within to inherit.

[VinceBT]

What version are you on ?
The fix should already have been merged (8c8944c10fb7dc30ea99657225f25ea438cf6e14)