Skip to main content

ExpandablePressable

ExpandablePressable is the Pressable component that automatically handles the expanded accessibilityState. Under the hood it uses useExpandable to achieve this.

Usage​

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

<ExpandablePressable
  accessibilityLabel="I'm ExpandablePressable!"
  expanded={isExpanded}
  onPress={onPress}>
  <Text>I'm pressable</Text>
</ExpandablePressable>;

Example​

import { ExpandablePressable, Text } from '@react-native-ama/react-native';

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

  return (
    <>
      <ExpandablePressable
        accessibilityLabel={isExpanded ? 'Less' : 'More'}
        expanded={isExpanded}
        onPress={() => setIsExpanded(expanded => !expanded)}>
        {isExpanded ? <MiniumIcon /> : <PlusIcon />}
      </ExpandablePressable>
      {isExpanded ? <>{/* content goes here */}</> : null}
    </>
  );
};

Accessibility

The hook automatically:

  • Sets accessibilityRole to button
  • Handles the accessibilityState for expanded

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

  • Forces the use of accessibilityLabel
  • Performs a Minimum Size check
  • 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

Contrast checker​

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

info

AMA does also perform a contrast check on disabled button, as a poor contrast can make them hard to read.

Minimum size​

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

Props​

Required accessibilityLabel​

The accessibilityLabel for the expandable button, this is announced by the screen reader when the element gains focus, then it announces its role. The accessibilityLabel is a required properties as if it is omitted, the user may have no context for the purpose of the button.

TypeDefault
stringundefined

Required expanded​

Indicates whether an expandable element is currently expanded or collapsed.

TypeDefault
booleanundefined

External resources​