React Native can't find child elements when accessible is true

Question

With this JSX:

<View>
  <Text testID='t1'>text 1</Text>
  <Text testID='t2'>text 2</Text>
</View>

I can find the child elements by their testID (e.g. with Appium)

If I change the View to a TouchableOpacity the child elements seem to be gathered together into a single UIAElement on iOS and then can't be found.

It looks like TouchableOpacity has its accessible property hardcoded to true and that enables the gathering behaviour (see https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/)

Is this expected behaviour? It makes testing quite difficult.

Answer 1

Any element or component that is touchable is defaulted to accessible={true}. If you do not want them grouped together, try this:

<View accessible={false}>
  <Text testID='t1'>text 1</Text>
  <Text testID='t2'>text 2</Text>
</View>

This should allow the children to become their one elements, instead of one element (the view element).