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

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

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>