React-native: `borderStyle` has no effect on Android, border is always solid

[patricksmith]

Setting borderStyle has no effect on Android. Regardless of the setting, the border will always be solid.

Environment

Environment:
  OS: macOS Sierra 10.12.6
  Node: 7.10.1
  Yarn: 1.2.1
  npm: 4.2.0
  Watchman: 4.5.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.54.0 => 0.54.0

Expected Behavior

When setting the borderStyle to "dashed" or "dotted", I expect the view to have a dashed or dotted border. This works correctly on iOS:

Actual Behavior

Regardless of setting, the border is solid on Android:

Steps to Reproduce

Create a View with styles specifying a borderWidth, borderColor, and borderStyle (borderRadius was also set, since there seem to be existing issues with the border when borderRadius is not specified).

This component will reproduce the issue:

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 200,
    marginHorizontal: 20,
    borderColor: '#000',
    borderRadius: 5,
    borderWidth: 5,
    borderStyle: 'dashed'
  },
});

An Expo Snack is also available that reproduces the issue: https://snack.expo.io/r1NCAukKf

[isaaclem]

Similar issue to https://github.com/facebook/react-native/issues/17251

[hramos]

Did this use to work on a prior version? This might have a higher priority if it's a regression.

[patricksmith]

@hramos I can't speak to if it recently stopped working -- I've only tried using this setting on v0.53.3 and v0.54.0 and it worked on neither version. There's a couple closed issues that suggest it was working previously working when specifying a borderRadius (which I did in this case); https://github.com/facebook/react-native/issues/17251#issuecomment-367461597, for example.

[allengleyzer]

@hramos I can confirm that this was working on v0.48.4. A borderRadius value was required, but once set, dashed and dotted borders worked as expected.

I can also confirm that the functionality broke as a result of this commit (and hence it stopped working in v0.51): https://github.com/facebook/react-native/commit/4994d6a389b4e41ba25e802edab5d3fdc9e8a4f1

(From the comments on the commit, it looks like it introduced other issues also.)

[alikamts]

I am facing the same issue. Do you resolved it?

[b1acKr0se]

I'm facing this issue as well.

[sahandevs]

I'm facing this issue on RN 0.55.2 too

[ArmedYang]

same problem on react-native: 0.55.0-rc.0

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

[idosofi]

facing this problem too...

[BrendanBerkley]

Seeing this issue on 0.55.3.

[hramos]

It's a known issue - no need to add more "me too" comments for now.

[BrendanBerkley]

@hramos Good to know! I normally don't do +1 types of posts but react-native-bot was asking if it worked on the latest version, and the Old Version tag is still in place, so I felt a clarification was necessary.

[hramos]

Can people verify if this is fixed in 0.56.0-rc.1?

[nhayfield]

@hramos It is not fixed. I am getting same issue in 0.56.0-rc.1

[hramos]

@nhayfield can you open a new issue? Ideally, use 0.57.0-rc as that is the release we are working on releasing at the moment.