TouchableHighlight has opacity default in React Native - react-native

Question

Without touching (and by default) Touchable highlight is giving me a semi-transparent button!
<LoginButton ref={btn => { this.btn = btn; }} onPress={this._executeLoginQuery} text='Sign in'></LoginButton>
rendered in LoginButton as
render () {
const { icon} = this.props;
return (
<TouchableHighlight style={styles.button} onPress={this.props.onPress}>
<View
style={{
flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Text style={styles.buttonText}>{this.getText()}</Text>
</View>
</TouchableHighlight>
)
}
}
with the style
button: {
height: 45,
borderRadius: 100,
marginHorizontal: Metrics.section,
marginVertical: Metrics.baseMargin,
backgroundColor: Colors.blueButton,
justifyContent: 'center',
overflow:'hidden',
opacity: 1.0,
},
Giving the result as:
And as you can see background "waves" are coming through - not just through the button but the parent white background too!
How can I stop this?

Answer 1

From react native docs:
The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
Can you tell me whats the value of Colors.blueButton. If there is opacity in any child under TouchableHighlight then please try removing it.
2nd Way
You can use TouchableOpacity and control its opacity by using activeOpacity prop.
<TouchableOpacity activeOpacity={0.8}>
//...login Button view
</TouchableOpacity>