Text components do not inherit boderStyle on iOS

[irasantiago]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

 React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
      Memory: 523.12 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.11.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0
      react-native: 0.57.4 => 0.57.4
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

On iOS,Text components do not inherit the boderStyle despite inheriting View's style props.

Here's what it looks like in iOS and Android:

Reproducible Demo

Expo Snack: https://snack.expo.io/SkE6cNfT7
Repo: https://github.com/irasantiago/rn-android-border-style

[kelset]

Hello there 👋

I've tested your code locally on 0.59 and I am having a hard time actually understanding what precise issue you are facing: it would be easier for me to understand if you could write a bit more so that we can realise if this is a bug.

In that sense, I dig a bit in the codebase and found this comment on the limitation of borders:

// Currently, the dashed / dotted implementation only supports a single colour +
// single width, as that's currently required and supported on Android.
//
// Supporting individual widths + colours on each side is possible by modifying
// the current implementation. The idea is that we will draw four different lines
// and clip appropriately for each side (might require adjustment of phase so that
// they line up but even browsers don't do a good job at that).

here:

https://github.com/facebook/react-native/blob/7a6fe0cda0a1089c1c82fdd5f7f2db940f70feae/React/Views/RCTBorderDrawing.m

which seems to be related to the issue you are describing. Let me know 🤗

[i1990jain]

I don't know what is it that you are not able to understand, if you just look at the image she has posted, you can compare how borderStyle works in iOS and Android and it is not the same for many cases, I request you to open this issue. The comment on limitation of borders points out that you must use single color and single width, but it is not related to what she is pointing out.

Let me try to explain this to you, I have been facing the same issue what @irasantiago is trying to point out is that the borderStyle property is not consistent in iOS and also Android in some cases. For example, the case which I am facing is when I put borderStyle: 'dashed' on a element it shows up fine on Android but not the same in iOS, whereas when I put borderStyle: 'dashed' on a element it shows up fine on iOS but not the same in Android.

This is exactly what is pointed out in the images posted by her. Please look at them once more and I request you to open the issue.

[kelset]

the borderStyle property is not consistent in iOS and also Android in some cases

I hope you can understand this is different from what she has written, which is

On iOS,Text components do not inherit the boderStyle despite inheriting View's style props.

That said, even your description is super generic:

when I put borderStyle: 'dashed' on a element it shows up fine on Android but not the same in iOS, whereas when I put borderStyle: 'dashed' on a element it shows up fine on iOS but not the same in Android.

Can you slim it down to a clear case, with a minimal repro for 0.59, so that it can be investigated further?

[i1990jain]

ok slimming it down
<Text style={{borderStyle: 'dashed',borderWidth: 1,borderRadius: 1}}>sampleText</Text>

this will show a dashed border in Android but not in iOS and that's the issue what I am trying to explain.

[retyui]

#23537

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.