title: TouchableHighlight has opacity default in React Native
body: <p>Without touching (and by default) Touchable highlight is giving me a semi-transparent button!</p>
  
  <pre><code>      &lt;LoginButton ref={btn =&gt; { this.btn = btn; }} onPress={this._executeLoginQuery} text='Sign in'&gt;&lt;/LoginButton&gt;
  </code></pre>
  
  <p>rendered in LoginButton as</p>
  
  <pre><code>render () {
    const { icon} = this.props;
      return (
      &lt;TouchableHighlight style={styles.button} onPress={this.props.onPress}&gt;
      &lt;View
      style={{
        flexDirection: 'row',     justifyContent: 'center', alignItems: 'center'   }}&gt;
        &lt;Text style={styles.buttonText}&gt;{this.getText()}&lt;/Text&gt;
        &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
        )
    }
  }
  </code></pre>
  
  <p>with the style</p>
  
  <pre><code>  button: {
      height: 45,
      borderRadius: 100,
      marginHorizontal: Metrics.section,
      marginVertical: Metrics.baseMargin,
      backgroundColor: Colors.blueButton,
      justifyContent: 'center',
      overflow:'hidden',
      opacity: 1.0,
    },
  </code></pre>
  
  <p>Giving the result as:</p>
  
  <p><a href="https://i.stack.imgur.com/n8G7D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n8G7D.png" alt="enter image description here"></a></p>
  
  <p>And as you can see background "waves" are coming through - not just through the button but the parent white background too!</p>
  
  <p>How can I stop this?</p>