Text components do not inherit boderStyle on iOS

• 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 🤗

[stale[bot]]

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.