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"
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With