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}