React-native: Border is invisible when using borderStyle='dashed' with borderBottom

[sesm]

Border is invisible when using borderStyle='dashed' with borderBottom
Example: https://rnplay.org/apps/ESEkXQ
Environment: react-native 0.26, iOS

[kamek-pf]

I'm experiencing this too (RN 0.27.2 on Android here).
If borderStyle is set to anything other than solid (which is the default), then properties like borderBottomWidth, borderTopWidth etc. won't work, nothing is displayed.

Setting borderWidth does work though, you just don't get to specify a side.

[springwq]

I have the same issue, too.
Environment: react-native 0.26.2, iOS

[rmevans9]

Posted in #9343 originally but moving here since I closed the other as a duplicate of this ticket. This is currently expected behavior:

Based upon looking at the code this looks like a intentional limitation. There is code that specifically checks to see if both the color and width are the same on all sides if trying to use a dashed or dotted border. I would venture to guess that if you were to set borderWidth to 1 instead of just borderBottomWidth that the warning will go away and your border will show.

ref: https://github.com/facebook/react-native/blob/235b16d93287061a09c4624e612b5dc4f960ce47/React/Views/RCTBorderDrawing.m (line 382)

[rmevans9]

@facebook-github-bot expected

[ghost]

The comment above tells me this is expected behavior. Closing this as we'd like to use the GitHub issue tracker for bugs. If you'd like to change how this feature works please post a feature request on Product Pains so that other people can vote on it.

[sdeleon28]

I was able to achieve this effect by using this hack:

const inputStyles = StyleSheet.create({
  container: {
    height: 20,
    marginRight: 25,
    marginLeft: 25,
    paddingTop: 25,
    paddingBottom: 25,
    borderStyle: 'dotted',
    borderWidth: 2,
    borderColor: '#b7c2c6',
    position: 'relative',
    overflow: 'hidden',
  },
  topMask: {
    height: 3,
    width: 9999,
    backgroundColor: 'white',
    position: 'absolute',
    top: -3,
    left: 0,
  },
  rightMask: {
    height: 9999,
    width: 3,
    backgroundColor: 'white',
    position: 'absolute',
    top: 0,
    right: -3,
  },
  leftMask: {
    height: 9999,
    width: 3,
    backgroundColor: 'white',
    position: 'absolute',
    top: 0,
    left: -3,
  },
});

const UnderlinedInput = props => (
  <View style={inputStyles.container}>
    <View style={inputStyles.topMask} />
    <View style={inputStyles.rightMask} />
    <View style={inputStyles.leftMask} />
    <TextInput {...props} />
  </View>
);
UnderlinedInput.propTypes = TextInput.propTypes;