CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativetouchableopacity
S. Nas
S. Nas

Reputation: 331

How to briefly change the background color on touch in react native?

In mobile apps, it is critical to show some sort of indication that the user has touched a specific element, especially when trying to touch an element that will redirect. Hence, I was hoping to change the background colour of touchableOpacity element on touch, and then return back to the original background colour.

For example, if the user touches this element:

enter image description here

The background colour is changed on touch.

How do I do this in touchableOpacity?

<TouchableOpacity 
  style={[styles.verticalCenter, styles.floatRight]} 
  activeOpacity={1.0} 
  underlayColor="rgba(253,138,94,0)" 
  onPress={()=> this.openModal()} 
>
  <Ionicons name="log-out" size={16} color="#bccad0" />
</TouchableOpacity>

floatRight: {
  flex: 1,
  alignItems: 'center',
  borderWidth: 1,
  borderColor: 'rgba(0,0,0,0.2)',
  justifyContent: 'center',
  width: 30,
  height: 30,
  backgroundColor: '#fff',
  borderRadius: 100 / 2,
},

The above just doesn't work.

Any help would be appreciated.

Upvotes: 3

Views: 4751

Answers (2)

Nguyễn Viết Th&#225;i
Nguyễn Viết Th&#225;i

Reputation: 219

Use TouchableHighlight instead of TouchableOpacity

<TouchableHighlight
    activeOpacity={0.6}
    underlayColor="#DDDDDD"
    onPress={() => alert('Pressed!')}>
    <MyComponent />
</TouchableHighlight>;

Upvotes: 3

berderka
berderka

Reputation: 31

If you set activeOpacity={0.2} it will make the background lighter. As you are setting opacity to 1 it doesn't change on click.

Upvotes: 2

Related Questions