Skip to main content

useExpandable

This hook allows creating custom Expandable elements with the Accessibility checks needed.

Usage​

import { PressableProps, useExpandable } from 'react-native-ama';

const expandableProps =
  useExpandable <
  PressableProps >
  {
    ...props,
    expanded: boolean,
  };

Example​

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

type CustomExpandableProps = React.PropsWithChildren<
    UseExpandable<PressableProps>
>

export const CustomExpandable = ({
  children,
  ...rest
}: CustomExpandableProps) => {
  const expandableProps = useExpandable(rest);

  return (
    <Pressable {...expandableProps}>
      {children}
    </Pressable>
  );
};

Accessibility checks​

The hook automatically:

  • Sets accessibilityRole to button
  • Handles the accessibilityState for expanded

At runtime, the hook:

  • Forces the use of accessibilityLabel DEV only check
  • Performs a Minimum Size check DEV only check
  • Performs a contrast checker between its background color and its children color DEV only check

Props​

Required 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.

Required expanded​

Indicates whether an expandable element is currently expanded or collapsed.