In React Native, we use Touchable components to make a component clickable or to perform a task while clicking on any component. In react native, there are three types of Touchable components available.
-
TouchableOpacity
-
TouchableHighlight
-
TouchableWithoutFeedback
TouchableOpacity
In React Native, TouchableOpacity is used to making any component clickable or touchable. By using this component, we can make any component perform any action or task on click using the onPress method. Let's take an example to understand it.
import React, { Component } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
class App extends Component {
constructor(props) {
super(props);
this.state = { click: 0 };
}
onClick = () => {
this.setState({
click: this.state.click + 1
});
};
render() {
const { click } = this.state;
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Text style={{fontSize: 30}}>Button is Pressed: {click} times</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={this.onClick}
>
<Text style={{fontSize: 30}}>Click On Me</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10
},
button: {
alignItems: "center",
backgroundColor: "blue",
padding: 10
},
buttonContainer: {
alignItems: "center",
padding: 10
}
});
export default App;
Output:
Here in the above code, we define a View component and inside it, we define two Text components. After that, we apply the TouchableOpacity on the second Text component. Whenever we Press on the second text, it will run the onClick method using the onPress event. then onClick method increases the value of the click variable using the state props. And then we display the value of the click variable using the Text component.
TouchableHighlight
TouchableHighligh component is a wrapper for making views respond properly to touches. In TouchableHighlight, when we press down, the opacity of the wrapped view is decreased, which shows the touched area of the screen.
Sometimes it may affect our app's layout, and sometimes cause unwanted artifacts if we don't use it in a proper manner. TouchableHighlight must have one child component on that the TouchableHighlight wrapped.
We can also set the TouchableHighlight to more than one child item. all we need to do is wrap them up in a View.
import React, { Component } from "react";
import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
export default class App extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
onPress = () => {
this.setState({
count: this.state.count + 1
});
};
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this.onPress}>
<View style={styles.button}>
<Text style={[styles.countText]}>Clicked Me</Text>
</View>
</TouchableHighlight>
<View style={[styles.countContainer]}>
<Text style={[styles.countText]}>
{this.state.count ? this.state.count : null}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10,
backgroundColor: '#03203C'
},
button: {
alignItems: "center",
backgroundColor: "red",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
},
countText: {
color: "white",
fontSize: 30
}
});
Output
Here in the above code, we define a View component in which we define a Text component Clicked Me, and on the View component, we define the TouchableHighligh that can invoke the onPress function whenever anyone clicks or touch the Child View component that's inside the TouchableHighligh component.
Also in the onPress component, we are increasing the value of the count variable using the setState method. Here, the count variable is defined using the state component, and initially, we set it to 0 and after that, we are printing the value of the count variable in another View component inside the Text component.
So, whenever anyone clicks on the button then the value of the count variable is increased by one and will print on the screen.
TouchableWithoutFeedback
TouchableWithoutFeedback works by cloning its child and applying props to it. All the intermediary components pass through the props underlying React Native Component. Remember that only one child can be supported by TouchableWithoutFeedback. So, if we have more than one child component then we need to wrap them in a View component, and then on the View, we can use the TouchableWithoutFeedback.
import React, { Component } from "react";
import { StyleSheet, Text, TouchableWithoutFeedback, View } from "react-native";
export default class App extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
onPress = () => {
this.setState({
count: this.state.count + 1
});
};
render() {
return (
<View style={styles.container}>
<TouchableWithoutFeedback onPress={this.onPress}>
<View style={styles.button}>
<Text style={[styles.countText]}>Clicked Me</Text>
</View>
</TouchableWithoutFeedback>
<View style={[styles.countContainer]}>
<Text style={[styles.countText]}>
{this.state.count ? this.state.count : null}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10,
backgroundColor: '#03203C'
},
button: {
alignItems: "center",
backgroundColor: "red",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
},
countText: {
color: "white",
fontSize: 30
}
});
Output
Here in the above code, we define a View component in which we define a Text component Clicked Me, and on the View component, we define the TouchableWithoutFeedback which can invoke the onPress function whenever anyone clicks or touches the Child View component that's inside the TouchableWithoutFeedback component.
Also in the onPress component, we are increasing the value of the count variable using the setState method. Here, the count variable is defined using the state component and initially, we set it to 0. and after that, we are printing the value of the count variable in another View component inside the Text component. So, whenever anyone clicks on the button then the value of the count variable is increased by one and will print on the screen.
When using Touchable Component in React Native always remember that all the elements that respond to press or touch should have a visual when touched. So, they can break our code explicitly.
You may also like:
