Can't add borderStyle for single side border of a view

[poberwong]

I wanna set borderStyle for bottom border of a view, so I have following code:

<View style={{borderColor: 'red', borderWidth: 0, borderBottomWidth: 1, borderStyle: 'dashed'}}>
  <Text>Example</Text>
</View>

As well, I get warning like this: Unsupported dashed / dotted border style.
Is there any ways to solve the problem ? Thanks any way...

---

• version of react native: 0.30.0

[rmevans9]

Based upon looking at the code this looks like a intentional limitation. There is code that specifically checks to see if both the color and width are the same on all sides if trying to use a dashed or dotted border. I would venture to guess that if you were to set borderWidth to 1 instead of just borderBottomWidth that the warning will go away and your border will show.

ref: https://github.com/facebook/react-native/blob/235b16d93287061a09c4624e612b5dc4f960ce47/React/Views/RCTBorderDrawing.m (line 382)

[poberwong]

@rmevans9 I just need bottomBorderWidth, not for each border. And thanks a lot for your explanation

[rmevans9]

A workaround might be to put a view with a full dashed border within the containing view, push it to the bottom and give it the border with a height of 0 (or you might need to do 1). This will make it seem like you have a border just on the bottom.

[poberwong]

yeah, It could be a pretty resolution~

[RichardLindhout]

Looks like this #9262

[rmevans9]

Closing this as a duplicate of #7838 since it is exactly the same. @bob1993 you can subscribe over there to see updates.

[rmevans9]

@facebook-github-bot duplicate #7838

@rmevans9 tells me this issue is a duplicate of #7838. Let's discuss there, closing this one.

Try to add borderRadius: 'your value here'