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
+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:
+renderButton: function() {
+ return (
+ <TouchableOpacity onPress={this._onPressButton}>
+ <Image
+ style={styles.button}
+ source={require('./myButton.png')}
+ />
+ </TouchableOpacity>
+ );
+},
+Example
- @@ -82,48 +94,45 @@
import React, { useState } from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
-export default App = () => {
+export default function App() {
const [count, setCount] = useState(0);
- const onPress = () => setCount(prevCount => prevCount + 1);
+ const handleIncrementCount = () => setCount(prevState => prevState + 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 style={styles.button} onPress={handleIncrementCount}>
+ <Text>Touch Here</Text>
</TouchableOpacity>
</View>
);
-};
+}
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: "center",
- paddingHorizontal: 10
+ justifyContent: 'center',
+ paddingHorizontal: 10,
},
button: {
- alignItems: "center",
- backgroundColor: "#DDDDDD",
- padding: 10
+ alignItems: 'center',
+ backgroundColor: '#DDDDDD',
+ padding: 10,
},
countContainer: {
- alignItems: "center",
- padding: 10
- }
+ alignItems: 'center',
+ padding: 10,
+ },
});
-import React, { Component } from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import React, { Component } from 'react'
+import {
+ StyleSheet,
+ TouchableOpacity,
+ Text,
+ View,
+} from 'react-native'
export default class App extends Component {
constructor(props) {
- super(props);
- this.state = { count: 0 };
+ super(props)
+ this.state = { count: 0 }
}
onPress = () => {
this.setState({
- count: this.state.count + 1
- });
- };
+ count: this.state.count+1
+ })
+ }
- render() {
- const { count } = this.state;
- return (
- <View style={styles.container}>
- <View style={styles.countContainer}>
- <Text>Count: {count}</Text>
+ render() {
+ return (
+ <View style={styles.container}>
+ <TouchableOpacity
+ style={styles.button}
+ onPress={this.onPress}
+ >
+ <Text> Touch Here </Text>
+ </TouchableOpacity>
+ <View style={[styles.countContainer]}>
+ <Text style={[styles.countText]}>
+ { this.state.count !== 0 ? this.state.count: null}
+ </Text>
</View>
- <TouchableOpacity
- style={styles.button}
- onPress={this.onPress}
- >
- <Text>Press Here</Text>
- </TouchableOpacity>
</View>
- );
+ )
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: "center",
+ justifyContent: 'center',
paddingHorizontal: 10
},
button: {
- alignItems: "center",
- backgroundColor: "#DDDDDD",
+ alignItems: 'center',
+ backgroundColor: '#DDDDDD',
padding: 10
},
countContainer: {
- alignItems: "center",
+ alignItems: 'center',
padding: 10
+ },
+ countText: {
+ color: '#FF00FF'
}
-});
+})
activeOpacity
-Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2.
+Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2.
Type Required
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.
+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 Type Required Platform bool No Android bool No iOS
Methods
@@ -317,7 +326,7 @@
setOpacityTo((value: number), (duration: number));
Animate the touchable to a new opacity.
-EditTouchableOpacity
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
+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:
+renderButton: function() {
+ return (
+ <TouchableOpacity onPress={this._onPressButton}>
+ <Image
+ style={styles.button}
+ source={require('./myButton.png')}
+ />
+ </TouchableOpacity>
+ );
+},
+
+Example
-
@@ -82,48 +94,45 @@
-import React, { useState } from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
-export default App = () => {
+export default function App() {
const [count, setCount] = useState(0);
- const onPress = () => setCount(prevCount => prevCount + 1);
+ const handleIncrementCount = () => setCount(prevState => prevState + 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 style={styles.button} onPress={handleIncrementCount}>
+ <Text>Touch Here</Text>
</TouchableOpacity>
</View>
);
-};
+}
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: "center",
- paddingHorizontal: 10
+ justifyContent: 'center',
+ paddingHorizontal: 10,
},
button: {
- alignItems: "center",
- backgroundColor: "#DDDDDD",
- padding: 10
+ alignItems: 'center',
+ backgroundColor: '#DDDDDD',
+ padding: 10,
},
countContainer: {
- alignItems: "center",
- padding: 10
- }
+ alignItems: 'center',
+ padding: 10,
+ },
});
-import React, { Component } from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import React, { Component } from 'react'
+import {
+ StyleSheet,
+ TouchableOpacity,
+ Text,
+ View,
+} from 'react-native'
export default class App extends Component {
constructor(props) {
- super(props);
- this.state = { count: 0 };
+ super(props)
+ this.state = { count: 0 }
}
onPress = () => {
this.setState({
- count: this.state.count + 1
- });
- };
+ count: this.state.count+1
+ })
+ }
- render() {
- const { count } = this.state;
- return (
- <View style={styles.container}>
- <View style={styles.countContainer}>
- <Text>Count: {count}</Text>
+ render() {
+ return (
+ <View style={styles.container}>
+ <TouchableOpacity
+ style={styles.button}
+ onPress={this.onPress}
+ >
+ <Text> Touch Here </Text>
+ </TouchableOpacity>
+ <View style={[styles.countContainer]}>
+ <Text style={[styles.countText]}>
+ { this.state.count !== 0 ? this.state.count: null}
+ </Text>
</View>
- <TouchableOpacity
- style={styles.button}
- onPress={this.onPress}
- >
- <Text>Press Here</Text>
- </TouchableOpacity>
</View>
- );
+ )
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: "center",
+ justifyContent: 'center',
paddingHorizontal: 10
},
button: {
- alignItems: "center",
- backgroundColor: "#DDDDDD",
+ alignItems: 'center',
+ backgroundColor: '#DDDDDD',
padding: 10
},
countContainer: {
- alignItems: "center",
+ alignItems: 'center',
padding: 10
+ },
+ countText: {
+ color: '#FF00FF'
}
-});
+})
activeOpacity
-Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2.
+Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2.