no-nested-touchables.md

no-nested-touchables

<Touchable*> or will not work inside an accessible element. Any element that has the accessible={true} property (along with the accessibleLabel property) must therefore not contain any <Touchable*> or elements.

References

1. https://facebook.github.io/react-native/docs/accessibility.html

Rule details

This rule takes no arguments.

Succeed

<TouchableOpacity
  accessibilityTraits="button"
  accessibilityComponentType="button"
  accessibilityLabel="Tap Me!"
  accessible={true}
>
  <Text>submit</Text>
  <View>
    <Text>cancel</Text>
  </View>
</TouchableOpacity>

Fail

<TouchableOpacity
  accessibilityTraits="button"
  accessibilityComponentType="button"
  accessibilityLabel="Tap Me!"
  accessible={true}
>
  <View>
    <Button />
  </View>
</TouchableOpacity>