react-nativetouchableopacity

Touchable Opacity onPressIn color change

I have the following code in my React-Native application.

     <TouchableOpacity
       // onPress={onPress}
       onPressIn={this.handlePressIn}
       onPressOut={this.handlePressOut}
       disabled={disabled}
       style={[
         styles.button,
         buttonStyle,
         this.buttonStyles(),
       ]}
       >
         <Text>Hello</Text>
       </TouchableOpacity>

I want to change the color of TouchableOpacity when it is being pressed. So, in onPressIn, I changed the color to darkRed, but it display a light red or something similar to that. No dark color can be set there. What is the issue here? How can I change the color till I onPressOut? The color should be a dark one.

Solution

  • Found the solution. Set your activeOpacity={1} in your TouchableOpacity.

    <TouchableOpacity
    onPress={onPress}
    activeOpacity={1}
/>