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
| Prop Name | Type | Default | Description |
|---|---|---|---|
| style | Abyss.Style<"TouchableOpacity"> | - | Object or array of objects defining the style of the TouchableOpacity component with design tokens |