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.

Warn when borderRadius is used without borderWidth

See original GitHub issue

When a <View /> component specifies borderRadius, it will only show up if borderWidth is specified as well.

Example code (borderRadius not showing up):

var MyComponent = React.createClass({
  render() {
    return <View style={styles.example} />;
  }
});

var styles = StyleSheet.create({
  example: {
    borderRadius: 4,
    width: 100,
    height: 100
  }
});

Example code (borderRadius showing up):

var MyComponent = React.createClass({
  render() {
    return <View style={styles.example} />;
  }
});

var styles = StyleSheet.create({
  example: {
    borderRadius: 4,
    borderWidth: 1,
    borderColor: 'black',
    width: 100,
    height: 100
  }
});

It would be amazing to show a warning when borderRadius is used without borderWidth. There is an exception though: For <Image /> components the borderWidth does not need to be specified for the border radius to show up.

Issue Analytics

State:
Created 8 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

chirag04commented, May 19, 2015

@brentvatne Seems like it works fine when i use TouchableHighlight instead of TouchableOpacity

0reactions

onlymejoshcommented, May 27, 2015

Having the same issues on 4.4.4

<View style={styles.feature}>
          <View style={styles.featureHeader}>
            <Text style={styles.featureTitle}>{'Accounts'}</Text>
          </View>
          <View style={styles.ticket}>
            <View style={styles.leftContainer}>
              <Image
                source={{uri: 'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}}
                style={styles.avatar}
              />
              <View style={styles.ticketSizeContainer}>
                <Text style={styles.ticketSize}>{'S'}</Text>
              </View>
            </View>
            <View style={styles.mainContent}>
              <Text style={styles.ticketTitle}>
                {'When 403 from find we should direct to accounts page'}
              </Text>
            </View>
            <View style={styles.rightContainer}>
              <Text style={styles.ticketNumber}>
                {'#123'}
              </Text>
            </View>
          </View>
  </View>

feature: {
    marginLeft:10,
    marginRight:10,
  },
  featureHeader: {
    // Border radius is not being set
    backgroundColor:'#4A4C59',
    borderRadius:6,
  },
  featureTitle: {
    color:'#fff',
    fontFamily:'Proxima Nova',
    fontSize: 14,
    fontWeight: 'bold',
    padding:10,
  },
  ticket: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: '#FFF',
    padding:5,
    paddingBottom:0,
    marginBottom:1,
  }
....