React Native TouchableOpacity

React Native TouchableOpacity

React Native TouchableOpacity - A covering for causing perspectives to answer appropriately to contacts. On push down, the obscurity of the wrapped view is diminished, darkening it.

Darkness is constrained by enveloping the youngsters by an Animated.View, which is added to the view progressive system. Know that this can influence format.

React Native TouchableOpacity

Example

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

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
  }
});

export default App;

Props

activeOpacity​

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

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.

hasTVPreferredFocus ​

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

nextFocusDown​

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

nextFocusForward ​

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

nextFocusLeft

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