CODEWITHSUNDEEP
javascriptcssreactjsreact-native
Abhigyan Gaurav
Abhigyan Gaurav

Reputation: 1904

How to draw dashed border style in react native

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

Upvotes: 32

Views: 77344

Answers (8)

bora.oren
bora.oren

Reputation: 3509

remove borderTopColor

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

Upvotes: 0

Mustafa zeb
Mustafa zeb

Reputation: 69

try to add this to your code

<View style={{borderWidth:1, borderStyle="dashed", width:100, height:100}}></Text>

Upvotes: 0

Shedworth
Shedworth

Reputation: 11

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.

Upvotes: 1

Csutkas
Csutkas

Reputation: 189

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>

Upvotes: 7

Swift
Swift

Reputation: 820

Try this works fine for me;-)

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

Upvotes: 4

Karamat Ullah
Karamat Ullah

Reputation: 55

Following will work perfectly:

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

Upvotes: 3

Sumit Patel
Sumit Patel

Reputation: 4638

Try following it should work

borderStyle: 'dotted',
borderRadius: 1,

Upvotes: 6

Emil
Emil

Reputation: 1280

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

Upvotes: 42

Related Questions