Unable to inspect/interact with iOS react native app elements in Appium

Question

I am trying to locate the below highlighted meeting information. However in appium inspector all the elements are combined and shown in a single container. Three elements highlighted in red has different test id's but when I try to inspect it shows all three as one element. Hence I am not able to interact with any specific element on iOS. I can inspect the same three elements as different elements in android app. It works fine for android. p.s - I have also tried to inspect elements using accessibility inspector. the result is the same.

The app is developed in react native for Android and iOS. Appium desktop version- 1.18.0-2

code snippet-

<Card.Content>
          <Title
            accessibilityLabel="testID-meetingTitle"
            testID="testID-meetingTitle"
          >
            {item.name}
          </Title>
          <Text
            style={{ fontSize: 14, lineHeight: 20, color: "rgba(0,0,0,0.6)" }}
            testID-meetingTitle
            accessibilityLabel="testID-meetingInformation"
            testID="testID-meetingInformation"
          >
            {item.date}
          </Text>
        </Card.Content>

Please let me know if there is any solution for the same..

Answer 1

You should NOT specify accessibilityLabel for ios separate props for ios and android like so:

export default function testID(id) {
    return Platform.OS === 'android'
        ? {
            accessible        : true,
            accessibilityLabel: id,
        }
        : {
            testID: id,
        };
}

and then

<Text
    {...otherProps}
    {...testID('testID-meetingInformation')}
/>