borderStyle: 'dashed' doesn't work correctly

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

+1

To add to this, if you set borderRadius > 0 the gray outline disappears

The borderStyle when not equal to solid still behaves wrongly (using React Native 0.68.2 and Expo 45.0.6).
The following code works when using solid and doesn't work when using dashed or dotted:

const styles = StyleSheet.create({
  row: {
    borderColor: '#000000',
    borderStyle: 'solid',
    borderTopWidth: 0,
    borderWidth: 1,
  },
});

+1

This still doesn't work correctly

+1

To add to this, if you set borderRadius > 0 the gray outline disappears

This fix worked for me! You can even set the borderRadius to be as small as 0.1!

+1
Anyone who got a fix for this.

so i cant use radius and dashed in the same time???

@Choco-milk-for-u

@Choco-milk-for-u that is what I am seeing as well.

+1

<View style={styles.divider} />
divider: {
      borderStyle: 'dashed',
      borderTopColor: 'red',
      borderWidth: 1,
      marginVertical: 16,
      width: '100%'
  }

This set of code is not working for me, when I remove borderStyle: 'dashed' it appears

+1

This is a pretty crazy bug if I'm being honest

+1
0.79.4 React Native AND STILL NO FIX, ARE YOU MAD?

+1

Still not fixed

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?

Currently on 0.83.2 RN and still broken

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.

Navigation Menu

Repository navigation

borderStyle: 'dashed' doesn't work correctly #32918

Description

Version

Output of `npx react-native info`

Steps to reproduce

Snack, code example, screenshot, or link to a repository

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

borderStyle: 'dashed' doesn't work correctly #32918

Description

Description

Version

Output of npx react-native info

Steps to reproduce

Snack, code example, screenshot, or link to a repository

Activity

dirkpostma commented on May 26, 2022

m2hd1 commented on May 26, 2022

sseppola commented on Jun 1, 2022

aike19115 commented on Sep 6, 2022

sisundin commented on Jun 28, 2023

educbraga commented on Sep 10, 2023

cunguyendev commented on Dec 8, 2023

amitchaudhary140 commented on Dec 27, 2023

pavlof01 commented on Feb 15, 2024

54m1r commented on Feb 17, 2024

okevino47 commented on Jul 5, 2024

wassimAJ commented on Jul 26, 2024

edbarbera commented on Sep 25, 2024

syedfaheem27 commented on Jan 23, 2025

1 remaining item

Choco-milk-for-u commented on Apr 20, 2025

lil-sahil commented on May 23, 2025

KamaljeetSahoo commented on Jun 27, 2025

Alberteda commented on Jun 29, 2025

alextbogdanov commented on Jul 15, 2025

Reykjavik151 commented on Aug 28, 2025

Rafael-Henrique-Silva commented on Sep 1, 2025

aripjanovsh commented on Sep 11, 2025

clowcher commented on Nov 7, 2025

Vaib215 commented on Dec 16, 2025

Reykjavik151 commented on Dec 24, 2025

edbarbera commented on Mar 15, 2026

react-native-bot commented on Sep 11, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx react-native info`