Support styles (borderX) for <Text /> on IOS

[retyui]

🐛 Bug Report

IOS don't support next styles for <Text/> component!

borderTopWidth\borderTopColor
borderBottomWidth\borderBottomColor
borderLeftWidth\borderLeftColor
borderRightWidth\borderRightColor

To Reproduce

        <Text style={{borderWidth: 1}}>borderWidth</Text>
        <Text style={{borderLeftWidth: 1}}>borderLeftWidth</Text>
        <Text style={{borderRightWidth: 1}}>borderRightWidth</Text>
        <Text style={{borderTopWidth: 1}}>borderTopWidth</Text>
        <Text style={{borderBottomWidth: 1}}>borderBottomWidth</Text>
        <Text style={{borderWidth: 1, borderBottomWidth: 0,}}>borderWidth\borderBottomWidth</Text>      

Expected Behavior

Full style props (borderLeftX,borderTopX, ...) support like Android!

Code Example

Example: https://snack.expo.io/@retyui/test-borders

IOS example:

Android

Environment

  React Native Environment Info:
    System:
      OS: Linux 4.15 Linux Mint 18.3 (Sylvia)
      CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
      Memory: 9.63 GB / 15.55 GB
      Shell: 2.7.1 - /usr/bin/fish
    Binaries:
      Node: 10.15.1 - /usr/bin/node
      Yarn: 1.13.0 - ~/.yarn/bin/yarn
      npm: 6.7.0 - /usr/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 23.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
        System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
    npmPackages:
      react: 16.8.1 => 16.8.1 
      react-native: 0.59.0-rc.2 => 0.59.0-rc.2 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-create-library: 3.1.2

[alloy]

Thanks for the repro steps, we were able to reproduce the issue 👍

While the docs state that the style prop supports all of the View Style Props, the Flow interface (which is considered the source of truth) does not actually include the View Style Props. As such, this is considered a bug in the docs, which we’ll follow up with.

For completeness sake, the proper solution would be to add these props to a wrapper view, which does work as expected:

[alloy]

Actually, we were looking at the wrong code–we should have been looking at these styles.

So theoretically the docs are correct, in that they are presumed to all work, but in practice it seems like somebody needs to make a decision on wether or not these styles will truly have to be supported on Text or if they should be excluded and documented as such.

If you [or others] feel strongly about this then a PR would be much appreciated, otherwise we’ll leave it sit for now.

[stale[bot]]

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.

[JPDevc]

Thank you Sir You are GENIUS and I am fine to learn more here it’s Powerful tool I support The team Always

Le jeu. 1 août 2019 à 20:53, David undefined notifications@github.com a écrit :

Up

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/23537?email_source=notifications&email_token=AI2ZKSF3LO7354MS2DVONALQCOARTA5CNFSM4GYPLJOKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3MIPCA#issuecomment-517506952, or mute the thread https://github.com/notifications/unsubscribe-auth/AI2ZKSAEWUE3ZIY2NSBILYLQCOARTANCNFSM4GYPLJOA .

[stale[bot]]

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[bot]]

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[bot]]

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[bot]]

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[bot]]

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.

[retyui]

any progress ?

[grieben]

Ran into this issue today. Adding a textDecorationLine: 'underline' to the styles sort of works to replace a borderBottomWidth, but visually is not as great. Hope that helps anyone else out there struggling with this issue.

[feRpicoral]

More than three years and this hasn't been fixed yet...

[wneel]

bump, still not working

[alianza]

As a workaround you can render a <View> instead, add a <Text> node in there with the desired text and set the border style on the <View>. This works nicely both on Android and ios.