[TouchableHighlight + borderRadius] does not respect parent's overflow property/borderRadius?

Hey guys,

Ever since I upgraded to 0.4.4, my rounded buttons have a bug in them. I have the following code

 <View  style={styles.button}>
       <TouchableHighlight style={{alignSelf: 'stretch', flex: 1}}>
               <Text>My Button</Text>
       </TouchableHighlight>
</View>

var styles = Stylesheet.create({
  button: {
       height: this.props.height,
       flexDirection: 'row',
       backgroundColor: this.props.backgroundColor,
       borderRadius: this.props.borderRadius,
       alignSelf: 'stretch',
       overflow: 'hidden',
       borderWidth: 1,
       borderColor: this.props.borderColor || this.props.backgroundColor,
       flex: 1
  }
});

The button looks great on its own but whenever you touch it, and the highlight comes in, it shows with square corners going outside of the buttons boundaries (hard to take a screenshot of).

This was working fine in 0.4.2. I have also tried matching the borderRadius style property on the TouchableHighlight component and it seems to have no effect, again in 0.4.2 it did.

Any ideas?

[digitaltoad]

This still seems to be a bug. Setting underlayColor: 'transparent' isn’t really a fix because its removing part of the reason for using this type of view. The problem can be partially remedied by wrapping the TouchableHighlight in a View which has a borderRadius and overflow: 'hidden'.

<View style={{borderRadius: 5, overflow: 'hidden'}}>
    <TouchableHighlight onPress={() => console.warn('Pressed!')}>
        <View style={{height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3'}}>
            <Text>Click me!</Text>
        </View>
    </TouchableHighlight>
</View>

[davidruisinger]

@shahankit I solved this by adding underlayColor={ 'transparent' } to the TouchableHighlight. So my full example:

const styles = StyleSheet.create({
  touchableHightlight: {
    borderRadius: 20,
  },
  button: {
    textAlign: 'center',
    padding: 10,
    borderRadius: 20,
    fontSize: 14,
  },
  buttonLight: {
    borderWidth: 1,
    borderColor: '#FFFFFF',
    color: '#FFFFFF',
  },
})

...

<TouchableHighlight onPress={ () => { onPress } } style={ styles.touchableHightlight } underlayColor={ 'transparent' } >
  <Text style={[ styles.button, styles.buttonLight ]}>{ label }</Text>
</TouchableHighlight>

...