Skip to content

Commit

Permalink
Add SwitchWrapper doc
Browse files Browse the repository at this point in the history
  • Loading branch information
JDMathew committed Aug 2, 2024
1 parent 484cc57 commit 3e02920
Showing 1 changed file with 32 additions and 0 deletions.
32 changes: 32 additions & 0 deletions packages/react-native/docs/SwitchWrapper.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { DevOnly } from '@site/src/components';

# SwitchWrapper

The component provides built-in accessibility implementation for creating a custom switch.

## Usage

```jsx pf
import {SwitchWrapper} from 'react-native-ama';

<SwitchWrapper
accessibilityLabel={accessibilityLabel}
style={[allStyles.container, style]}
onPress={onValueChange}
checked={value}>
<CustomSwitcher checked={checked} onPress={onValueChanged}>
</SwitchWrapper>
```

## Accessibility

The component uses the [useSwitch](./hooks/useSwitch.md) hook under the hood and:

- Sets the [accessibilityRole](../../../website/guidelines/accessibility-role.md) property to **switch**
- Handled the [accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) needed by the Screen Reader
- Performs a [Minimum Size](../../../website/guidelines/minimum-size.md) check <DevOnly />
- Performs a check on the [accessibilityLabel](../../../website/guidelines/accessibility-label.md) <DevOnly />

## Related guidelines

- [Forms](../../../website/guidelines/forms.md)

0 comments on commit 3e02920

Please sign in to comment.