react-native: Setting borderStyle on to dashed or dotted for a single side does not render correctly on both iOS and Android

temporary fix by this hacker

<View style={[{ height: 1, overflow: 'hidden' }]}>
  <View style={[{ height: 2, borderWidth: 1, borderColor: '#ddd', borderStyle: 'dashed' }]}></View>
</View>

<View> <Text style={{ marginRight: 10, color: '#006087' }}>Routing Numbers</Text> <View style={{ marginRight: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly', marginTop: -10 }}> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> <Text>-</Text> </View> </View>

Same problem, for now, this hack work for me

style={{ borderWidth: 1, borderStyle: 'dotted', borderColor: '#fff', borderBottomColor: 'red' }}

You can set like below for only bottom border: borderWidth: 1, borderLeftWidth: 0, borderRightWidth: 0, borderTopWidth: 0, borderStyle: ‘dashed’

Still an issue on rn 0.63

not a priority

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container} />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 100,
    marginLeft: 100,
    height: 100,
    width: 200,
    backgroundColor: 'yellow',
    borderWidth: 2,
    borderStyle: 'dotted',
    borderRadius: 0.0000001,
  },
});

not four side, just add a single side(left/right/top/bottom), it will render to solid line, no matter change a side borderColor or borderWidth, the dashed or dotted will render to solid line

still have the same issue with rn 0.60.5

Here’s how I got it to work (RN version 59.10)

          <View style={{ overflow: 'hidden' }}>
            <View
              style={{
                borderWidth: 1,
                borderStyle: 'dashed',
                borderColor: '#000000',
                marginTop: -1,
                marginLeft: -1,
                marginRight: -1,
              }}
            >
              Content
            </View>
          </View>

temporary fix by this hacker

<View style={[{ height: 1, overflow: 'hidden' }]}>
  <View style={[{ height: 2, borderWidth: 1, borderColor: '#ddd', borderStyle: 'dashed' }]}></View>
</View>

overflow is amazing

I wrote pull request https://github.com/facebook/react-native/pull/29099 that fixes this issue

After a quick reserach I noticed that we have 25 issues in react-native for this bug https://github.com/facebook/react-native/issues/24224 https://github.com/facebook/react-native/issues/28695 https://github.com/facebook/react-native/issues/23651 https://github.com/facebook/react-native/issues/23475 https://github.com/facebook/react-native/issues/22256 https://github.com/facebook/react-native/issues/22226 https://github.com/facebook/react-native/issues/19234 https://github.com/facebook/react-native/issues/18285 https://github.com/facebook/react-native/issues/17344 https://github.com/facebook/react-native/issues/17343 https://github.com/facebook/react-native/issues/17251 https://github.com/facebook/react-native/issues/12817 https://github.com/facebook/react-native/issues/12403 https://github.com/facebook/react-native/issues/11042 https://github.com/facebook/react-native/issues/9343 https://github.com/facebook/react-native/issues/8236 https://github.com/facebook/react-native/issues/8105 https://github.com/facebook/react-native/issues/7838 https://github.com/facebook/react-native/issues/6721 https://github.com/facebook/react-native/issues/5411 https://github.com/facebook/react-native/issues/3159 https://github.com/facebook/react-native/issues/2335 https://github.com/facebook/react-native/issues/840 https://github.com/facebook/react-native/issues/27133 https://github.com/facebook/react-native/issues/28695

I decided to post this message and trigger linking between all this issues.

This works for me for vertical dashed line. Both Android and iOS. But gives double width. “react-native”: “0.59.10”,

style={{
    width: 0,
    height: 45,
    borderStyle: 'dashed',
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius : 1,
}}

Update: (31-Mar-2020)

I finally ended up using react-native-dash - https://github.com/obipawan/react-native-dash for consistent results in both iOS and android

Wow. this issue still exist. How about that. Any fix for this? Thanks!

Same issue. Are we resolving this anytime soon?

react-native: “0.61.3” still have this issue

still have the issue

hack: (inspired from @chinieer’s hack)

<View style={{overflow:'hidden'}}>
  <View style={{borderStyle: 'dashed', borderWidth: 1, borderColor: '#000', margin: -2, marginBottom:0}}>
    <Text>Some Data to be underlined</Text>
  </View>
</View>
  

I was able to reproduce the issue with the latest release (0.59.5)

Still having issue in RN 0.67.4

@kishanbharda The only solution to this problem so far is to define a borderRadius with a value of 1

class Side < Path
  def init(x, y, z, w)
    super()
    moveTo(x,y)
    side.lineTo(z,w)
  end
end

class Border
  def init(leftBorder, topBorder, rightBorder, bottomBorder)
     # intersect 4 Paths for borders
     # intersect also the other 4 Paths for corners 
  end  
end

class Corner < Path
  # def init()
  #    super()
  #    arcTo()  
  # end
end

leftBorder = new Side(10,10, 10, 50)
corner = new Corner()
border = new Border(leftBorder, topBorder, rightBorder, bottomBorder)
canvas.drawPath(border, mPaint)

This fixes the issue:

          if (borderLeft > 0) {
            int leftInset = left + borderLeft;
            mPaint.setStyle(Paint.Style.STROKE);
            DashPathEffect dash = new DashPathEffect(
              new float[] {9, 9}, 0);
            mPaint.setPathEffect(dash);
            mPaint.setStrokeWidth(10);
            Path side = new Path();
            side.moveTo(left, top);
            side.lineTo(leftInset, bottom - borderBottom);
            canvas.drawPath(side, mPaint);
            // canvas.drawRect(left, top, leftInset, bottom - borderBottom, mPaint);
          }

https://github.com/facebook/react-native/blob/7e300db7035c98537e0719c88a7c1a451e59e250/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java#L1102-L1105

I’ll write a pull request with a quick fix.

You are right

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container} />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 100,
    marginLeft: 100,
    height: 100,
    width: 200,
    backgroundColor: 'yellow',
    borderLeftWidth: 2,
    borderStyle: 'dotted',
    borderTopLeftRadius: 1,
    borderTopEndRadius: 1,
    borderTopRightRadius: 1,
    borderTopRightRadius: 1,
    borderBottomRightRadius: 1,
    borderBottomEndRadius: 1,
    borderBottomLeftRadius: 1,
  },
});

still have the issue

Heya, this is still an issue with latest 0.60.4.

@retyui thanks for the link. This bug is specifically talking about <View> borderStyle prop which should be supported according to the docs.

Tested on 0.59.2 as well and it’s still broken.

Still having issue in RN 0.64.3

@euthribeiro I tried but not working in iOS. Same code working for Snack.io but not working in iOS.