How to attach accessiblityLabel to CheckBox from react-native-elements

Question

I'm trying to prepare my React native code for testing with Appium 2. We use CheckBox from react-native-elements.

I tried to add accessibilityLabel like this

import {CheckBox} from 'react-native-elements'

<Checkbox
    accessibilityLabel={accessibilityLabel}
    checkedIcon={<CheckboxCheckedIcon />}
    uncheckedIcon={<CheckboxUncheckedIcon />}
    onPress={() => onChange?.(!checked)}
    checked={checked}
    containerStyle={{height: SIZE, width: SIZE, margin: 0, padding: 2,...customContainerStyle}}
  />

But when I open it with Appium inspector the accessibility id is not there. So I think it is not propagated correctly.

• is it even possible?
• how do you achieve accessibility/testability of such checkbox?

thanks for any tips&tricks

Answer 1

Well... what worked, in the end, was to find the label and then send the tap action directly.

const checkBox = await driver.$('~my_checkbox_label')
await driver.touchAction({
        action: 'tap',
        element: checkBox
    });