Edit

TouchableOpacity

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.

Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.

Example

• Function Component Example
• Class Component Example

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

export default App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount + 1);

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

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

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  onPress = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    const { count } = this.state;
    return (
      <View style={styles.container}>
        <View style={styles.countContainer}>
          <Text>Count: {count}</Text>
        </View>
        <TouchableOpacity
          style={styles.button}
          onPress={this.onPress}
        >
          <Text>Press Here</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

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

---

Reference

Props

Inherits TouchableWithoutFeedback Props.

style

Type	Required
View.style	No

---

activeOpacity

Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2.

Type	Required
number	No

---

tvParallaxProperties

(Apple TV only) Object with properties to control Apple TV parallax effects.

• enabled: If true, parallax effects are enabled. Defaults to true.
• shiftDistanceX: Defaults to 2.0.
• shiftDistanceY: Defaults to 2.0.
• tiltAngle: Defaults to 0.05.
• magnification: Defaults to 1.0.
• pressMagnification: Defaults to 1.0.
• pressDuration: Defaults to 0.3.
• pressDelay: Defaults to 0.0.

Type	Required	Platform
object	No	iOS

---

hasTVPreferredFocus

(Apple TV only) TV preferred focus (see documentation for the View component).

Type	Required	Platform
bool	No	iOS

---

nextFocusDown

TV next focus down (see documentation for the View component).

Type	Required	Platform
bool	No	Android

---

nextFocusForward

TV next focus forward (see documentation for the View component).

Type	Required	Platform
bool	No	Android

---

nextFocusLeft

TV next focus left (see documentation for the View component).

Type	Required	Platform
bool	No	Android

---

nextFocusRight

TV next focus right (see documentation for the View component).

Type	Required	Platform
bool	No	Android

---

nextFocusUp

TV next focus up (see documentation for the View component).

Type	Required	Platform
bool	No	Android

Methods

setOpacityTo()

setOpacityTo((value: number), (duration: number));

Animate the touchable to a new opacity.