Skip to main content
Version: 0.7.x

SwitchListItem

It is a utility component that provides a list item with a customisable label and switch control focused on accessibility.

Usage

<SwitchListItem
label={
<Text style={styles.switchText}>I'm a switch</Text>
}
style={styles.switchListItem}
value={isSwitchOn}
onValueChange={toggleSwitch}
>
{...}
</SwitchListItem>

Accessibility

The component:

  • is announced as a "switch"
  • handles the accessibilityState checked
  • user the label text as accessibilityLabel

Props

Required labelComponent

The custom label to use for the component.

TypeDefault
JSX.Elementundefined

If no accessibilityLabel is provided, the component children are used to generate the one.

labelPosition

The position where to render the label, left or right of the switch.

TypeDefault
'left' | 'right''left'

Required value

The switch state

TypeDefault
booleanundefined

onValueChange

The callback to call when the list item is toggled

Customisation

By default, the component uses the React Native switch, but this behavior can be overridden by passing a child component:

<SwitchListItem
label={<Text style={styles.switchText}>I'm a switch</Text>}
style={styles.switchListItem}
value={isSwitchOn}
onValueChange={toggleSwitch}>
<CustomSwitch value={isSwitchOn} onValueChange={toggleSwitch} />
</SwitchListItem>

In this case, the custom CustomSwitch component is used instead of the React Native one.

note

The SwitchListItem component, to avoid the switch being individually focusable on Android, the component automatically sets the following properties for all the children:

  • accessibilityElementsHidden={true}
  • importantForAccessibility="no"