Introduction
React Native, a powerful framework for building native apps for iOS and Android using JavaScript, often requires developers to create custom UI components, like a custom button. This article will guide you through creating a custom button in React Native, focusing on different touchable components and explaining why Pressable
might be a preferable choice.
Differences Between Touchable Components
In React Native, a button can be created using the built-in Button
component or through TouchableOpacity
, TouchableHighlight
, and Pressable
. While Button
offers simplicity by providing basic styling, TouchableOpacity
and TouchableHighlight
provide more options for customization. However, Pressable
, introduced in React Native 0.63, is more flexible and nowadays the recommended option to handle touch-based input.
TouchableOpacity
- Feedback: Diminishes the opacity of the button on press.
- Use Case: Suitable for most cases where a button or an area needs to be clickable.
TouchableHighlight
- Feedback: Displays a "highlight" or a different background color on press.
- Use Case: Useful when a visual feedback of a color change is needed.
Pressable
- Feedback: Highly customizable, can define any kind of visual feedback.
- Advantages:
- More extensive customization options for touch interactions.
- Includes features like
onPressIn
,onPressOut
, andonLongPress
. - Handles hover and focus in addition to press states, making it more suitable for a variety of devices.
- Allows to define a HitRect area via the
hitSlop
prop to widen the area a press is registered without increasing the size of the button. Essentially,hitSlop
specifies how far the touch area extends beyond the bounds of the visual element.
- Use Case: Recommended for new React Native projects due to its versatility and comprehensive feature set.
Creating a Custom Button
We will now create a new customizable button component, called AppButton
:
import { Pressable, StyleSheet, Text } from "react-native";
const AppButton = (props) => {
return (
<Pressable
style={({ pressed }) => [
{
backgroundColor: props.disabled
? "#ccc"
: pressed
? "#aa0000"
: props.color || "red",
},
styles.container,
props.buttonStyles,
]}
disabled={props.disabled}
onPress={props.onPress}
accessible
accessibilityLabel={props.accessibilityLabel || "A Button"}
>
<Text style={[styles.text, props.textStyles]}>
{props.children || "Press Me"}
</Text>
</Pressable>
);
};
const styles = StyleSheet.create({
container: {
padding: 8,
alignItems: "center",
borderRadius: 8,
},
text: { color: "white" },
});
export default AppButton;
The AppButton
has one required prop
, which is the onPress
function. It's styles can be adjusted by passing textStyles
or buttonStyles
. For this component, style can be passed as a function instead of an object. We use this to create a press effect by changing the background color on the press of a finger
for a short time. If the button is disabled we deactivate that effect and set it to a shade of gray to indicate this to the user visually. Last but not least, accessible
and accessibilityLabel
are set so that people who use VoiceOver or TalkBack know what element they have selected. A screen reader will verbalize this string when the associated element is selected.
You can find an online version of the button here.
Advanced Options
- Adding Icons: Icons can be added to the button by using libraries like react-native-vector-icons.
- Animations: Animations like changing the background color can be added by using Animated or LayoutAnimation.
Conclusion
Creating a custom button in React Native is a straightforward process and can significantly enhance an app's user experience. By customizing styles and adding features like icons and animations, a button that perfectly fits an app's design can be created. The Pressable
component, with its extensive customization options, provides a versatile, future-proof and comprehensive solution for touchable interactions.
Top comments (0)