React-native: borderStyle: 'dashed' / 'dotted' does not work on android in version 0.51.0

[neilzhengzx]

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 8.4.0
Yarn: 0.27.5
npm: 5.4.0
Watchman: 4.7.0
Android Studio: 3.0

Packages: (wanted => installed)
react-native: 0.50.0 => 0.51.0
react: 16.0.0-alpha.12 => 16.0.0-alpha.12

Steps to Reproduce

borderStyle: 'dashed'

Expected Behavior

the border will be dashed

Actual Behavior

the border not be dashed

Reproducible Demo

borderStyle: 'dashed'

[Qiupengcheng]

same problem as this issue commit... T.T

[kerwin-ly]

Do you resolved it?

[legend27sg]

any update on this? I am facing the same issue

[jamsch]

Confirmed. Neither 'dotted' nor 'dashed' are working on Android on 0.52.0

<View
  style={{
    width: 300,
    alignSelf: "center",
    borderWidth: 5,
    borderColor: "red",
    borderStyle: "dashed"
  }}
>
  <Button
    onPress={() => {}}
    style={{ backgroundColor: lime[500] }}
    title="Lime"
  />
  <Button
    onPress={() => {}}
    style={{ backgroundColor: blue[500] }}
    title="Blue"
  />
  <Button
    onPress={() => {}}
    style={{ backgroundColor: deepPurple[500] }}
    title="Deep Purple"
  />
</View>

[neilzhengzx]

I test it on 0.52.0. but not work.

[reborne]

borderStyle actually works, if you specify borderRadius property.
try to specify:

const styles = StyleSheet.create({
   container: {
    borderWidth: 1,
    borderRadius: 5,
    borderStyle: 'dashed',
    borderColor: 'red'
   }
})

[neilzhengzx]

I test it on 0.53.0. but not work.

[reborne]

My bad, this is only working on TouchableOpacity and Button. Haven't tested on the rest components.

[Noitidart]

@reborne can you please show the code where you have dashed/dotted border working in Android with the TouchableOpacity/Button? I can't figure it out.

[reborne]

tested on CRNA

import React from 'react'
import * as Native from 'react-native'
import FontAwesome, {Icons} from 'react-native-fontawesome'

const EntryCard = () => {
    return (
        <Native.TouchableOpacity style={styles.container}>
            <Native.View style={styles.touchContent}>
                <Native.View style={styles.contentWrapper}>
                    <FontAwesome style={styles.plusIcon}>{Icons.plus}</FontAwesome>
                </Native.View>
                <Native.View style={styles.labelWrapper}>
                    <Native.Text style={styles.label}>Add Entry</Native.Text>
                </Native.View>
            </Native.View>
        </Native.TouchableOpacity>
    )
}

const styles = Native.StyleSheet.create({
    container: {
        flex: 1,
        borderWidth: 1,
        borderRadius: 8,
        borderStyle: 'dashed',
        borderColor: '#D1D2DE',
        backgroundColor: '#FFFFFF',
        alignContent: 'flex-start'
    },
    touchContent: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'row'
    },
    contentWrapper: {
        paddingLeft: 13,
        paddingRight: 13
    },
    plusIcon: {
        fontSize: 25,
        color: '#009CE0'
    },
    textWrapper: {
        marginTop: 36,
        marginBottom: 38
    },
    addEntryLabel: {
        fontSize: 25,
        color: '#333333'
    }
})

package.json

"react": "16.0.0",
"react-native": "0.50.3",
"react-native-fontawesome": "^5.7.0",

replacing dashed to dotted works like charm

[Noitidart]

@reborne I tried it here but its not working:

https://snack.expo.io/@noitsnack/dashed-dotted-border-in-android

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[khorark]

React-native v 0.53.3 - not work

[allengleyzer]

The reason it's working for reborne is because the feature broke on v0.51, but he is still on v0.50.3.

This functionality broke after the rendering/RTL changes were made to ReactViewBackgroundDrawable and ReactViewGroup.

