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.

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

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

2reactions

rmevans9commented, Aug 11, 2016

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.

0reactions

ghostcommented, Nov 22, 2017

Try to add borderRadius: 'your value here'

Top Results From Across the Web

React native adding border to the one side of the view

In react native there are view's style property to set individual side width. You can use borderTopWidth for Top Border.

border-style - CSS: Cascading Style Sheets - MDN Web Docs

The border-style shorthand CSS property sets the line style for all four sides of an element's border.

Apply or remove cell borders on a worksheet

Add a border line style - Click the Borders arrow > Border Style, and then pick a line style option.

CSS Border Sides

If the border-style property has three values: border-style: dotted solid double;. top border is dotted; right and left borders are solid; bottom border...

Border Width

Use the border-{x|y}-{width} utilities to set the border width on two sides of an element at the same time. border-x-4. border-y-4.