Text Not Show Content When style both set borderWidth and backgroundColor.

[zdpdsy]

Description

Text Not Show Content When style both set borderWidth and backgroundColor.
if Text style is styles.tag, the '预售' Not Show，only show backgroundColor
else style is styles.tag, the '停止营业' Can show normally
like this

The Code:

style class:

Code link: https://github.com/zdpdsy/reproducer/blob/main/ReproducerApp/App.tsx

Steps to reproduce

1.cd ReproducerApp
2. npm run start
3. run Xcode

React Native Version

0.73.9

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

Node Version : v20.11.1

Stacktrace or Logs

none log

Reproducer

https://github.com/zdpdsy/reproducer

[netmaxt3r]

@zdpdsy issue lists rn version 0.73.9 but reproducer is on 0.74.5, I am not able to reproduce the issue on reproducer, please confirm from your side

[zdpdsy]

@zdpdsy issue lists rn version 0.73.9 but reproducer is on 0.74.5, I am not able to reproduce the issue on reproducer, please confirm from your side

@netmaxt3r sorry,i push code now. can you try it again? thank you!
The Result Snapshot is

[netmaxt3r]

@zdpdsy thanks for update, i see that this is fabric related issue. issue is reproducible on current latest rn 0.74.5 with fabric enabled , i was wrong on previous comment i was on old architecture when i said i was not able to reproduce on 0.74.5 sorry about that

[cortinico]

@zdpdsy thanks for update, i see that this is fabric related issue. issue is reproducible on current latest rn 0.74.5 with fabric enabled , i was wrong on previous comment i was on old architecture when i said i was not able to reproduce on 0.74.5 sorry about that

Thanks for the confirmation @netmaxt3r

[shubhamguptadream11]

@zdpdsy This is fabric related issue. I'm trying to debug this issue.
In Fabric New Renderer:

react-native/packages/react-native/React/Views/RCTBorderDrawing.m

Line 186 in ee25081

static UIImage *RCTGetSolidBorderImage(

This is responsible for drawing backgroundColor and borderWidth styles.

I am looking to map same for Old Architecture. @cortinico Can you help me pointing the code responsible for handling border and backgroundColor for Old Architecture?
This will help me in finding the root cause.

[zdpdsy]

@zdpdsy thanks for update, i see that this is fabric related issue. issue is reproducible on current latest rn 0.74.5 with fabric enabled , i was wrong on previous comment i was on old architecture when i said i was not able to reproduce on 0.74.5 sorry about that

OK，Thanks,i find a temporary solution is change border style To Super element Like as ，like th snapShot:

but this solution is temporary，can't Real problem solving。

[netmaxt3r]

@shubhamguptadream11 issue might not be on that function , since it is reproducible with dotted border style as well probably with layer zIndex for border layer and main layer.

react-native/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

Line 737 in 5ced5f8

if (!_borderLayer) {

[netmaxt3r]

I have found one more issue related to this when border width is not specified or computed to zero with dotted style we loose background color

 <Text style={{ 
        backgroundColor: '#F00',
        borderWidth: 0, 
        borderStyle: 'dotted'
    }}>hello</Text>

this is due to early return without checking bgcolor

react-native/packages/react-native/React/Views/RCTBorderDrawing.m

Lines 469 to 471 in ee25081

	if (lineWidth <= 0.0) {
	return nil;
	}

[shubhamguptadream11]

@netmaxt3r I found one more issue related to border in Text Component only.
Here: #45925

[netmaxt3r]

I did some comparison with old and new arch implementation, i see border styling is not working properly even on old arch

     <View style={{ 
        backgroundColor: '#F00',
        borderColor: "black",
        borderWidth: 1,
        borderStyle: "dashed",
        minHeight: 30,
      }}/>
      <Text
      style={{ 
        backgroundColor: '#F00',
        borderColor: "black",
        borderWidth: 1,
        borderStyle: "dashed",
        minHeight: 30,
        marginTop: 10,
      }}
      >hello</Text>

text view render with solid border rather than dashed

I also see in the new arch RCTTextView has been replaced by RCTParagraphComponentView with improved logic for border rendering. i see now we render border and background on single CALayer and setting its zIndex to -1024 hopping it would render borderLayer behind the root layer of RCTParagraphComponentView, but it is not , you can verify this by applying some transparency to border layer (zindex works with relative to multiple sublayers). I am not sure issue is with iOS or RN, I believe we might have to reconsider the logic for border and background layer
@cortinico since TextView is a extremely important component can we have someone from meta team take a look and suggest a way forward
possible options i see are

• move rendering text to new sub layer and add on top of borderLayer
• separate border and background.

[zhongwuzw]

Any one can try this #45972 ?