Skip to main content

usePressable

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

Usage​

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

const pressableProps = usePressable<PressableProps>(props, children);
  • props: The component props
  • children: The component children

Accessibility checks​

At runtime the hook:

  • Forces the use of accessibilityRole and accessibilityLabel DEV only check
  • Handles the accessibilityState passed as property
  • Performs a Minimum Size check DEV only check
  • Performs a contrast checker between background color and its children color DEV only check

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.

Example​

import { Pressable, PressableProps } from 'react-native';
import { usePressable, UsePressable } from 'react-native-ama';

export type MyCustomPressableProps = UsePressable<PressableProps>;

const MyCustomPressable: React.FC<MyCustomPressableProps> = ({children, ...rest}) => {
    const pressableProps = usePressable(rest, children);

    return (
        <Pressable
            {...props}
            {...pressableProps}
        >
            <Text>This is my custom pressable</Text>
        </Pressable>
    )
}