How to use TouchableOpacity in React Native? Code Example

<TouchableOpacity> is a wrapper component which enables the press event for child component. Unlike TouchableHighlight, it only decreases the opacity of view as a visual feedback, when pressed.

Some of the properties of TouchableOpacity are –

1. It decreases the opacity of view to show that it is pressed.

2. React Native recommends using Pressable api instead of this because that is more future proof.

3. It can only have single child. If you need to add more child then use the enclosing View. Like this –

<TouchableOpacity onPress={onPress}>

  <View>
    <Component1 />
    <Component2 />
  </View>

</TouchableOpacity>

4. Use activeOpacity prop to set the opacity of child component when pressed. If activeOpacity=0.6 then view will be 40% transparent. By default it is 0.2.

Code Example

import React, { useState } from "react";
import { StyleSheet, TouchableOpacity, Text, View } from "react-native";

const TouchableOpacityExample = () => {
  const [count, setCount] = useState(0);
  const [count1, setCount1] = useState(0);
  
  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Default TouchableOpacity - 0.2</Text>
        <Text style={styles.countText}>Count: {count}</Text>
      </View>
      <TouchableOpacity
       onPress={() => setCount(count + 1)}
      >
        <View style={styles.button}> 
          <Text style={{color: '#FFFFFF'}}>Touch Here</Text>
        </View>
      </TouchableOpacity>

      <View style={[styles.countContainer, {marginTop: 40}]}>
        <Text>activeOpacity=0.6</Text>
        <Text style={styles.countText}>Count: {count1}</Text>
      </View>
      <TouchableOpacity
       onPress={() => setCount1(count1 + 1)}
       activeOpacity={0.6}
      >
        <View style={styles.button}>
          <Text style={{color: '#FFFFFF'}}>Opacity - 0.6</Text>
        </View>
      </TouchableOpacity>
     
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#FF0000",
    padding: 10,
    
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  },
  countText: {
    color: "#FF00FF"
  }
});

export default TouchableOpacityExample;

Output –

In the above image you can see that we have both iOS and Android phones. On iOS we are clicking the first button and on Android we are clicking the second button. By default the TouchableOpacity is 0.2 so the first button is more faded than the second button in Android phone. Because on 2nd button, we are using opacity=0.6.

In our code we are setting activeOpacity={0.6} in line 28.

Live Demo

Conclusion

TouchableOpacity is just like TouchableHighlight with the difference that it doesn’t show underlay color. It only changes the opacity of view to give the impression of click.