Menu
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>
982
How do you add a dashed line in React Native? ProTip 1: Use flexDirection in style to get horizontal or vertical dashes. By default, it's row. ProTip 2: Use {borderRadius: 100, overflow: 'hidden'} in dashStyle to get rounded dotes instead of straight line dashes.
To set a border, you must first set borderWidth. borderWidth is the size of the border, and it's always a number. You can either set a borderWidth that applies to the entire component or choose which borderWidth you want to set specifically (top, right, bottom, or left).
To add border bottom in React Native, we can add border bottom on the View . to set borderBottom to '1px solid blue' on the View . Now we see a bottom border on below the text and it's blue.
The task is to increase space between the dotted border dots. you can just adjust the size with the background-size property, the proportion with the background-image property, and the proportion with the linear-gradient percentages. So, you can have several dotted borders using multiple backgrounds.
Try to update react-native version to 0.57. The borderStyle: 'dashed'/'dotted' should work if you add 'borderRadius: 1' (Android only). Also note that it work only with 'borderWidth' (not with 'borderBottonWidth' for example).
105
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
