Tip

If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.

Usage

The TouchableOpacity component is used to create pressable elements that fade out on press, providing smooth and subtle visual feedback. This component is lightweight and often used for buttons or other pressable elements that require an opacity change on interaction. This customized version of the React Native TouchableOpacity component is enhanced to supports Abyss design tokens and fit seamlessly into our design system.

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.

Best Practices

• Consistent Opacity: Use consistent values for activeOpacity across your app to maintain uniformity in user interactions.
• Clear Press Feedback: Ensure that the change in opacity is noticeable enough to signal to users that the element is pressed.
• Layering Components: Be mindful when layering TouchableOpacity over complex backgrounds, as the fade effect might not be as visible.

Accessibility Considerations

• Visual Feedback: Ensure the fade effect is sufficiently noticeable for all users, especially those with visual impairments.
• Keyboard Navigation: Ensure the component can be navigated and activated via a keyboard.
• Accessible Labels: Add descriptive labels to the TouchableOpacity component so screen readers can convey its functionality.

TouchableOpacity Classes

Class Name	Description
abyss-touchable-opacity-root	TouchableOpacity root element

TouchableOpacity Props

Extends React Native - TouchableOpacity props.

Name	Type	Default	Required	Description
activeOpacity	Abyss.Opacity | undefined	-	-	Determines what the opacity of the wrapped view should be when touch is active
hitSlop	Insets | Inset | null | undefined	-	-	This defines how far your touch can start away from the button. This is added to pressRetentionOffset when moving off of the button. NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
pressRetentionOffset	Insets | Inset | null | undefined	-	-	When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
style	Abyss.Style<"TouchableOpacity">	-	-	TouchableOpacity style properties with Abyss token mapping