Skip to main content

TouchableOpacity

TouchableOpacity is an extension of the React Native TouchableOpacity component, focused on accessibility.

import { TouchableOpacity } from 'react-native-ama';

<TouchableOpacity accessibilityRole="button" accessibilityLabel="I'm pressable!">
<Text>I'm pressable</Text>
</TouchableOpacity>;

Accessibility improvements

Compared to the default React Native component, this custom component:

  • Forces the use of accessibilityRole and accessibilityLabel
  • accessibilityState has been removed as its states busy, checked, selected, expanded are exposed as a property
  • Performs a contrast checker between its background color and its children color

accessibilityRole

The accessibilityRole property is used by the screen reader to announce the kind of element focused on. If the property is omitted, the user might have little to no clue what could happen if the element is triggered.

Check here for more info

accessibilityLabel

The accessibilityLabel property is the first thing announced by the screen reader when the elements gain the focus; then, it announces its role. If the property is omitted, the user might have little to no clue what could happen if the element is triggered.

Check here for more info

Accessibility states

The default accessibilityState property does accept an object like:

accessibilityState={{
busy: boolean;
checked: boolean | 'mixed';
selected: boolean;
expanded: boolean;
}}

To simply the syntax, the custom component allows passing those states as property for the component, handling the generation of the object under the hood.

Contrast checker

The component performs a contrast check between its background colour and the children's foreground when in dev mode.

note

AMA performs the check on both pressed and non-pressed states when passing a function as style.

Minimum size

The component uses the onLayout prop to perform the minium size check.

Additional Props

busy

Indicates whether an element is currently busy or not.

TypeDefault
booleanundefined

Example

import { ActivityIndicator } from 'react-native';
import { TouchableOpacity, Text } from 'react-native-ama';

const Test = () => {
const [isLoading, setIsLoading] = React.useState(false);

const doSometing = async () => {
setIsLoading(true);

await slowCall();

setIsLoading(true);
};

return (
<TouchableOpacity
accessiblityRole="button"
accessibilityLabel="Do it"
busy={isLoading}
onPress={doSometing}>
{isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
</TouchableOpacity>
);
};

checked

Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.

TypeDefaultRequired
boolean or 'mixed'undefinedNo

selected

Indicates whether a selectable element is currently selected or not.

TypeDefaultRequired
booleanundefinedNo

expanded

Indicates whether an expandable element is currently expanded or collapsed.

TypeDefaultRequired
booleanundefinedNo

Example

import { ActivityIndicator } from 'react-native';
import { TouchableOpacity, Text } from 'react-native-ama';

const Test = () => {
const [isExpanded, setIsExpanded] = React.useState(false);

return (
<>
<TouchableOpacity
accessiblityRole="button"
accessibilityLabel={isExpanded ? 'Less' : 'More'}
expanded={isExpanded}
onPress={() => setIsExpanded(expanded => !expanded)}>
{isExpanded ? <MinumIcon /> : <PlusIcon />}
</TouchableOpacity>
{isExpanded ? <>{/* content goes here */}</> : null}
</>
);
};