react-native: borderColor (top left bottom right) styling ignored on Android
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i7-3520M CPU @ 2.90GHz
Memory: 36.54 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.5.0 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.3, 25.0.1, 25.0.3, 26.0.1, 27.0.3
API Levels: 23, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4720617
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0-rc.4 => 0.56.0-rc.4
npmGlobalPackages:
eslint-plugin-react-native: 1.2.0
react-native-cli: 0.2.0
react-native-git-upgrade: 0.2.7
Description
How my app should look, and did on 0.54.4:
(I know, I’m using iOS screenshot above. But my app looks identical so I’m using this for demo purposes. Pretend this is android)
How my app looks on android, on 0.56.0-rc.4:
The issue being my defined borderColors (top left bottom right) on each of the text boxes being ignored, and defaulting to black. Related to the number of changes to border styling I see on 0.56’s changelog, I assume.
Reproducible Demo
Relevant snippet from my styles.js
. The text boxes being styled by summaryTouchable
:
summaryTouchable: {
overflow: 'hidden',
marginBottom: 10,
borderTopColor: '#e5e6e9',
borderLeftColor: '#dfe0e4',
borderRightColor: '#dfe0e4',
borderBottomColor: '#d0d1d5',
borderWidth: 1,
borderRadius: 3,
},
My workaround on 0.56 for now is add this line only for Android to style summaryTouchable
(no issue on iOS):
borderColor: Platform.OS === 'ios' ? null : '#dfe0e4', // RN 0.56: workaround for Android ignoring 4 colors above
With this, Android on 0.56 would look similar to 0.54.4 screenshot above with light gray borders.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 8
- Comments: 48 (10 by maintainers)
I solved like this style react native 0.57.1
@NicWickman
Hey guys, I ran into this issue too and noticed my borderRadius was too high. Make sure your borderRadius is exactly half your height and width for the best results.
Note that you need to use borderBottomWidth, borderTopWidth, borderLeftWidth, borderRightWidth instead of borderWidth
Cheers.
@fungilation, please understand that we aren’t trying to be combative or say that this issue doesn’t exist. We are investing our time with this back and forth because we want to help you help us in the future. All the time that we spend responding to issues and reproduce bugs is time that we aren’t spending on other development for React Native.
I do believe you have likely provided an example that reproes this issue, however it requires jumping through more mental hoops by someone looking into it by needing to put together the different pieces that you provided. By providing a simple example that is the absolute minimum required to create the problem, something like what @oblador provided, it lowers the amount of time investigating and the possibility that we can’t reproduce the error that you are reporting. That makes it more likely that someone can get to this issue and fix it.
Please help us help you to be able to help us.
Since 2018 this bug and still a problem… I faced him right now, and it seems that still a bug, ugh. happy holidays guys but not for you, bug.
@fungilation The important parts is very likely in your
styles.summaryTouchable
, yet it was omitted. A good repo would be something like this (not sure if it actually reflects your issue):This same thing is happening to me in
0.60.4
.This is my component:
This are my styles:
How it looks on iOS:
How it looks on Android:
This is still an issue, as far as I know.
I got some solution for my case! I had to to create semicircle.
Firstly, I just try to set 0 width for borders to hide.
But it leads me for this result. I got something like a crescent
And then I set different
borderWidth
for borders, which has to be hidden and hasnt. And fill useless borderstransparent
It works for me!!
No bot. Stale not. Merry Christmas
Silly bot.
Not solved on 0.59. In my environment, borderRightColor is ignored but borderBottomColor take precedence over borderColor.
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.
I have same problem, after updating to react-native 0.56 border[Top]Color is ignored on android haven’t tried on iOS, which has worked before…
example
code
copy pasted View, with removed borderRadius shows diffrent border colors…
repo for the example
@TheSavior I think this should be re-opened. ^
No bot, this issue has not been resolved and repro has been acknowledged. This issue is fresh fresh fresh.
I had a similar (though not exactly the same) problem in the closed issue mentioned above ^
Basically, if I provided a
borderColor
and then individualborder[Top|Bottom|Left|Right]Color
s, then the ones on top and bottom would get applied correctly but the ones on the left and right would not.Reproduction demo: https://snack.expo.io/HJw35DMXX
I’ll also add that I very much appreciate work of both volunteers and Facebook employees on React Native. Don’t get me wrong on that. I couldn’t have made my app WonderSwipe flying solo in “only” a year without RN, and I’ve praised it as such on Medium and elsewhere.
I’m with the same issue on react-native 0.59.10
Same issue here, on Android. I had to apply a single style for each situation. It can’t be overrided.
borderWidth
andborderColor
must be set for each case. OnlyborderRadius
can be set first.If I set a
borderWidth
or aborderColor
inmainContentBorder
It’s doesn’t work (only bottom and top)Yes i had the same issue on 0.59 but only in android. If i use borderRadius all the border colors are changed to black even i put the colors on each side.
borderRadius: 33, borderWidth: 15, borderTopColor: '#DCDDE2', borderLeftColor: '#DCDDE2', borderRightColor: 'transparent', borderBottomColor: 'transparent',
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 “For Discussion” or “Good first issue” and I will leave it open. Thank you for your contributions.
I was able to repro. We are looking into it.
I fully understand minimum repro is easier for you and I’ll keep that in mind in the future. But I’m not near a computer for the long weekend here, and based on full details of what I did provide, anyone can relatively easily distill a more minimal test case from it. With a view that style the 4 border colors separately for example instead of the more common single borderColor. (if that’s not too minimal to still reproduce bug)
Please provide a tiny, complete example that reproduces this issue that can be dropped in to App.js in a new project.
The repro you provided requires a significant amount of other information from your project.
Can you provide the smallest repro possible that can be tried in a brand new app? Reducing this to something we can quickly test will make it easier for us to try it and identify the problem.
It would be great if you could work on reducing your issue. Does it still apply if you only set the border colors and nothing else on a plain View?