Until the issue is fixed, if you don't need RTL/multi-colored borders support, and aren't using start/end values for your borders, you can create your own RN branch and rollback these 2 files to commit de313f6fddfa0e98c42053d451c4d2a749a7e4e1 to have border styles working once again. (You'll also need to change 1 line in ReactViewBackgroundManager, removing the context parameter when instantiating ReactViewBackgroundDrawable).

[reborne]

I still trying to figure it out, why on snack i get solid line, while on freshly created CRNA app i get it done working?
for more proofs, look at this: https://github.com/facebook/react-native/issues/12817
in the bottom, there is only one guy, who tested it.

Update: Can there be a case when snack cannot recreate a code which is working in real world project?

[brjairosanches]

I've tried with react-native @0.47.1 and it works!
react-native -v

react-native-cli: 2.0.1
react-native: 0.47.1

[slauzinho]

I'm still having this issue, cant get the borderStyle to work with "dashed" or "dotted"

[zoi-aoba]

+1

[MaxToyberman]

React-native v 0.55.3, still doesn't work

[tatobari]

Same problem here.

[hiepnm]

The same problem! on "react-native": "0.55.1"

[iksent]

I have the same problem and really need borderStyle.

This issue is closed and I think we should open a new one, so developers can see this problem...

[ahmedu007]

@allengleyzer @react-native-bot This issues still exists, I can confirm my version "react-native": "^0.54.2"

[Asleepace]

The issue still exists with "react-native":"0.55.4"

[badpenguin]

any temporary work around?

[Phongtlam]

Tried this on Android RN v 0.55+ not working. Any hack for this?

[ishaanbahal]

Okay, so this isn't some workaround, but I think I've stumbled on something. I started looking into the react native code for <View> , in ReactViewBackgroundDrawable.java , the method Paint.setPathEffect has been called with DashPathEffect(new float[] {borderWidth*3, borderWidth*3, borderWidth*3, borderWidth*3}, 0);, and on debugging I found that on rendering it indeed is set, and then drawQuadrilateral calls canvas.drawPath(mPathForBorder, mPaint); at the end, which indeed has the same mPaint object and the object has border style already set. Canvas.drawPath is now an android native API and sometimes that cannot render it too, take a look at this -> https://issuetracker.google.com/issues/36945767

According to some solutions around the internet, disabling HW acceleration works, I couldn't get how to do that only for View, since that is the one I am trying to put a border on, but I see a similar implementation that disables HWAcceleration with modal.js, I'm trying if this works, can't say for sure. Just an approach for those people who are stuck.

One such solution on SO -> https://stackoverflow.com/questions/17794360/dashed-lines-show-in-graphical-layout-but-not-on-devices

I think this probably isn't a RN issue, I can be definitely wrong, but Android seems to have this since a long time, and it was fixed for P users this march, or so the issue tracker says.

[Twishka]

Version 0.56.0. Same problem. Works on iOS but not on Android.

[zabojad]

I confirm it doesn't work on Android with:

    "react": "16.4.1",
    "react-native": "^0.56.0",

Can this issue be reopened?

[neilzhengzx]

I test with 0.56. it's done.

[keep2iron]

doesn't work on Android:

"react": "16.3.1",
"react-native": "^0.55.4",

[ragozin-n]

Same problems on

"react": "16.3.1",
"react-native": "^0.55.4"

[VSchlattinger]

@keep2iron @ragozin-n Have you tried on 0.56.0? For me it also didn't work on 0.55.4, but it works now on 0.56.0.

"react": "16.4.1",
"react-native": "0.56.0"

[hkxicor]

give some border radius

[liguanhan]

This is still not working "react-native": "^0.55.3".

[gautam123456]

I am on 0.55.4, is doesn't work for me on Android,

    ```

borderWidth: 1,
borderRadius: 2,
borderStyle: 'dotted' or 'dashed',
borderColor: '#000'
```

[neilzhengzx]

I am on 0.56.0,set borderRadius fix for me. but it can't solve the problem completely.

[unknown24]

Not Work for me

[kallayyash]

borderRadius: 5,

Ya your right i solved by adding borderRadius: 5,

[AylwSt01]

borderRadius: 5 does not work on react-native: 57.0.0

[hussainahmad]

same here, not working with Version: 0.57.0

[leokang28]

v0.57.2 still does not work

[johnny-minty]

v0.57.3 still has the same issue.

borderRadius: 0.5 is a temporary fix for now until a fix is issued.

[Kamys]

v0.57.4
{
flex: 1,
width: '100%',
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center',
borderRadius: 0.5,
}
not work ;(

[LzxHahaha]

0.57.4
borderStyle won't work when border had difference width

{
    borderStyle: 'dashed',
    borderWidth: 2,
    borderLeftWidth: 0,
    borderRadius: 1,
}

[Liqiankun]

Not work!

    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.3",

[kalraneeraj24550]

working fine for me

codeViewStyle: {

    height: 44,
    width: 160,
    marginBottom: 20,
    backgroundColor: '#eeeff3',
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
    borderColor: '#969696',
    borderStyle: 'dotted',
    borderWidth: 1.4,
    borderRadius: 1,
    position: 'relative',

}

[orzhtml]

"react": "16.6.1",
"react-native": "0.57.5"

borderStyle: "dashed"
not work

[rezapiryghadim]

you just need to add borderRadius : 1 to fix this issue.

[butavpaul]

you just need to add borderRadius : 1 to fix this issue.

I can confirm. With borderRadius:1 works for me also. Tnx

[TheBlackHacker]

Don't know why but add borderRadius : 1 fix this issue.

[AnupatRuangsuwan]

you just need to add borderRadius : 1 to fix this issue.

it's work for me. Thx

[darshancreed]

border radious 1 dosent fixed my issue

[kalinchuk]

Still having this issue. Any updates?

[Shivendra30]

Still having this issue. Did anyone solve it yet?

[meetravi]

Still having the issue

[esthor]

does not work on iOS either

[subhendukundu]

Tring to add a dashed boder in one side,

{
  height: '100%',
  width: 20,
  position: 'absolute',
  borderRadius : 1,
  borderStyle: 'dashed',
  borderRightWidth: 1,
  borderRightColor: 'rgba(161,155,183,1)'
}

This doesn't work, but when I change this to

{
  height: '100%',
  width: 20,
  position: 'absolute',
  borderRadius : 1,
  borderStyle: 'dashed',
  borderWidth: 1,
  borderColor: 'rgba(161,155,183,1)'
}

Works but border in 4 side.
How do I add bashed border just in one side?
Also is there a way to add more spacing to the dash?
"react-native": "0.57.7"

[abdulrahman18]

borderRadius: 5,
borderStyle: 'dashed'

Yes Its Working. Thanks

[linux08]

Issue persist in react-native 0.55.4

    borderRadius: 5,
    borderStyle: 'dashed',
    borderWidth: 1

Doesn't work

[i1990jain]

using > "react-native": "0.57.7",

borderStyle: 'dashed', borderColor:"#ffffff", borderWidth: 1, borderRadius: 1,

works fine on android but not on iOS