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