CODEWITHSUNDEEP
react-native
Anamul Haque
Anamul Haque

Reputation: 7309

borderStyle not working in android - react-native

This still shows solid borderStyle. After going through a lot i saw that in some cases using borderRadius shows the borderStyle. But still borderStyle 'dotted' and 'dashed' has no effects on it.

<TouchableOpacity 
    style = {{ 
    borderStyle: 'dotted',
    borderWidth: 1
   }}
 >
</TouchableOpacity>

Upvotes: 11

Views: 30505

Answers (7)

Inbal Tish
Inbal Tish

Reputation: 287

The borderStyle: 'dashed'/'dotted' should work if you add borderRadius: 1 (Android only).

Also note that it works only with 'borderWidth' (not with 'borderBottomWidth' for example).

Upvotes: 15

박제영
박제영

Reputation: 109

Adding borderRadius also worked for me. use small values like below. borderRadius:0.1

Upvotes: 4

Ashish Saini
Ashish Saini

Reputation: 308

you have to provide some borderRadius to make it work

borderRadius:5

Upvotes: 1

Younes m
Younes m

Reputation: 21

I found out that the border style will not work if you didn't supply the (color, width, style, radius) proprieties altogether.

SOLUTION : include all of them :

example: {
    borderColor: "black",
    borderWidth: 1,
    borderStyle: "dashed",
    borderRadius: 1
}

Upvotes: 2

el2e10
el2e10

Reputation: 1558

You have to add borderRadius to the style .

Upvotes: 5

9841pratik
9841pratik

Reputation: 195

Try adding borderRadius: 0.001px(zero doesnot work) , In that case it works.

Upvotes: 1

praj
praj

Reputation: 859

Try this . Its working for me.

style = {{ 
   flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-start',
    borderColor: 'red',
    borderStyle: 'dotted',
    borderWidth: 2,
    borderRadius: 1,
    position: 'relative',
}}

Upvotes: 14

Related Questions