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 - TouchableOpacityopens in a new window props.

Name	Type	Default	Description
activeOpacity	Opacity | undefined		Determines what the opacity of the wrapped view should be when touch is active
disableDefaultProviderProps	boolean | undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
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.
rootTestID	string | undefined		Adds the passed in test ID to the root element of the component.
style	Style<"TouchableOpacity">		Style properties with Abyss token mapping
styles	Styles<TouchableOpacityClasses> | undefined		Add custom styles to component by class name with Abyss token mapping
testID	string | undefined		Using this prop will append -abyss and the name of the element class at the end of the testID passed in. If you want to only use string passed in on the root element, use the rootTestID prop instead. Used to locate this view in end-to-end tests.