What are Touchables in React Native?
Touchables are components used in React Native for interactions. They enable us to tailor touch interaction between the user and the app to our needs. Touchables can provide feedback and interaction methods, such as pressing, tapping, and long-pressing. We can build buttons using these components.
Note: Touchables do not come with their styling, which needs to be applied to these components.
Pros and cons of Touchables
Touchables have various advantages in accomplishing the task of handling interactions. To begin with, Touchables allows for consistency of touch behaviors and feedback across platforms and platform-specific optimizations. Touchables are also easy to implement (requiring fewer lines of code) and have standardized behavior, providing a more intuitive user interface. Moreover, Touchables have built-in touch feedback, such as opacity changes, ripple effects, or color changes. It also has built-in accessibility features, which enable developers to create applications that are more accessible for users with disabilities. These advantages inform the choice of Touchables over their alternatives.
However, Touchables have various disadvantages as well. Firstly, they have limited customization compared to some alternative methods. As a result, they are not ideal for complex interactions and gestures. Additionally, Touchables have a performance impact due to less optimization than manually optimized custom touch-handling methods. Touchables also have a potential overhead when used extensively in complex UI structures. Moreover, some Touchables rely on Native components that might not be available in certain scenarios. These disadvantages indicate which use cases Touchables are not suited for.
Types of Touchable components
Let’s look at the different types of Touchable components that are available in React Native.
The TouchableHighlight component
The TouchableHighlight component in React Native provides feedback to the user upon tapping the button. The feedback consists of a subtle and brief change in the opacity of the wrapped content to inform the user of the button press.
Let’s look at the example below to see how the TouchableHighlight component works where we have set underlayColor to “red.”
import React, { useState } from 'react';
import { View, Text, Button, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, StyleSheet } from 'react-native';
const CounterApp = () => {
// State for the incremental counter
const [count, setCount] = useState(0);
// Function to increment counter
const incrementCounter = () => {
setCount(count + 1);
};
// Frontend containing incremental counter and touchable button
return (
<View style={styles.container}>
<Text style={styles.counterText}>Counter: {count}</Text>
<TouchableHighlight onPress={incrementCounter} underlayColor="red">
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableHighlight</Text>
</View>
</TouchableHighlight>
</View>
);
};
const styles = StyleSheet.create({
// Style description for the container
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
// Style description for the counter text
counterText: {
fontSize: 24,
marginBottom: 20,
},
// Style description for the button
button: {
backgroundColor: 'blue',
padding: 10,
borderRadius: 5,
marginBottom: 10,
},
// Style description for the button text
buttonText: {
color: 'white',
fontSize: 16,
textAlign: 'center',
},
});
export default CounterApp;
Let’s look at a detailed explanation of the code above:
Lines 1–2: We import the required libraries.
Lines 4–49: We define a
CounterAppcomponent.Line 6: We define a state for incremental control.
Lines 8–10: We define a function for incremental control.
Lines 15–19: We define a
TouchableHighlightcomponent.Lines 24–48: We style the frontend components.
Line 51: We export the
CounterAppcomponent.
The TouchableOpacity component
The TouchableOpacity component in React Native is similar to TouchableHighlight. They both provide the user of the feedback of the button press upon tapping the button. However, TouchableOpacity specifically reduces the opacity of the button substantially to expose the background when the button is pressed down, this is the feedback that is provided to the user.
Let's look at the example below to see how the TouchableOpacity component works.
import React, { useState } from 'react';
import { View, Text, Button, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, StyleSheet } from 'react-native';
const CounterApp = () => {
// State for the incremental counter
const [count, setCount] = useState(0);
// Function to increment counter
const incrementCounter = () => {
setCount(count + 1);
};
// Frontend containing incremental counter and touchable button
return (
<View style={styles.container}>
<Text style={styles.counterText}>Counter: {count}</Text>
<TouchableOpacity onPress={incrementCounter}>
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableOpacity</Text>
</View>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
// Style description for the countainer
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
// Style description for the counter text
counterText: {
fontSize: 24,
marginBottom: 20,
},
// Style description for the button
button: {
backgroundColor: 'blue',
padding: 10,
borderRadius: 5,
marginBottom: 10,
},
// Style description for the button text
buttonText: {
color: 'white',
fontSize: 16,
textAlign: 'center',
},
});
export default CounterApp;
Let’s look at a detailed explanation of the code above:
Lines 1–2: We import the required libraries.
Lines 4–49: We define a
CounterAppcomponent.Line 6: We define a state for incremental control.
Lines 8–10: We define a function for incremental control.
Lines 15–19: We define a
TouchableOpacitycomponent.Lines 24–48: We style the frontend components.
Line 51: We export the
CounterAppcomponent.
The TouchableWithoutFeedback component
The TouchableWithoutFeedback component in React Native does the opposite of the rest and does not provide feedback upon pressing it. It enables a similar interaction with the button (the button is activated upon a tap gesture). This component has slightly less overhead compared to the rest due to the lack of visual changes.
Let’s look at the example below to see how the TouchableWithoutFeedback component works.
import React, { useState } from 'react';
import { View, Text, Button, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, StyleSheet } from 'react-native';
const CounterApp = () => {
// State for the incremental counter
const [count, setCount] = useState(0);
// Function to increment counter
const incrementCounter = () => {
setCount(count + 1);
};
// Frontend containing incremental counter and touchable button
return (
<View style={styles.container}>
<Text style={styles.counterText}>Counter: {count}</Text>
<TouchableWithoutFeedback onPress={incrementCounter}>
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
};
const styles = StyleSheet.create({
// Style description for the countainer
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
// Style description for the counter text
counterText: {
fontSize: 24,
marginBottom: 20,
},
// Style description for the button
button: {
backgroundColor: 'blue',
padding: 10,
borderRadius: 5,
marginBottom: 10,
},
// Style description for the button text
buttonText: {
color: 'white',
fontSize: 16,
textAlign: 'center',
},
});
export default CounterApp;
Let’s look at a detailed explanation of the code above:
Lines 1–2: We import the required libraries.
Lines 4–49: We define a
CounterAppcomponent.Line 6: We define a state for incremental control.
Lines 8–10: We define a function for incremental control.
Lines 15–19: We define a
TouchableWithoutFeedbackcomponent.Lines 24–48: We style the frontend components.
Line 51: We export the
CounterAppcomponent.
The onLongPress component
This is a modification that can be applied to TouchableHighlight and TouchableOpacity. This modifications changes the touch interaction that the user can have with the button, it makes the button activate on a long press rather than a tap gesture. The feedback that the user is provided by the button upon activation would still depend on the touchable component being used.
Note:
onLongPresscannot be applied to all Touchable components.
Let's look at the example below to see how the TouchableHighlight component works with onLongPress.
import React, { useState } from 'react';
import { View, Text, Button, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, StyleSheet } from 'react-native';
const CounterApp = () => {
// State for the incremental counter
const [count, setCount] = useState(0);
// Function to increment counter
const incrementCounter = () => {
setCount(count + 1);
};
// Frontend containing incremental counter and touchable button
return (
<View style={styles.container}>
<Text style={styles.counterText}>Counter: {count}</Text>
<TouchableHighlight
onLongPress={incrementCounter}
underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>Touchable with Long Press</Text>
</View>
</TouchableHighlight>
</View>
);
};
const styles = StyleSheet.create({
// Style description for the countainer
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
// Style description for the counter text
counterText: {
fontSize: 24,
marginBottom: 20,
},
// Style description for the button
button: {
backgroundColor: 'blue',
padding: 10,
borderRadius: 5,
marginBottom: 10,
},
// Style description for the button text
buttonText: {
color: 'white',
fontSize: 16,
textAlign: 'center',
},
});
export default CounterApp;
Let’s look at a detailed explanation of the code above:
Lines 1–2: We import the required libraries.
Lines 4–51: We define a
CounterAppcomponent.Line 6: We define a state for incremental control.
Lines 8–10: We define a function for incremental control.
Lines 15–21: We define a
TouchableHighlightcomponent.Lines 26–51: We style the frontend components.
Line 53: We export the
CounterAppcomponent.
Alternatives to Touchables
While Touchables are specifically designed to handle touch interactions, there are alternatives to Touchables that accomplish the same purpose. Some of these alternatives include:
Gesture responder system: This alternative includes
PanResponderAPI, which can recognize touch gestures, for example, swipes, drags etc.onPress: This alternative can be used on any regular component likeView,Text,Image, etc. This alternative makes the component interactable; it can respond to simple tap interactions.Third-party libraries: There are third-party libraries such as
react-native-gesture-handlerthat provide advanced gesture handling.Custom touch handling: This alternative allows the developer to create custom touch handling by using events available in React Native.
CSS-based interaction: This alternative also allows some level of interactivity by using styles like
hover,active, andfocus. However, the interaction is limited.
These alternatives allow the developer a wider toolset to utilize while creating applications. However, the use of Touchables is preferred in certain use cases.
Test yourself
Let’s test your understanding of all the types of Touchable components.
TouchableHighlight
Interaction: Tap and hold gesture
Feedback: Slight change in opacity
TouchableWithoutFeedback
Interaction: Tap and hold gesture
Feedback: Reduction in opacity
TouchableOpacity
Interaction: Tap gesture
Feedback: Slight change in opacity
TouchableHighlight with onLongPress
Interaction: Tap gesture
Feedback: Reduction in opacity
TouchableOpacity with onLongPress
Interaction: Tap gesture
Feedback: No feedback
Conclusion
Touchables are components in React Native that allow developers to define the user’s interactions with their applications with ease. While there are other types of components that can be utilized for the same purpose, Touchables offer ease of implementation, consistency across platforms, accessibility features and other advantages. There are multiples of Touchables components, including TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback etc. Each of these components have their methods of interaction and feedback.
Free Resources
