How to draw dashed border style in react native

javascript css reactjs react-native

31,177

Solution 1

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

Solution 2

Try following it should work

borderStyle: 'dotted',
borderRadius: 1,

Solution 3

Following will work perfectly:

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

Solution 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)'}} />

Solution 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>

View more solutions

31,177

Author by

Abhigyan Gaurav

Updated on January 18, 2022

Comments

Abhigyan Gaurav over 2 years

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

Abhigyan Gaurav almost 5 years

in this style just i have to add borderRadius: 1 ? rit
Emil almost 5 years

github.com/facebook/react-native/issues/17251 Check this, and yes
Abhigyan Gaurav almost 5 years

thanks .one question , If I have to remove top border then? how can I remove it?
Abhigyan Gaurav almost 5 years

thanks .one question , If I have to remove top border then? how can I remove it?
Sumit Patel almost 5 years

Abhigyan try this borderBottomLeftRadius: number borderBottomRightRadius: number borderTopLeftRadius: number borderTopRightRadius: number Also you will read this artical this give you more info on style ---- facebook.github.io/react-native/docs/stylesheet
Joshua Pinter almost 4 years

NOTE: As of writing, applying borderStyle to a single border edge is broken in React Native 0.63.2 but there is an open PR to fix this limitation: github.com/facebook/react-native/pull/29099
Joshua Pinter almost 4 years

NOTE: As of writing, applying borderStyle to a single border edge is broken in React Native 0.63.2 but there is an open PR to fix this limitation: github.com/facebook/react-native/pull/29099
mrxrinc about 3 years

remove borderTopColor and add some borderRadius!
LeX over 2 years

Thanks, but why it doesn't work without specifying a borderRadius