CODEWITHSUNDEEP
androidiosreactjsreact-native
Subhendu Kundu
Subhendu Kundu

Reputation: 3856

How to add dash or dashed border in react-native?

I am tring to add a dashed border in one side,

{
  height: '100%',
  width: 20,
  position: 'absolute',
  borderRadius : 1,
  borderStyle: 'dashed',
  borderRightWidth: 1,
  borderRightColor: 'rgba(161,155,183,1)'
}

This doesn't work, but when I change this to

{
  height: '100%',
  width: 20,
  position: 'absolute',
  borderRadius : 1,
  borderStyle: 'dashed',
  borderWidth: 1,
  borderColor: 'rgba(161,155,183,1)'
}

Works but border in 4 side. How do I add bashed border just in one side? Also is there a way to add more spacing to the dash? "react-native": "0.57.7"

Upvotes: 5

Views: 11816

Answers (3)

Subhendu Kundu
Subhendu Kundu

Reputation: 3856

Thank you so much, you guys are amazing. Though I am using react-native, it doesn't use px/em. I got the idea. Also I did thought of this idea. and thats the workaround I did a while back, the only issue with this approach is the border width became too thick. also the gap between the dash became lesser. So I decided to fix it with react-native-dash

Upvotes: 1

OriHero
OriHero

Reputation: 1228

https://github.com/facebook/react-native/issues/7838

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.

You can achieve this by using this kind of mask:

const inputStyles = 
StyleSheet.create({
container: {
height: 20,
marginRight: 25,
marginLeft: 25,
paddingTop: 25,
paddingBottom: 25,
borderStyle: 'dotted',
borderWidth: 2,
borderColor: '#b7c2c6',
position: 'relative',
overflow: 'hidden',
},
topMask: {
height: 3,
width: 9999,
backgroundColor: 'white',
position: 'absolute',
top: -3,
left: 0,
},
rightMask: {
height: 9999,
width: 3,
backgroundColor: 'white',
position: 'absolute',
top: 0,
right: -3,
},
leftMask: {
height: 9999,
width: 3,
backgroundColor: 'white',
position: 'absolute',
top: 0,
left: -3,
},
});

This issue have not been solved yet:https://github.com/facebook/react-native/issues/17251

You can set borderRadius to 1 or 0.5 to get dashed border.

Upvotes: 1

fedesc
fedesc

Reputation: 2610

I'm not sure if it's just for pasting but you have a lot of syntax errors in what you posted

it should be: 

{
  height: '100%',
  -width: 20, - width: 1px/em/
  position: 'absolute',
  -borderRadius : 1-, borderRaduis : 1px/em/... or any other size
  borderStyle: 'dashed',
  -borderWidth: 1-, borderWidth: 1px/em/...
  borderColor: 'rgba(161,155,183,1)'
}

changing only one border and not the whole div is simple as stating it borderBottomStyle: 'dashed' or borderTopStyle,borderRightStyle,borderLeftStyle

Upvotes: 0

Related Questions