React-native: [Android] borderStyle does not work with specific borderWidth (borderBottomWidth, etc).

[awitherow]

borderStyle does not work with specific borderWidth.

borderBottomWidth: 1,
borderBottomColor: '#979797',
borderStyle: 'dotted',

shows no dotted border.

[linmic]

I assume this is a duplicate of #8236.

[brentvatne]

:+1: repro'd this

[mkonicek]

Thanks for reporting. Any chance you could send a PR with a fix? :)

@brentvatne I believe this was owned by someone who doesn't work on RN anymore (possible to find out using blame info).

[brentvatne]

cc @ahmedre as you're likely the most knowledgable person about this

[ahmedre]

i am not really sure, but the border code in Android is here.

it looks like we have two cases - drawRectangularBackgroundWithBorders and drawRoundedBackgroundWithBorders. it seems that in this case, we go to the latter (because the style is not solid), which doesn't seem to support non-uniform borders. the easiest fix here would be to replace the if on line 105 with if (!roundedBorders). this should work because styles can be applied on Paths, and drawRectangularBackgroundWithBorders also generates a Path to draw the borders now.

if no one gets to this before Tuesday, i can give it a shot.

[Lxxyx]

same problem.

[sospedra]

+1 why is this closed?

[RobTS]

+1

Border turned solid after upgrading from RN 41.2 to 43.3. Styling:

  imagePlaceholder: {
    borderStyle: "dashed",
    margin: 10,
    padding: 30,
    alignItems: "center",
    borderColor: Colors.gray,
    borderWidth: 3
  },

[xiemeilong]

+1

[cgx9]

same problem. +1

[xsgkaka]

i got the same problem

[adrianlemess]

Same problem here, when I'm using borderTopRightRadius and to make a semi circle. When I'm put borderTopWidth, borderRightWidth and borderLeftWidth with value and borderBottomWidth 0, the border disappear. And if I'm just put borderWidth: value and borderBottomWIdth: 0 the border bottom showing again:

and if I remove the borderTopRightRadius and borderTopLeftRadius:

[zoharlevin]

still happening as you can see here
https://github.com/facebook/react-native/issues/13464

[NAPSHOT]

@adrianlemess Did you solve your problem? I have got same issue creating semi circle without bottom boarder.

[gregblass]

Anyone know if this issue still open or if it's been resolved? Looks like it may have originated over a year ago. I'm still on 0.44, so just wondering if this was addressed in any of the later releases?

I think I can workaround it by just adding a <View> element to act as a faux-border, but would rather avoid that if an upgrade to the latest RN will fix it.

[AlanChauchet]

@gregblass Still opened.
I have the same issue when using some style like

{ 
    borderTopColor: '#F00',
    borderTopWidth: 4,
    borderRadius: 5,
}

As long as borderRadius is set, no top border at all

[wcandillon]

I can confirm that this issue is still present in version 0.50.4.

[kerwin-ly]

I have the same problem(v0.47.2 on android)

[porluz]

+1 "react": "16.0.0", "react-native": "0.50.3".

[sadi304]

This issue needs to be addressed -__-. Been there for almost one and a half year

[sound2gd]

+1 "react": "16.0.0", "react-native": "0.51".

[LouisJS]

+1 "react": "16.2.0",
"react-native": "0.52.0",

[orhanberamus]

+1

[sahandevs]

+1 react native 0.55.2