Text Not Show Content When style both set borderWidth and backgroundColor. about react-native HOT 11 OPEN

@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

from react-native.

@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

from react-native.

@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

from react-native.

@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

from react-native.

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

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.

from react-native.

@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。

from react-native.

@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.

from react-native.

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

from react-native.

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

from react-native.

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.

from react-native.

Any one can try this #45972 ?

from react-native.