CODEWITHSUNDEEP
react-native
stevenpcurtis
stevenpcurtis

Reputation: 2001

TouchableHighlight has opacity default in React Native

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:

enter image description here

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?

Upvotes: 1

Views: 2663

Answers (1)

Vivek Verma
Vivek Verma

Reputation: 551

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>

Upvotes: 5

Related Questions