When trying to add a dashed border style, getting "Unsupported dashed / dotted border style" iOS ONLY

Question

Here is my view styling

<View
 style={{
          flexDirection: 'column',
          marginTop: 15,
          borderTopWidth: 2,
          borderStyle: 'dashed',
          borderTopColor: 'rgb(225, 225,225)',
          margin: 20,
          alignSelf: 'center',
          paddingTop: 10,
   }}
>

on android, I get a nice dashed line

on iOS, however, I get no line

and

WARN Unsuppported dashed / dotted border style

AND the rest of the containing view is not rendered at all

Surgery

I can reproduce this. Interestingly, it started working randomly when certain style properties are deleted and added back, but not reliably. There are similar issues on GitHub here, here and here, mostly for Android though. Seems like a bug to me, but I am not sure. – Define

Answer 1

I have already mentioned in the comments that I do not know exactly why this is failing and it seems to me like a bug. There are similar issues on GitHub GitHub here, here and here.

Since it is working on Android but not on iOS, we could exploit the usage of overflow: hidden. This does not work on Android. This is iOS only! If the above works for you on Android, then you could use a conditional solution via the Platform module: Platform.OS === 'ios' ? ... : ....

<View style={{ overflow: 'hidden'}}>
    <View style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: 'red', margin: -2, marginTop: 0}} />
</View>

The trick is to use overflow: hidden for the parent, then set borderWidth: 1 while additionally setting a negative margin margin: -2. We reset the margin of the top back to zero. This fakes a top dashed border.

Here is an example with a child view, and how it will look on iOS.

<SafeAreaView style={{ margin: 20 }}>
   <View style={{ overflow: 'hidden' }}>
     <View
       style={{
         borderStyle: 'dashed',
         borderWidth: 1,
         borderColor: 'red',
         margin: -2,
         marginTop: 10,
       }}>
       <View style={{ height: 200, width: 200 }} />
     </View>
   </View>
</SafeAreaView>

Define

This is a great solution! I hadn't realized that the dashed style DID work on borderWidth, just not borderTopWidth on iOS. I needed padding on the top border as well so ended up using a variant of your solution as shown here to get it done by adding marginHorizontal onto the parent and then making another component below the one with the border. Thanks so much for your help! – Surgery

Answer 2

This is how I do it :) IOS & Android.

dottedLineContainer: {
  flex: 1,
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  overflow: 'hidden',
  marginLeft: 5,
  marginRight: 5,
},
dottedLineDot: {
  width: 2,
  height: 2,
  backgroundColor: 'grey',
  borderRadius: 100,
  marginLeft: 2,
},

const dottedLineDots = Array.from({length: 100}, (_, index) => (
   <View key={index} style={styles.dottedLineDot}></View>
));

<View style={styles.dottedLineContainer}>{dottedLineDots}</View>

Residency

Answer 3

it's not working because you set the borderTopWidth instead of borderWidth. if you want a dashed line you have two option in my opinion : 1- use library like react-native-dash 2- use this solution =>

<View style={{ height: 1, width: '100%', borderRadius: 1, borderWidth: 1, borderColor: 'red', borderStyle: 'dashed' }} />

Djerba

This doesn't work. correctly You are setting a height: 1 which makes it look like a top border, but this is actually the bottom and top squeezed together. You can see two horizontal dashes overlapping. If this View has children, they won't be visible. – Define

Answer 4

This is how I managed:

     <View style={{overflow: 'hidden'}}>
        <View
          style={{
            borderStyle: 'dashed',
            borderWidth: 1,
            borderColor: '#000',
            margin: -1,
            height: 0,
            marginBottom: 0,
          }}>
          <View style={{width: 60}}></View>
        </View>
      </View>

Piracy

Answer 5

I created separate component to create line with dashed/dotted styles, and this worked and was very easy to use. This is an example of usage and the code:

<View style={styles.dashedLine} />
  <View>Your Component</View/>
<View style={styles.dashedLine} />

Stylesheet:

dashedLine: {
    width: '100%',
    height: 1,
    borderWidth: 1,
    borderColor: '#000',
    borderStyle: 'dashed'
    }

Housefather