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.
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.
-EditVibration
The Vibration API is exposed at Vibration.vibrate(). The vibration is synchronous so this method will return immediately.
-There will be no effect on devices that do not support Vibration, eg. the simulator.
-Note for Android: add <uses-permission android:name="android.permission.VIBRATE"/> to AndroidManifest.xml
-The vibration duration in iOS is not configurable, so there are some differences with Android. In Android, if pattern is a number, it specifies the vibration duration in ms. If pattern is an array, those odd indices are the vibration duration, while the even ones are the separation time.
-In iOS, invoking vibrate(duration) will ignore the duration and vibrate for a fixed time. While the pattern array is used to define the duration between each vibration. See below example for more.
-Repeatable vibration is also supported, the vibration will repeat with defined pattern until cancel() is called.
-Example:
-const DURATION = 10000;
-const PATTERN = [1000, 2000, 3000];
+
EditVibration
Vibrates the device.
+Example
+import React from "react";
+import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native";
-Vibration.vibrate(DURATION);
-// Android: vibrate for 10s
-// iOS: duration is not configurable, vibrate for fixed time (about 500ms)
+function Separator() {
+ return <View style={Platform.OS === "android" ? styles.separator : null} />;
+}
-Vibration.vibrate(PATTERN);
-// Android: wait 1s -> vibrate 2s -> wait 3s
-// iOS: wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate
+export default class App extends React.Component {
+ render() {
+ const ONE_SECOND_IN_MS = 1000;
-Vibration.vibrate(PATTERN, true);
-// Android: wait 1s -> vibrate 2s -> wait 3s -> wait 1s -> vibrate 2s -> wait 3s -> ...
-// iOS: wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate -> wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate -> ...
+ const PATTERN = [
+ 1 * ONE_SECOND_IN_MS,
+ 2 * ONE_SECOND_IN_MS,
+ 3 * ONE_SECOND_IN_MS
+ ];
-Vibration.cancel();
-// Android: vibration stopped
-// iOS: vibration stopped
-
+ const PATTERN_DESC =
+ Platform.OS === "android"
+ ? "wait 1s, vibrate 2s, wait 3s"
+ : "wait 1s, vibrate, wait 2s, vibrate, wait 3s";
+
+ return (
+ <SafeAreaView style={styles.container}>
+ <Text style={[styles.header, styles.paragraph]}>Vibration API</Text>
+ <View>
+ <Button title="Vibrate once" onPress={() => Vibration.vibrate()} />
+ </View>
+ <Separator />
+ {Platform.OS == "android"
+ ? [
+ <View>
+ <Button
+ title="Vibrate for 10 seconds"
+ onPress={() => Vibration.vibrate(10 * ONE_SECOND_IN_MS)}
+ />
+ </View>,
+ <Separator />
+ ]
+ : null}
+ <Text style={styles.paragraph}>Pattern: {PATTERN_DESC}</Text>
+ <Button
+ title="Vibrate with pattern"
+ onPress={() => Vibration.vibrate(PATTERN)}
+ />
+ <Separator />
+ <Button
+ title="Vibrate with pattern until cancelled"
+ onPress={() => Vibration.vibrate(PATTERN, true)}
+ />
+ <Separator />
+ <Button
+ title="Stop vibration pattern"
+ onPress={() => Vibration.cancel()}
+ color="#FF0000"
+ />
+ </SafeAreaView>
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: "center",
+ paddingTop: 44,
+ padding: 8
+ },
+ header: {
+ fontSize: 18,
+ fontWeight: "bold",
+ textAlign: "center"
+ },
+ paragraph: {
+ margin: 24,
+ textAlign: "center"
+ },
+ separator: {
+ marginVertical: 8,
+ borderBottomColor: "#737373",
+ borderBottomWidth: StyleSheet.hairlineWidth
+ }
+});
+
+Android apps should request the android.permission.VIBRATE permission by adding <uses-permission android:name="android.permission.VIBRATE"/> to AndroidManifest.xml.
+
+
+The Vibration API is implemented as a AudioServicesPlaySystemSound(kSystemSoundID_Vibrate) call on iOS.
+
Reference
Methods
vibrate()
-Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
+Vibration.vibrate(?pattern: number | Array<number>, ?repeat: boolean)
-Trigger a vibration with specified pattern.
+Triggers a vibration with a fixed duration.
+On Android, the vibration duration defaults to 400 milliseconds, and an arbitrary vibration duration can be specified by passing a number as the value for the pattern argument. On iOS, the vibration duration is fixed at roughly 400 milliseconds.
+The vibrate() method can take a pattern argument with an array of numbers that represent time in milliseconds. You may set repeat to true to run through the vibration pattern in a loop until cancel() is called.
+On Android, the odd indices of the pattern array represent the vibration duration, while the even ones represent the separation time. On iOS, the numbers in the pattern array represent the separation time, as the vibration duration is fixed.
Parameters:
-Name Type Required Description Name Type Required Description Platform pattern number or Array Yes Vibration pattern, accept a number or an array of numbers. Default to 400ms. repeat boolean No Repeat vibration pattern until cancel(), default to false. pattern number No Vibration duration in milliseconds. Defaults to 400 ms. Android pattern Array of numbers No Vibration pattern as an array of numbers in milliseconds. Android, iOS repeat boolean No Repeat vibration pattern until cancel(), default to false. Android, iOS
cancel()
Vibration.cancel();
-Stop vibration.
-Vibration.cancel()
-
-
EditVibration
The Vibration API is exposed at Vibration.vibrate(). The vibration is synchronous so this method will return immediately.
-There will be no effect on devices that do not support Vibration, eg. the simulator.
-Note for Android: add <uses-permission android:name="android.permission.VIBRATE"/> to AndroidManifest.xml
-The vibration duration in iOS is not configurable, so there are some differences with Android. In Android, if pattern is a number, it specifies the vibration duration in ms. If pattern is an array, those odd indices are the vibration duration, while the even ones are the separation time.
-In iOS, invoking vibrate(duration) will ignore the duration and vibrate for a fixed time. While the pattern array is used to define the duration between each vibration. See below example for more.
-Repeatable vibration is also supported, the vibration will repeat with defined pattern until cancel() is called.
-Example:
-const DURATION = 10000;
-const PATTERN = [1000, 2000, 3000];
+
EditVibration
Vibrates the device.
+Example
+import React from "react";
+import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native";
-Vibration.vibrate(DURATION);
-// Android: vibrate for 10s
-// iOS: duration is not configurable, vibrate for fixed time (about 500ms)
+function Separator() {
+ return <View style={Platform.OS === "android" ? styles.separator : null} />;
+}
-Vibration.vibrate(PATTERN);
-// Android: wait 1s -> vibrate 2s -> wait 3s
-// iOS: wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate
+export default class App extends React.Component {
+ render() {
+ const ONE_SECOND_IN_MS = 1000;
-Vibration.vibrate(PATTERN, true);
-// Android: wait 1s -> vibrate 2s -> wait 3s -> wait 1s -> vibrate 2s -> wait 3s -> ...
-// iOS: wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate -> wait 1s -> vibrate -> wait 2s -> vibrate -> wait 3s -> vibrate -> ...
+ const PATTERN = [
+ 1 * ONE_SECOND_IN_MS,
+ 2 * ONE_SECOND_IN_MS,
+ 3 * ONE_SECOND_IN_MS
+ ];
-Vibration.cancel();
-// Android: vibration stopped
-// iOS: vibration stopped
-
+ const PATTERN_DESC =
+ Platform.OS === "android"
+ ? "wait 1s, vibrate 2s, wait 3s"
+ : "wait 1s, vibrate, wait 2s, vibrate, wait 3s";
+
+ return (
+ <SafeAreaView style={styles.container}>
+ <Text style={[styles.header, styles.paragraph]}>Vibration API</Text>
+ <View>
+ <Button title="Vibrate once" onPress={() => Vibration.vibrate()} />
+ </View>
+ <Separator />
+ {Platform.OS == "android"
+ ? [
+ <View>
+ <Button
+ title="Vibrate for 10 seconds"
+ onPress={() => Vibration.vibrate(10 * ONE_SECOND_IN_MS)}
+ />
+ </View>,
+ <Separator />
+ ]
+ : null}
+ <Text style={styles.paragraph}>Pattern: {PATTERN_DESC}</Text>
+ <Button
+ title="Vibrate with pattern"
+ onPress={() => Vibration.vibrate(PATTERN)}
+ />
+ <Separator />
+ <Button
+ title="Vibrate with pattern until cancelled"
+ onPress={() => Vibration.vibrate(PATTERN, true)}
+ />
+ <Separator />
+ <Button
+ title="Stop vibration pattern"
+ onPress={() => Vibration.cancel()}
+ color="#FF0000"
+ />
+ </SafeAreaView>
+ );
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: "center",
+ paddingTop: 44,
+ padding: 8
+ },
+ header: {
+ fontSize: 18,
+ fontWeight: "bold",
+ textAlign: "center"
+ },
+ paragraph: {
+ margin: 24,
+ textAlign: "center"
+ },
+ separator: {
+ marginVertical: 8,
+ borderBottomColor: "#737373",
+ borderBottomWidth: StyleSheet.hairlineWidth
+ }
+});
+
+Android apps should request the android.permission.VIBRATE permission by adding <uses-permission android:name="android.permission.VIBRATE"/> to AndroidManifest.xml.
+
+
+The Vibration API is implemented as a AudioServicesPlaySystemSound(kSystemSoundID_Vibrate) call on iOS.
+
Reference
Methods
vibrate()
-Vibration.vibrate(pattern: number, Array<number>, repeat: boolean)
+Vibration.vibrate(?pattern: number | Array<number>, ?repeat: boolean)
-Trigger a vibration with specified pattern.
+Triggers a vibration with a fixed duration.
+On Android, the vibration duration defaults to 400 milliseconds, and an arbitrary vibration duration can be specified by passing a number as the value for the pattern argument. On iOS, the vibration duration is fixed at roughly 400 milliseconds.
+The vibrate() method can take a pattern argument with an array of numbers that represent time in milliseconds. You may set repeat to true to run through the vibration pattern in a loop until cancel() is called.
+On Android, the odd indices of the pattern array represent the vibration duration, while the even ones represent the separation time. On iOS, the numbers in the pattern array represent the separation time, as the vibration duration is fixed.
Parameters:
-Name Type Required Description Name Type Required Description Platform pattern number or Array Yes Vibration pattern, accept a number or an array of numbers. Default to 400ms. repeat boolean No Repeat vibration pattern until cancel(), default to false. pattern number No Vibration duration in milliseconds. Defaults to 400 ms. Android pattern Array of numbers No Vibration pattern as an array of numbers in milliseconds. Android, iOS repeat boolean No Repeat vibration pattern until cancel(), default to false. Android, iOS
cancel()
Vibration.cancel();
-Stop vibration.
-Vibration.cancel()
-
-