Skip to main content

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"