Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Setting borderStyle on <View> to dashed or dotted for a single side does not render correctly on both iOS and Android

See original GitHub issue

🐛 Bug Report

Setting the CSS property borderStyle to dashed or dotted for a single side on a View component does not work on both iOS and Android.

The docs show available values: https://facebook.github.io/react-native/docs/view-style-props#borderstyle

Android renders solid line for both dashed/dotted

Screen Shot 2019-04-01 at 12 20 02 PM

iOS does not render anything for dashed/dotted

Screen Shot 2019-04-01 at 12 18 50 PM

To Reproduce

Set a borderStyle css property on a View for a single side like this:

borderLeftWidth: 3,
borderLeftColor: 'red',
borderStyle: 'dashed',

Expected Behavior

A dashed border is rendered correctly on iOS and Android

Code Example

Snack: https://snack.expo.io/@mido/react-native-borderstyle-dashed-and-dotted-broken

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
      Memory: 977.25 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
      Yarn: 1.6.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 21, 22, 23, 24, 25, 26, 27
        Build Tools: 26.0.3, 27.0.3, 28.0.2, 28.0.3
        System Images: android-24 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.2/10E125 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.2 => 0.59.2
    npmGlobalPackages:
      react-native-log-ios: 1.0.1

Issue Analytics

State:
Created 4 years ago
Reactions:51
Comments:59 (6 by maintainers)

Top GitHub Comments

70reactions

chinieercommented, Mar 12, 2021

temporary fix by this hacker

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

32reactions

Rramandeepcommented, Oct 16, 2020

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

Top Results From Across the Web

When trying to add a dashed border style, getting ...

The trick is to use overflow: hidden for the parent, then set borderWidth: 1 while additionally setting a negative margin margin: -2 ....

border-right - CSS: Cascading Style Sheets - MDN Web Docs

It sets those that are not specified to their default values. ... border-right: 2px dotted; border-right: medium dashed green; ...

Adjust corner radius and smoothing – Figma Help Center

Note: Rounded corners may not be available for rectangles you create with the ... how to access the corner smoothing setting via the...

Learn To Create Border Style in React Native - eduCBA

Because the bounding box of the Text component is a rectangle, the background overlaps the nice rounded corners. Obviously, using the margin property...

Dashed lines in Reporting | Telerik Forums

You may test setting the BorderStle property of the header to Dashed. After that, you can also set the BorderWidth property to a...