Repository navigation
borderStyle: 'dashed' doesn't work correctly #32918
Description
Description
Dear Developers:
I am trying to control the style of View.
When 'Dashed' pressed, the style of View will be changed, especially the borderStyle will be set as 'dashed'.
The problem is, when I run this on iOS devices, the dashed border line and the solid border line are coexisted. It only appears when overflow is set as 'hidden'
Waiting for your answer : )
import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
item: {
width: 100,
height: 100,
borderWidth: 1,
borderColor: 'gray',
borderRadius: 4,
overflow: 'hidden'
},
addItem: {
width: 100,
height: 100,
borderWidth: 3,
borderColor: 'red',
borderRadius: 4,
borderStyle: 'dashed',
overflow: 'visible'
}
})
const HelloWorldApp: React.FC = () => {
const [st, setSt] = useState(styles.item)
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
<View style={st}/>
<Text onPress={() => {
setSt(styles.addItem)
}}>Dashed</Text>
<Text onPress={() => {
setSt(styles.item)
}}>Reset</Text>
</View>
)
}
export default HelloWorldApp;
Version
0.66.00
Output of npx react-native info
I dont have any info because I reproduced this problem on reactnative.dev/docs/tutorial
Steps to reproduce
You can paste code here reactnative.dev, where I met this problem.
Run with iOS device and click the 'Dashed' Text, you will met same problem, I think.
import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
item: {
width: 100,
height: 100,
borderWidth: 1,
borderColor: 'gray',
borderRadius: 4,
overflow: 'hidden'
},
addItem: {
width: 100,
height: 100,
borderWidth: 3,
borderColor: 'red',
borderRadius: 4,
borderStyle: 'dashed',
overflow: 'visible'
}
})
const HelloWorldApp: React.FC = () => {
const [st, setSt] = useState(styles.item)
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
<View style={st}/>
<Text onPress={() => {
setSt(styles.addItem)
}}>Dashed</Text>
<Text onPress={() => {
setSt(styles.item)
}}>Reset</Text>
</View>
)
}
export default HelloWorldApp;
Snack, code example, screenshot, or link to a repository
No response
Activity
amitchaudhary140 commentedon Jan 23, 2025
@syedfaheem27
This works for me quite well. Just ensure that same element doesn't have any other border related styling through className. Use style prop only.
style={{
borderColor: "white",
borderStyle: "dashed",
borderWidth: 1,
}}
Choco-milk-for-u commentedon Apr 20, 2025
so i cant use radius and dashed in the same time???
lil-sahil commentedon May 23, 2025
@Choco-milk-for-u that is what I am seeing as well.
KamaljeetSahoo commentedon Jun 27, 2025
+1
This set of code is not working for me, when I remove
borderStyle: 'dashed'it appearsAlberteda commentedon Jun 29, 2025
+1
alextbogdanov commentedon Jul 15, 2025
This is a pretty crazy bug if I'm being honest
Reykjavik151 commentedon Aug 28, 2025
+1
0.79.4 React Native AND STILL NO FIX, ARE YOU MAD?
Rafael-Henrique-Silva commentedon Sep 1, 2025
+1
aripjanovsh commentedon Sep 11, 2025
+1
clowcher commentedon Nov 7, 2025
+1
Vaib215 commentedon Dec 16, 2025
Still not fixed
Reykjavik151 commentedon Dec 24, 2025
Please find the solution, a lot of design systems have dashed border for items.
It has native implementation, what's the problem to do that?
edbarbera commentedon Mar 15, 2026
Currently on 0.83.2 RN and still broken
react-native-bot commentedon Sep 11, 2026
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.