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

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

@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

@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

@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

@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

Thanks for the confirmation @netmaxt3r

@zdpdsy

@zdpdsy This is fabric related issue. I'm trying to debug this issue.
In Fabric New Renderer:
https://github.com/facebook/react-native/blob/ee25081d208a69e803f8b1975020b1eb2d897f5a/packages/react-native/React/Views/RCTBorderDrawing.m#L186
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。

@shubhamguptadream11

@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.
https://github.com/facebook/react-native/blob/5ced5f8363a8c26bdcf70aa03c6696a681710f4b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L737

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 https://github.com/facebook/react-native/blob/ee25081d208a69e803f8b1975020b1eb2d897f5a/packages/react-native/React/Views/RCTBorderDrawing.m#L469-L471

@netmaxt3r

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

@cortinico

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.

Any one can try this #45972 ?

Navigation Menu

Repository navigation

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

Description

Steps to reproduce

React Native Version

Affected Platforms

Areas

Output of `npx react-native info`

Stacktrace or Logs

Reproducer

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

Areas

Output of npx react-native info

Stacktrace or Logs

Reproducer

Activity

netmaxt3r commented on Aug 8, 2024

zdpdsy commented on Aug 9, 2024

netmaxt3r commented on Aug 9, 2024

cortinico commented on Aug 9, 2024

shubhamguptadream11 commented on Aug 9, 2024

zdpdsy commented on Aug 9, 2024

netmaxt3r commented on Aug 9, 2024

netmaxt3r commented on Aug 9, 2024

shubhamguptadream11 commented on Aug 9, 2024

netmaxt3r commented on Aug 10, 2024

zhongwuzw commented on Aug 13, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx react-native info`