Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

🐛 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:

IOS

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

Issue Analytics

State:
Created 5 years ago
Comments:10 (3 by maintainers)

Top GitHub Comments

8reactions

stale[bot]commented, Dec 25, 2020

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.

4reactions

stale[bot]commented, Aug 16, 2020

Top Results From Across the Web

Use object styles in Pages on iPhone - Apple Support

In Pages on iPhone, quickly change the look of objects with object styles—combinations of colors, borders, and more that match the current template....

background-clip - CSS: Cascading Style Sheets | MDN

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

Add a border around a text box, picture, or other object in ...

Used sparingly, borders are a great way to get attention. Here's how to add a line, pattern, or custom border to a text...

Get started with Photoshop Express on iOS - Adobe Support

Adobe Photoshop Express is available on iOS in App Store. ... Create memes and posters by adding Text styles to your photos and...

iOS Design Guidelines: Illustrated Patterns (+ free templates)

Secondary Text Styling for iPhone Apps. iOS apps have a standardized style for any supporting “secondary” text. Size: 15pt; Font weight: normal ...