How to draw dashed border style in react native

user_8477139 0
Viewed 41794

I am using below style, I am trying to draw dashed border style but it always coming solid . Please suggest .

<View style={{paddingLeft:10,
 height:300, marginBottom:10, 
 borderWidth:1,
 borderStyle: 'dashed',
 borderColor:'red',
 borderTopColor:'white'}}>

// Thanks

react-native reactjs css javascript
6 Answers

You need to add borderRadius: 1 to make it work.

user_94630630

Try following it should work

borderStyle: 'dotted',
borderRadius: 1,
user_106839530

Following will work perfectly:

<View style={{
  paddingLeft:10,
  height:300,
  marginBottom:10,
  borderStyle: 'dashed',
  borderRadius: 1,
  borderWidth: 1,
  borderColor: 'red',
  borderTopColor:'white'
 }} />
user_18815490

Try this works fine for me;-)

<View style={{ height: '100%',
               borderRadius : 1,
               width: '100%',
               borderStyle: 'dashed',
               borderWidth: 1,
               borderColor: 'rgba(161,155,183,1)'}} />
user_124892790
user_114198340

It's worth adding that borderRadius needs to be applied to all sides globally using borderRadius rather than applying it to individual sides, as this seems to break styled borders on Android.

In my case I was using a Tailwind utility style rounded-2xl:

    "rounded-2xl": {
        "borderTopLeftRadius": 16,
        "borderTopRightRadius": 16,
        "borderBottomRightRadius": 16,
        "borderBottomLeftRadius": 16
    }

Exchanging this for borderRadius: 16 solved the issue for me.

user_163356550
Related