Skip to content

borderStyle has no effect on Android, border is always solid #18285

Closed
@patricksmith

Description

@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:

image

Actual Behavior

Regardless of setting, the border is solid on Android:

image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Impact: RegressionDescribes a behavior that used to work on a prior release, but stopped working recently.Issue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.Platform: AndroidAndroid applications.Ran CommandsOne of our bots successfully processed a command.Resolution: FixedA PR that fixes this issue has been merged.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions