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.

BorderColor and borderWidth are missing when using borderRadius

See original GitHub issue

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: Windows 10 Node: 8.6.0 Yarn: Not Found npm: 5.3.0 Watchman: Not Found Xcode: N/A Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed) react: 16.0.0 => 16.0.0 react-native: 0.50.3 => 0.50.3

Steps to Reproduce

Minimal example:

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.withBottomBorder]}>
          <Text>Only bottom border with color</Text>
        </View>

        <View style={[styles.view, styles.withBorderRadius]}>
          <Text>Only bottom border with radius</Text>
        </View>

        <View style={[styles.view, styles.withBorderRadius, styles.withBottomBorder]}>
          <Text>Bottom border with radius and color, but only backgroundColor applies, green bottom border is missing</Text>
        </View>
        <View style={[styles.view, styles.withBottomBorder, styles.withBorderRadius]} >
          <Text>Bottom border with color and radius, but only backgroundColor applies, green bottom border is missing</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  view: {
    width: 200,
    height: 100,
    backgroundColor: '#ffa',
    margin: 10,
    padding: 10
  },
  withBorderRadius: {
    borderTopRightRadius: 5,
    borderTopLeftRadius: 5
    /* the same is ofr the borderBottomRight/Left */
  },
  withBottomBorder: {
    borderBottomColor: '#0f0',
    borderBottomWidth: 1,
    backgroundColor: '#faa'
  }
});