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:
-renderButton: function() {
- return (
- <TouchableOpacity onPress={this._onPressButton}>
- <Image
- style={styles.button}
- source={require('./myButton.png')}
- />
- </TouchableOpacity>
- );
-},
-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
- @@ -94,45 +82,48 @@
import React, { useState } from 'react';
-import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
+import React, { useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-export default function App() {
+export default App = () => {
const [count, setCount] = useState(0);
- const handleIncrementCount = () => setCount(prevState => prevState + 1);
+ 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={handleIncrementCount}>
- <Text>Touch Here</Text>
+ <TouchableOpacity
+ style={styles.button}
+ onPress={onPress}
+ >
+ <Text>Press 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,
- TouchableOpacity,
- Text,
- View,
-} from 'react-native'
+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 }
+ super(props);
+ this.state = { count: 0 };
}
onPress = () => {
this.setState({
- count: this.state.count+1
- })
- }
+ count: this.state.count + 1
+ });
+ };
- 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>
+ 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',
+ 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 iOS bool No Android
Methods
@@ -326,7 +317,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:
-renderButton: function() {
- return (
- <TouchableOpacity onPress={this._onPressButton}>
- <Image
- style={styles.button}
- source={require('./myButton.png')}
- />
- </TouchableOpacity>
- );
-},
-
-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
-
@@ -94,45 +82,48 @@
-import React, { useState } from 'react';
-import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
+import React, { useState } from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-export default function App() {
+export default App = () => {
const [count, setCount] = useState(0);
- const handleIncrementCount = () => setCount(prevState => prevState + 1);
+ 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={handleIncrementCount}>
- <Text>Touch Here</Text>
+ <TouchableOpacity
+ style={styles.button}
+ onPress={onPress}
+ >
+ <Text>Press 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,
- TouchableOpacity,
- Text,
- View,
-} from 'react-native'
+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 }
+ super(props);
+ this.state = { count: 0 };
}
onPress = () => {
this.setState({
- count: this.state.count+1
- })
- }
+ count: this.state.count + 1
+ });
+ };
- 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>
+ 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',
+ 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.