MENU


<TouchableOpacity>

On press down, the opacity of the wrapped view is decreased, lightening its color.

Props(inherits TouchableWithoutFeedback Props)styleactiveOpacity Platform-specific PropstvParallaxProperties AndroidnextFocusDown AndroidnextFocusForward AndroidnextFocusLeft AndroidnextFocusRight AndroidnextFocusUp AndroidhasTVPreferredFocus iOS

<TouchableOpacity> increases the lightness of a button when touched while <TouchableHighlight> increases the darkness of a button when touched.


RESETRUNFULL
import React, { useState } from "react";import { StyleSheet, Text, TouchableOpacity, View } from "react-native";const 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}});export default App;