File tree Expand file tree Collapse file tree 1 file changed +32
-0
lines changed
packages/react-native/docs Expand file tree Collapse file tree 1 file changed +32
-0
lines changed Original file line number Diff line number Diff line change
1
+ import { DevOnly } from ' @site/src/components' ;
2
+
3
+ # SwitchWrapper
4
+
5
+ The component provides built-in accessibility implementation for creating a custom switch.
6
+
7
+ ## Usage
8
+
9
+ ``` jsx pf
10
+ import {SwitchWrapper } from ' react-native-ama' ;
11
+
12
+ < SwitchWrapper
13
+ accessibilityLabel= {accessibilityLabel}
14
+ style= {[allStyles .container , style]}
15
+ onPress= {onValueChange}
16
+ checked= {value}>
17
+ < CustomSwitcher checked= {checked} onPress= {onValueChanged}>
18
+ < / SwitchWrapper>
19
+ ```
20
+
21
+ ## Accessibility
22
+
23
+ The component uses the [ useSwitch] ( ./hooks/useSwitch.md ) hook under the hood and:
24
+
25
+ - Sets the [ accessibilityRole] ( ../../../website/guidelines/accessibility-role.md ) property to ** switch**
26
+ - Handled the [ accessibilityState] ( https://reactnative.dev/docs/accessibility#accessibilitystate ) needed by the Screen Reader
27
+ - Performs a [ Minimum Size] ( ../../../website/guidelines/minimum-size.md ) check <DevOnly />
28
+ - Performs a check on the [ accessibilityLabel] ( ../../../website/guidelines/accessibility-label.md ) <DevOnly />
29
+
30
+ ## Related guidelines
31
+
32
+ - [ Forms] ( ../../../website/guidelines/forms.md )
You can’t perform that action at this time.
0 commit comments