Repository navigation
Support styles (borderX) for <Text /> on IOS #23537
Description
🐛 Bug Report
IOS don't support next styles for <Text/> component!
borderTopWidth\borderTopColor
borderBottomWidth\borderBottomColor
borderLeftWidth\borderLeftColor
borderRightWidth\borderRightColorTo 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.2Reacted by dan
Activity
alloy commentedon Mar 19, 2019
Thanks for the repro steps, we were able to reproduce the issue 👍
While the docs state that the
styleprop 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 commentedon Mar 19, 2019
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
Textor 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.
11 remaining items
stale commentedon May 13, 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.
stale commentedon Aug 16, 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.
stale commentedon 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.
grieben commentedon Mar 29, 2023
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 commentedon May 28, 2023
More than three years and this hasn't been fixed yet...
wneel commentedon Mar 11, 2024
bump, still not working
alianza commentedon May 2, 2024
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.fix: apply borders to `View` instead of `Text` in event list