How to draw dashed border style in react native

Question

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

Answer 1

您需要添加borderRadius: 1才能使其工作。

Answer 2

Try following it should work

borderStyle: 'dotted',
borderRadius: 1,

Answer 3

Following will work perfectly:

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

Answer 4

Try this works fine for me;-)

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

Answer 5

According to github issue comments ( https://github.com/facebook/react-native/issues/24224 ):

<View style={[{ height: 1, overflow: 'hidden' }]}>
  <View style={[{ height: 2, borderWidth: 1, borderColor: '#ddd', borderStyle: 'dashed' }]}></View>
</View>

Answer 6

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.